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: add slider preview thumbnails (#935)

Browse Source
This commit is contained in:
Sam Potts
2026-03-14 08:30:51 +11:00
committed by GitHub
parent dc12cc2162
commit e3f438e9f4
51 changed files with 551 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/html/src/define/video/minimal-skin.tailwind.ts
+9
View File
@@ -11,6 +11,7 @@ import {
iconState,
overlay,
popup,
preview,
root,
seek,
slider,
@@ -100,6 +101,14 @@ 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>
<div class="${preview.root}">
<div class="${preview.thumbnailWrapper}">
<media-slider-thumbnail class="${preview.thumbnail}"></media-slider-thumbnail>
</div>
<media-slider-value type="pointer" class="${preview.timestamp}"></media-slider-value>
${renderIcon('spinner', { class: cn(icon, preview.spinner) })}
</div>
</media-time-slider>
</div>
packages/html/src/define/video/minimal-skin.ts
+8
View File
@@ -79,6 +79,14 @@ 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>
<div class="media-preview media-slider__preview">
<div class="media-preview__thumbnail-wrapper">
<media-slider-thumbnail class="media-preview__thumbnail"></media-slider-thumbnail>
</div>
<media-slider-value type="pointer" class="media-preview__timestamp"></media-slider-value>
${renderIcon('spinner', { class: 'media-preview__spinner media-icon' })}
</div>
</media-time-slider>
</div>
packages/html/src/define/video/skin.tailwind.ts
+7
View File
@@ -11,6 +11,7 @@ import {
overlay,
playbackRate,
popup,
preview,
root,
seek,
slider,
@@ -94,6 +95,12 @@ 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>
<div class="${preview.root}">
<media-slider-thumbnail class="${preview.thumbnail}"></media-slider-thumbnail>
<media-slider-value type="pointer" class="${preview.timestamp}"></media-slider-value>
${renderIcon('spinner', { class: cn(icon, preview.spinner) })}
</div>
</media-time-slider>
<media-time type="duration" class="${time.duration}"></media-time>
</media-time-group>
packages/html/src/define/video/skin.ts
+6
View File
@@ -75,6 +75,12 @@ 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>
<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-preview__timestamp"></media-slider-value>
${renderIcon('spinner', { class: 'media-preview__spinner media-icon' })}
</div>
</media-time-slider>
<media-time type="duration" class="media-time__value"></media-time>
</media-time-group>