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(packages): add poster component to video skins (#994)

Browse Source
This commit is contained in:
Sam Potts
2026-03-18 17:57:10 +11:00
committed by GitHub
parent b9bada9567
commit 59bbf6c209
45 changed files with 445 additions and 171 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/html/src/define/base.css
-2
View File
@@ -10,8 +10,6 @@ video-player video {
display: block;
width: 100%;
height: 100%;
object-fit: var(--media-object-fit, contain);
object-position: var(--media-object-position, center);
}
video-player video::-webkit-media-text-track-container {
packages/html/src/define/video/minimal-skin.tailwind.ts
+7 -1
View File
@@ -10,7 +10,9 @@ import {
iconFlipped,
iconState,
overlay,
playbackRate,
popup,
poster,
preview,
root,
seek,
@@ -32,13 +34,13 @@ import '../ui/pip-button';
import '../ui/play-button';
import '../ui/playback-rate-button';
import '../ui/popover';
import '../ui/poster';
import '../ui/seek-button';
import '../ui/time';
import '../ui/time-slider';
import '../ui/tooltip';
import '../ui/tooltip-group';
import '../ui/volume-slider';
import { playbackRate } from '@videojs/skins/default/tailwind/video.tailwind';
const SEEK_TIME = 10;
@@ -47,6 +49,10 @@ function getTemplateHTML() {
<media-container class="${root(true)}">
<slot name="media"></slot>
<media-poster class="${poster(true)}">
<slot name="poster"></slot>
</media-poster>
<media-buffering-indicator class="${bufferingIndicator}">
${renderIcon('spinner')}
</media-buffering-indicator>
packages/html/src/define/video/minimal-skin.ts
+5
View File
@@ -13,6 +13,7 @@ import '../ui/pip-button';
import '../ui/play-button';
import '../ui/playback-rate-button';
import '../ui/popover';
import '../ui/poster';
import '../ui/seek-button';
import '../ui/time';
import '../ui/time-slider';
@@ -27,6 +28,10 @@ function getTemplateHTML() {
<media-container class="media-minimal-skin media-minimal-skin--video">
<slot name="media"></slot>
<media-poster>
<slot name="poster"></slot>
</media-poster>
<media-buffering-indicator class="media-buffering-indicator">
${renderIcon('spinner', { class: 'media-icon' })}
</media-buffering-indicator>
packages/html/src/define/video/skin.tailwind.ts
+6
View File
@@ -11,6 +11,7 @@ import {
overlay,
playbackRate,
popup,
poster,
preview,
root,
seek,
@@ -32,6 +33,7 @@ import '../ui/pip-button';
import '../ui/play-button';
import '../ui/playback-rate-button';
import '../ui/popover';
import '../ui/poster';
import '../ui/seek-button';
import '../ui/time';
import '../ui/time-slider';
@@ -46,6 +48,10 @@ function getTemplateHTML() {
<media-container class="${root(true)}">
<slot name="media"></slot>
<media-poster class="${poster(true)}">
<slot name="poster"></slot>
</media-poster>
<media-buffering-indicator class="${bufferingIndicator.root}">
<div class="${bufferingIndicator.container}">
${renderIcon('spinner')}
packages/html/src/define/video/skin.ts
+5
View File
@@ -14,6 +14,7 @@ import '../ui/pip-button';
import '../ui/play-button';
import '../ui/playback-rate-button';
import '../ui/popover';
import '../ui/poster';
import '../ui/seek-button';
import '../ui/time';
import '../ui/time-slider';
@@ -28,6 +29,10 @@ function getTemplateHTML() {
<media-container class="media-default-skin media-default-skin--video">
<slot name="media"></slot>
<media-poster>
<slot name="poster"></slot>
</media-poster>
<media-buffering-indicator class="media-buffering-indicator">
<div class="media-surface">
${renderIcon('spinner', { class: 'media-icon' })}