zoriya/v10
1
0
Fork 0
mirror of https://github.com/zoriya/v10.git synced 2026-08-16 02:45:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(skin): show scrubber preview timestamps (#1652)

Browse Source
This commit is contained in:
Sam Potts
2026-06-03 19:27:54 +10:00
committed by GitHub
parent d96a8dd474
commit 7453d538a8
35 changed files with 382 additions and 166 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/html/src/define/audio/minimal-skin.tailwind.ts
+3
View File
@@ -85,6 +85,9 @@ function getTemplateHTML() {
<media-slider-buffer class="${cn(slider.fill.base, slider.fill.buffer)}"></media-slider-buffer>
</media-slider-track>
<media-slider-thumb class="${cn(slider.thumb.base, slider.thumb.interactive)}"></media-slider-thumb>
<media-slider-preview class="${slider.preview}">
<media-slider-value type="pointer" class="${slider.value}"></media-slider-value>
</media-slider-preview>
</media-time-slider>
</div>
packages/html/src/define/audio/minimal-skin.ts
+3
View File
@@ -68,6 +68,9 @@ function getTemplateHTML() {
<media-slider-buffer class="media-slider__buffer"></media-slider-buffer>
</media-slider-track>
<media-slider-thumb class="media-slider__thumb"></media-slider-thumb>
<media-slider-preview class="media-slider__preview">
<media-slider-value type="pointer" class="media-slider__value media-time"></media-slider-value>
</media-slider-preview>
</media-time-slider>
</div>
packages/html/src/define/audio/skin.tailwind.ts
+3
View File
@@ -80,6 +80,9 @@ function getTemplateHTML() {
<media-slider-buffer class="${cn(slider.fill.base, slider.fill.buffer)}"></media-slider-buffer>
</media-slider-track>
<media-slider-thumb class="${cn(slider.thumb.base, slider.thumb.interactive)}"></media-slider-thumb>
<media-slider-preview class="${slider.preview}">
<media-slider-value type="pointer" class="${slider.value}"></media-slider-value>
</media-slider-preview>
</media-time-slider>
<media-time type="duration" class="${time.duration}"></media-time>
</div>
packages/html/src/define/audio/skin.ts
+3
View File
@@ -63,6 +63,9 @@ function getTemplateHTML() {
<media-slider-buffer class="media-slider__buffer"></media-slider-buffer>
</media-slider-track>
<media-slider-thumb class="media-slider__thumb"></media-slider-thumb>
<media-slider-preview class="media-slider__preview">
<media-slider-value type="pointer" class="media-slider__value media-time"></media-slider-value>
</media-slider-preview>
</media-time-slider>
<media-time type="duration" class="media-time"></media-time>
</div>
packages/html/src/define/video/minimal-skin.tailwind.ts
+9 -6
View File
@@ -16,10 +16,10 @@ import {
playbackRate,
popup,
poster,
preview,
root,
seek,
slider,
thumbnail,
time,
} from '@videojs/skins/minimal/tailwind/video.tailwind';
import { createTemplate } from '@videojs/utils/dom';
@@ -100,13 +100,16 @@ function getTemplateHTML() {
</media-slider-track>
<media-slider-thumb class="${cn(slider.thumb.base, slider.thumb.interactive)}"></media-slider-thumb>
<div class="${preview.root}">
<div class="${preview.thumbnailWrapper}">
<media-slider-thumbnail class="${preview.thumbnail}"></media-slider-thumbnail>
<div class="${thumbnail.root}">
<div class="${thumbnail.imageWrapper}">
<media-slider-thumbnail class="${thumbnail.image}"></media-slider-thumbnail>
</div>
<media-slider-value type="pointer" class="${preview.time}"></media-slider-value>
${renderIcon('spinner', { class: cn(icon, preview.spinner) })}
<media-slider-value type="pointer" class="${cn(time.current, thumbnail.time)}"></media-slider-value>
${renderIcon('spinner', { class: cn(icon, thumbnail.spinner) })}
</div>
<media-slider-preview class="${slider.preview}">
<media-slider-value type="pointer" class="${cn(slider.value, time.current)}"></media-slider-value>
</media-slider-preview>
</media-time-slider>
</div>
packages/html/src/define/video/minimal-skin.ts
+9 -5
View File
@@ -77,13 +77,17 @@ function getTemplateHTML() {
</media-slider-track>
<media-slider-thumb class="media-slider__thumb"></media-slider-thumb>
<div class="media-preview media-slider__preview">
<div class="media-preview__thumbnail-wrapper">
<media-slider-thumbnail class="media-preview__thumbnail"></media-slider-thumbnail>
<div class="media-thumbnail media-slider__thumbnail">
<div class="media-thumbnail__image-wrapper">
<media-slider-thumbnail class="media-thumbnail__image"></media-slider-thumbnail>
</div>
<media-slider-value type="pointer" class="media-time media-preview__time"></media-slider-value>
${renderIcon('spinner', { class: 'media-preview__spinner media-icon' })}
<media-slider-value type="pointer" class="media-time media-thumbnail__time"></media-slider-value>
${renderIcon('spinner', { class: 'media-thumbnail__spinner media-icon' })}
</div>
<media-slider-preview class="media-slider__preview">
<media-slider-value type="pointer" class="media-slider__value media-time"></media-slider-value>
</media-slider-preview>
</media-time-slider>
</div>
packages/html/src/define/video/skin.tailwind.ts
+8 -5
View File
@@ -16,10 +16,10 @@ import {
playbackRate,
popup,
poster,
preview,
root,
seek,
slider,
thumbnail,
time,
} from '@videojs/skins/default/tailwind/video.tailwind';
import { createTemplate } from '@videojs/utils/dom';
@@ -97,11 +97,14 @@ function getTemplateHTML() {
</media-slider-track>
<media-slider-thumb class="${cn(slider.thumb.base, slider.thumb.interactive)}"></media-slider-thumb>
<div class="${preview.root}">
<media-slider-thumbnail class="${preview.thumbnail}"></media-slider-thumbnail>
<media-slider-value type="pointer" class="${preview.time}"></media-slider-value>
${renderIcon('spinner', { class: cn(icon, preview.spinner) })}
<div class="${thumbnail.root}">
<media-slider-thumbnail class="${thumbnail.image}"></media-slider-thumbnail>
<media-slider-value type="pointer" class="${cn(time.current, thumbnail.time)}"></media-slider-value>
${renderIcon('spinner', { class: cn(icon, thumbnail.spinner) })}
</div>
<media-slider-preview class="${slider.preview}">
<media-slider-value type="pointer" class="${cn(slider.value, time.current)}"></media-slider-value>
</media-slider-preview>
</media-time-slider>
<media-time type="duration" class="${time.duration}"></media-time>
</div>
packages/html/src/define/video/skin.ts
+8 -4
View File
@@ -74,11 +74,15 @@ function getTemplateHTML() {
</media-slider-track>
<media-slider-thumb class="media-slider__thumb"></media-slider-thumb>
<div class="media-surface media-preview media-slider__preview">
<media-slider-thumbnail class="media-preview__thumbnail"></media-slider-thumbnail>
<media-slider-value type="pointer" class="media-time media-preview__time"></media-slider-value>
${renderIcon('spinner', { class: 'media-preview__spinner media-icon' })}
<div class="media-surface media-thumbnail media-slider__thumbnail">
<media-slider-thumbnail class="media-thumbnail__image"></media-slider-thumbnail>
<media-slider-value type="pointer" class="media-time media-thumbnail__time"></media-slider-value>
${renderIcon('spinner', { class: 'media-thumbnail__spinner media-icon' })}
</div>
<media-slider-preview class="media-slider__preview">
<media-slider-value type="pointer" class="media-slider__value media-time"></media-slider-value>
</media-slider-preview>
</media-time-slider>
<media-time type="duration" class="media-time"></media-time>
</div>