@videojs/html 10.0.0-beta.1 → 10.0.0-beta.10

package/dist/dev/define/video/skin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"skin.d.ts","names":[],"sources":["../../../../src/define/video/skin.ts"],"mappings":";;;iBAwBS,eAAA,CAAA;AAAA,cAAe,qBAAA;;;;cAuHX,gBAAA,SAAyB,qBAAA;EAAA,gBACpB,OAAA;EAAA,OACT,MAAA,EAAM,aAAA;EAAA,OACN,eAAA,SAAe,eAAA;AAAA;AAAA,QAKhB,MAAA;EAAA,UACI,qBAAA;IAAA,CACP,gBAAA,CAAiB,OAAA,GAAU,gBAAA;EAAA;AAAA"}
+{"version":3,"file":"skin.d.ts","names":[],"sources":["../../../../src/define/video/skin.ts"],"mappings":";;;iBA0BS,eAAA,CAAA;AAAA,cAAe,qBAAA;;;;cA0HX,gBAAA,SAAyB,qBAAA;EAAA,gBACpB,OAAA;EAAA,OACT,MAAA,EAAM,aAAA;EAAA,OACN,eAAA,SAAe,eAAA;AAAA;AAAA,QAKhB,MAAA;EAAA,UACI,qBAAA;IAAA,CACP,gBAAA,CAAiB,OAAA,GAAU,gBAAA;EAAA;AAAA"}

package/dist/dev/define/video/skin.js

@@ -9,10 +9,12 @@ import "../ui/pip-button.js";
 import "../ui/play-button.js";
 import "../ui/playback-rate-button.js";
 import "../ui/popover.js";
+import "../ui/poster.js";
 import "../ui/seek-button.js";
 import "../ui/time.js";
 import "../ui/time-slider.js";
 import "../ui/tooltip.js";
+import "../ui/tooltip-group.js";
 import "../ui/volume-slider.js";
 import { renderIcon } from "../../icons/dist/render/default/index.js";
 import skin_default from "../../_virtual/inline-css_src/define/video/skin.js";
@@ -23,7 +25,13 @@ const SEEK_TIME = 10;
 function getTemplateHTML() {
 	return `
     <media-container class="media-default-skin media-default-skin--video">
+      <!-- @deprecated slot="media" is no longer required, use the default slot instead -->
       <slot name="media"></slot>
+      <slot></slot>
+
+      <media-poster>
+        <slot name="poster"></slot>
+      </media-poster>
 
       <media-buffering-indicator class="media-buffering-indicator">
         <div class="media-surface">
@@ -31,107 +39,104 @@ function getTemplateHTML() {
         </div>
       </media-buffering-indicator>
 
-      <!--<div class="media-error" role="alertdialog" aria-labelledby="media-error-title" aria-describedby="media-error-description">
-        <div class="media-error__dialog media-surface">
-          <div class="media-error__content">
-            <p id="media-error-title" class="media-error__title">Something went wrong.</p>
-            <p id="media-error-description" class="media-error__description">An error occurred while trying to play the video. Please try again.</p>
-          </div>
-          <div class="media-error__actions">
-            <button type="button" class="media-button">OK</button>
-          </div>
-        </div>
-      </div>-->
-
       <media-controls class="media-surface media-controls">
-        <media-play-button commandfor="play-tooltip" class="media-button media-button--icon media-button--play">
-          ${renderIcon("restart", { class: "media-icon media-icon--restart" })}
-          ${renderIcon("play", { class: "media-icon media-icon--play" })}
-          ${renderIcon("pause", { class: "media-icon media-icon--pause" })}
-        </media-play-button>
-        <media-tooltip id="play-tooltip" side="top" class="media-surface media-tooltip">
-          <span class="media-tooltip-label media-tooltip-label--replay">Replay</span>
-          <span class="media-tooltip-label media-tooltip-label--play">Play</span>
-          <span class="media-tooltip-label media-tooltip-label--pause">Pause</span>
-        </media-tooltip>
-
-        <media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="media-button media-button--icon media-button--seek">
-          <span class="media-icon__container">
-            ${renderIcon("seek", { class: "media-icon media-icon--flipped" })}
-            <span class="media-icon__label">${SEEK_TIME}</span>
-          </span>
-        </media-seek-button>
-        <media-tooltip id="seek-backward-tooltip" side="top" class="media-surface media-tooltip">
-          Seek backward ${SEEK_TIME} seconds
-        </media-tooltip>
-
-        <media-seek-button commandfor="seek-forward-tooltip" seconds="${SEEK_TIME}" class="media-button media-button--icon media-button--seek">
-          <span class="media-icon__container">
-            ${renderIcon("seek", { class: "media-icon" })}
-            <span class="media-icon__label">${SEEK_TIME}</span>
-          </span>
-        </media-seek-button>
-        <media-tooltip id="seek-forward-tooltip" side="top" class="media-surface media-tooltip">
-          Seek forward ${SEEK_TIME} seconds
-        </media-tooltip>
-
-        <media-time-group class="media-time">
-          <media-time type="current" class="media-time__value"></media-time>
-          <media-time-slider class="media-slider">
-            <media-slider-track class="media-slider__track">
-              <media-slider-fill class="media-slider__fill"></media-slider-fill>
-              <media-slider-buffer class="media-slider__buffer"></media-slider-buffer>
-            </media-slider-track>
-            <media-slider-thumb class="media-slider__thumb"></media-slider-thumb>
-          </media-time-slider>
-          <media-time type="duration" class="media-time__value"></media-time>
-        </media-time-group>
-
-        <media-playback-rate-button commandfor="playback-rate-tooltip"  class="media-button media-button--icon media-button--playback-rate"></media-playback-rate-button>
-        <media-tooltip id="playback-rate-tooltip" side="top" class="media-surface media-tooltip">
-          Toggle playback rate
-        </media-tooltip>
-
-        <media-mute-button commandfor="video-volume-popover" class="media-button media-button--icon media-button--mute">
-          ${renderIcon("volume-off", { class: "media-icon media-icon--volume-off" })}
-          ${renderIcon("volume-low", { class: "media-icon media-icon--volume-low" })}
-          ${renderIcon("volume-high", { class: "media-icon media-icon--volume-high" })}
-        </media-mute-button>
-
-        <media-popover id="video-volume-popover" open-on-hover delay="200" close-delay="100" side="top" class="media-surface media-popover media-popover--volume">
-          <media-volume-slider class="media-slider" orientation="vertical" thumb-alignment="edge">
-            <media-slider-track class="media-slider__track">
-              <media-slider-fill class="media-slider__fill"></media-slider-fill>
-            </media-slider-track>
-            <media-slider-thumb class="media-slider__thumb media-slider__thumb--persistent"></media-slider-thumb>
-          </media-volume-slider>
-        </media-popover>
-
-        <media-captions-button commandfor="captions-tooltip" class="media-button media-button--icon media-button--captions">
-          ${renderIcon("captions-off", { class: "media-icon media-icon--captions-off" })}
-          ${renderIcon("captions-on", { class: "media-icon media-icon--captions-on" })}
-        </media-captions-button>
-        <media-tooltip id="captions-tooltip" side="top" class="media-surface media-tooltip">
-          <span class="media-tooltip-label media-tooltip-label--enable-captions">Enable captions</span>
-          <span class="media-tooltip-label media-tooltip-label--disable-captions">Disable captions</span>
-        </media-tooltip>
-
-        <media-pip-button commandfor="pip-tooltip" class="media-button media-button--icon">
-          ${renderIcon("pip", { class: "media-icon" })}
-        </media-pip-button>
-        <media-tooltip id="pip-tooltip" side="top" class="media-surface media-tooltip">
-          <span class="media-tooltip-label media-tooltip-label--enter-pip">Enter picture-in-picture</span>
-          <span class="media-tooltip-label media-tooltip-label--exit-pip">Exit picture-in-picture</span>
-        </media-tooltip>
-
-        <media-fullscreen-button commandfor="fullscreen-tooltip" class="media-button media-button--icon media-button--fullscreen">
-          ${renderIcon("fullscreen-enter", { class: "media-icon media-icon--fullscreen-enter" })}
-          ${renderIcon("fullscreen-exit", { class: "media-icon media-icon--fullscreen-exit" })}
-        </media-fullscreen-button>
-        <media-tooltip id="fullscreen-tooltip" side="top" class="media-surface media-tooltip">
-          <span class="media-tooltip-label media-tooltip-label--enter-fullscreen">Enter fullscreen</span>
-          <span class="media-tooltip-label media-tooltip-label--exit-fullscreen">Exit fullscreen</span>
-        </media-tooltip>
+        <media-tooltip-group>
+          <media-play-button commandfor="play-tooltip" class="media-button media-button--subtle media-button--icon media-button--play">
+            ${renderIcon("restart", { class: "media-icon media-icon--restart" })}
+            ${renderIcon("play", { class: "media-icon media-icon--play" })}
+            ${renderIcon("pause", { class: "media-icon media-icon--pause" })}
+          </media-play-button>
+          <media-tooltip id="play-tooltip" side="top" class="media-surface media-tooltip">
+            <span class="media-tooltip-label media-tooltip-label--replay">Replay</span>
+            <span class="media-tooltip-label media-tooltip-label--play">Play</span>
+            <span class="media-tooltip-label media-tooltip-label--pause">Pause</span>
+          </media-tooltip>
+
+          <media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="media-button media-button--subtle media-button--icon media-button--seek">
+            <span class="media-icon__container">
+              ${renderIcon("seek", { class: "media-icon media-icon--flipped" })}
+              <span class="media-icon__label">${SEEK_TIME}</span>
+            </span>
+          </media-seek-button>
+          <media-tooltip id="seek-backward-tooltip" side="top" class="media-surface media-tooltip">
+            Seek backward ${SEEK_TIME} seconds
+          </media-tooltip>
+
+          <media-seek-button commandfor="seek-forward-tooltip" seconds="${SEEK_TIME}" class="media-button media-button--subtle media-button--icon media-button--seek">
+            <span class="media-icon__container">
+              ${renderIcon("seek", { class: "media-icon" })}
+              <span class="media-icon__label">${SEEK_TIME}</span>
+            </span>
+          </media-seek-button>
+          <media-tooltip id="seek-forward-tooltip" side="top" class="media-surface media-tooltip">
+            Seek forward ${SEEK_TIME} seconds
+          </media-tooltip>
+
+          <media-time-group class="media-time">
+            <media-time type="current" class="media-time__value"></media-time>
+            <media-time-slider class="media-slider">
+              <media-slider-track class="media-slider__track">
+                <media-slider-fill class="media-slider__fill"></media-slider-fill>
+                <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>
+
+          <media-playback-rate-button commandfor="playback-rate-tooltip"  class="media-button media-button--subtle media-button--icon media-button--playback-rate"></media-playback-rate-button>
+          <media-tooltip id="playback-rate-tooltip" side="top" class="media-surface media-tooltip">
+            Toggle playback rate
+          </media-tooltip>
+
+          <media-mute-button commandfor="video-volume-popover" class="media-button media-button--subtle media-button--icon media-button--mute">
+            ${renderIcon("volume-off", { class: "media-icon media-icon--volume-off" })}
+            ${renderIcon("volume-low", { class: "media-icon media-icon--volume-low" })}
+            ${renderIcon("volume-high", { class: "media-icon media-icon--volume-high" })}
+          </media-mute-button>
+
+          <media-popover id="video-volume-popover" open-on-hover delay="200" close-delay="100" side="top" class="media-surface media-popover media-popover--volume">
+            <media-volume-slider class="media-slider" orientation="vertical" thumb-alignment="edge">
+              <media-slider-track class="media-slider__track">
+                <media-slider-fill class="media-slider__fill"></media-slider-fill>
+              </media-slider-track>
+              <media-slider-thumb class="media-slider__thumb media-slider__thumb--persistent"></media-slider-thumb>
+            </media-volume-slider>
+          </media-popover>
+
+          <media-captions-button commandfor="captions-tooltip" class="media-button media-button--subtle media-button--icon media-button--captions">
+            ${renderIcon("captions-off", { class: "media-icon media-icon--captions-off" })}
+            ${renderIcon("captions-on", { class: "media-icon media-icon--captions-on" })}
+          </media-captions-button>
+          <media-tooltip id="captions-tooltip" side="top" class="media-surface media-tooltip">
+            <span class="media-tooltip-label media-tooltip-label--enable-captions">Enable captions</span>
+            <span class="media-tooltip-label media-tooltip-label--disable-captions">Disable captions</span>
+          </media-tooltip>
+
+          <media-pip-button commandfor="pip-tooltip" class="media-button media-button--subtle media-button--icon media-button--pip">
+            ${renderIcon("pip-enter", { class: "media-icon media-icon--pip-enter" })}
+            ${renderIcon("pip-exit", { class: "media-icon media-icon--pip-exit" })}
+          </media-pip-button>
+          <media-tooltip id="pip-tooltip" side="top" class="media-surface media-tooltip">
+            <span class="media-tooltip-label media-tooltip-label--enter-pip">Enter picture-in-picture</span>
+            <span class="media-tooltip-label media-tooltip-label--exit-pip">Exit picture-in-picture</span>
+          </media-tooltip>
+
+          <media-fullscreen-button commandfor="fullscreen-tooltip" class="media-button media-button--subtle media-button--icon media-button--fullscreen">
+            ${renderIcon("fullscreen-enter", { class: "media-icon media-icon--fullscreen-enter" })}
+            ${renderIcon("fullscreen-exit", { class: "media-icon media-icon--fullscreen-exit" })}
+          </media-fullscreen-button>
+          <media-tooltip id="fullscreen-tooltip" side="top" class="media-surface media-tooltip">
+            <span class="media-tooltip-label media-tooltip-label--enter-fullscreen">Enter fullscreen</span>
+            <span class="media-tooltip-label media-tooltip-label--exit-fullscreen">Exit fullscreen</span>
+          </media-tooltip>
+        </media-tooltip-group>
       </media-controls>
 
       <div class="media-overlay"></div>

package/dist/dev/define/video/skin.js.map

@@ -1 +1 @@
-{"version":3,"file":"skin.js","names":["styles"],"sources":["../../../../src/define/video/skin.ts"],"sourcesContent":["import { ReactiveElement } from '@videojs/element';\nimport { renderIcon } from '@videojs/icons/render';\nimport { createStyles, SkinMixin } from '../skin-mixin';\nimport styles from './skin.css?inline';\n\n// Side-effect imports: register all custom elements used in the template.\nimport '../media/container';\nimport '../ui/buffering-indicator';\nimport '../ui/captions-button';\nimport '../ui/controls';\nimport '../ui/fullscreen-button';\nimport '../ui/mute-button';\nimport '../ui/pip-button';\nimport '../ui/play-button';\nimport '../ui/playback-rate-button';\nimport '../ui/popover';\nimport '../ui/seek-button';\nimport '../ui/time';\nimport '../ui/time-slider';\nimport '../ui/tooltip';\nimport '../ui/volume-slider';\n\nconst SEEK_TIME = 10;\n\nfunction getTemplateHTML() {\n  return /*html*/ `\n    <media-container class=\"media-default-skin media-default-skin--video\">\n      <slot name=\"media\"></slot>\n\n      <media-buffering-indicator class=\"media-buffering-indicator\">\n        <div class=\"media-surface\">\n          ${renderIcon('spinner', { class: 'media-icon' })}\n        </div>\n      </media-buffering-indicator>\n\n      <!--<div class=\"media-error\" role=\"alertdialog\" aria-labelledby=\"media-error-title\" aria-describedby=\"media-error-description\">\n        <div class=\"media-error__dialog media-surface\">\n          <div class=\"media-error__content\">\n            <p id=\"media-error-title\" class=\"media-error__title\">Something went wrong.</p>\n            <p id=\"media-error-description\" class=\"media-error__description\">An error occurred while trying to play the video. Please try again.</p>\n          </div>\n          <div class=\"media-error__actions\">\n            <button type=\"button\" class=\"media-button\">OK</button>\n          </div>\n        </div>\n      </div>-->\n\n      <media-controls class=\"media-surface media-controls\">\n        <media-play-button commandfor=\"play-tooltip\" class=\"media-button media-button--icon media-button--play\">\n          ${renderIcon('restart', { class: 'media-icon media-icon--restart' })}\n          ${renderIcon('play', { class: 'media-icon media-icon--play' })}\n          ${renderIcon('pause', { class: 'media-icon media-icon--pause' })}\n        </media-play-button>\n        <media-tooltip id=\"play-tooltip\" side=\"top\" class=\"media-surface media-tooltip\">\n          <span class=\"media-tooltip-label media-tooltip-label--replay\">Replay</span>\n          <span class=\"media-tooltip-label media-tooltip-label--play\">Play</span>\n          <span class=\"media-tooltip-label media-tooltip-label--pause\">Pause</span>\n        </media-tooltip>\n\n        <media-seek-button commandfor=\"seek-backward-tooltip\" seconds=\"${-SEEK_TIME}\" class=\"media-button media-button--icon media-button--seek\">\n          <span class=\"media-icon__container\">\n            ${renderIcon('seek', { class: 'media-icon media-icon--flipped' })}\n            <span class=\"media-icon__label\">${SEEK_TIME}</span>\n          </span>\n        </media-seek-button>\n        <media-tooltip id=\"seek-backward-tooltip\" side=\"top\" class=\"media-surface media-tooltip\">\n          Seek backward ${SEEK_TIME} seconds\n        </media-tooltip>\n\n        <media-seek-button commandfor=\"seek-forward-tooltip\" seconds=\"${SEEK_TIME}\" class=\"media-button media-button--icon media-button--seek\">\n          <span class=\"media-icon__container\">\n            ${renderIcon('seek', { class: 'media-icon' })}\n            <span class=\"media-icon__label\">${SEEK_TIME}</span>\n          </span>\n        </media-seek-button>\n        <media-tooltip id=\"seek-forward-tooltip\" side=\"top\" class=\"media-surface media-tooltip\">\n          Seek forward ${SEEK_TIME} seconds\n        </media-tooltip>\n\n        <media-time-group class=\"media-time\">\n          <media-time type=\"current\" class=\"media-time__value\"></media-time>\n          <media-time-slider class=\"media-slider\">\n            <media-slider-track class=\"media-slider__track\">\n              <media-slider-fill class=\"media-slider__fill\"></media-slider-fill>\n              <media-slider-buffer class=\"media-slider__buffer\"></media-slider-buffer>\n            </media-slider-track>\n            <media-slider-thumb class=\"media-slider__thumb\"></media-slider-thumb>\n          </media-time-slider>\n          <media-time type=\"duration\" class=\"media-time__value\"></media-time>\n        </media-time-group>\n\n        <media-playback-rate-button commandfor=\"playback-rate-tooltip\"  class=\"media-button media-button--icon media-button--playback-rate\"></media-playback-rate-button>\n        <media-tooltip id=\"playback-rate-tooltip\" side=\"top\" class=\"media-surface media-tooltip\">\n          Toggle playback rate\n        </media-tooltip>\n\n        <media-mute-button commandfor=\"video-volume-popover\" class=\"media-button media-button--icon media-button--mute\">\n          ${renderIcon('volume-off', { class: 'media-icon media-icon--volume-off' })}\n          ${renderIcon('volume-low', { class: 'media-icon media-icon--volume-low' })}\n          ${renderIcon('volume-high', { class: 'media-icon media-icon--volume-high' })}\n        </media-mute-button>\n\n        <media-popover id=\"video-volume-popover\" open-on-hover delay=\"200\" close-delay=\"100\" side=\"top\" class=\"media-surface media-popover media-popover--volume\">\n          <media-volume-slider class=\"media-slider\" orientation=\"vertical\" thumb-alignment=\"edge\">\n            <media-slider-track class=\"media-slider__track\">\n              <media-slider-fill class=\"media-slider__fill\"></media-slider-fill>\n            </media-slider-track>\n            <media-slider-thumb class=\"media-slider__thumb media-slider__thumb--persistent\"></media-slider-thumb>\n          </media-volume-slider>\n        </media-popover>\n\n        <media-captions-button commandfor=\"captions-tooltip\" class=\"media-button media-button--icon media-button--captions\">\n          ${renderIcon('captions-off', { class: 'media-icon media-icon--captions-off' })}\n          ${renderIcon('captions-on', { class: 'media-icon media-icon--captions-on' })}\n        </media-captions-button>\n        <media-tooltip id=\"captions-tooltip\" side=\"top\" class=\"media-surface media-tooltip\">\n          <span class=\"media-tooltip-label media-tooltip-label--enable-captions\">Enable captions</span>\n          <span class=\"media-tooltip-label media-tooltip-label--disable-captions\">Disable captions</span>\n        </media-tooltip>\n\n        <media-pip-button commandfor=\"pip-tooltip\" class=\"media-button media-button--icon\">\n          ${renderIcon('pip', { class: 'media-icon' })}\n        </media-pip-button>\n        <media-tooltip id=\"pip-tooltip\" side=\"top\" class=\"media-surface media-tooltip\">\n          <span class=\"media-tooltip-label media-tooltip-label--enter-pip\">Enter picture-in-picture</span>\n          <span class=\"media-tooltip-label media-tooltip-label--exit-pip\">Exit picture-in-picture</span>\n        </media-tooltip>\n\n        <media-fullscreen-button commandfor=\"fullscreen-tooltip\" class=\"media-button media-button--icon media-button--fullscreen\">\n          ${renderIcon('fullscreen-enter', { class: 'media-icon media-icon--fullscreen-enter' })}\n          ${renderIcon('fullscreen-exit', { class: 'media-icon media-icon--fullscreen-exit' })}\n        </media-fullscreen-button>\n        <media-tooltip id=\"fullscreen-tooltip\" side=\"top\" class=\"media-surface media-tooltip\">\n          <span class=\"media-tooltip-label media-tooltip-label--enter-fullscreen\">Enter fullscreen</span>\n          <span class=\"media-tooltip-label media-tooltip-label--exit-fullscreen\">Exit fullscreen</span>\n        </media-tooltip>\n      </media-controls>\n\n      <div class=\"media-overlay\"></div>\n    </media-container>\n  `;\n}\n\nexport class VideoSkinElement extends SkinMixin(ReactiveElement) {\n  static readonly tagName = 'video-skin';\n  static styles = createStyles(styles);\n  static getTemplateHTML = getTemplateHTML;\n}\n\ncustomElements.define(VideoSkinElement.tagName, VideoSkinElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [VideoSkinElement.tagName]: VideoSkinElement;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAsBA,MAAM,YAAY;AAElB,SAAS,kBAAkB;AACzB,QAAgB;;;;;;YAMN,WAAW,WAAW,EAAE,OAAO,cAAc,CAAC,CAAC;;;;;;;;;;;;;;;;;;YAkB/C,WAAW,WAAW,EAAE,OAAO,kCAAkC,CAAC,CAAC;YACnE,WAAW,QAAQ,EAAE,OAAO,+BAA+B,CAAC,CAAC;YAC7D,WAAW,SAAS,EAAE,OAAO,gCAAgC,CAAC,CAAC;;;;;;;;yEAQF,CAAC,UAAU;;cAEtE,WAAW,QAAQ,EAAE,OAAO,kCAAkC,CAAC,CAAC;8CAChC,UAAU;;;;0BAI9B,UAAU;;;wEAGoC,UAAU;;cAEpE,WAAW,QAAQ,EAAE,OAAO,cAAc,CAAC,CAAC;8CACZ,UAAU;;;;yBAI/B,UAAU;;;;;;;;;;;;;;;;;;;;;YAqBvB,WAAW,cAAc,EAAE,OAAO,qCAAqC,CAAC,CAAC;YACzE,WAAW,cAAc,EAAE,OAAO,qCAAqC,CAAC,CAAC;YACzE,WAAW,eAAe,EAAE,OAAO,sCAAsC,CAAC,CAAC;;;;;;;;;;;;;YAa3E,WAAW,gBAAgB,EAAE,OAAO,uCAAuC,CAAC,CAAC;YAC7E,WAAW,eAAe,EAAE,OAAO,sCAAsC,CAAC,CAAC;;;;;;;;YAQ3E,WAAW,OAAO,EAAE,OAAO,cAAc,CAAC,CAAC;;;;;;;;YAQ3C,WAAW,oBAAoB,EAAE,OAAO,2CAA2C,CAAC,CAAC;YACrF,WAAW,mBAAmB,EAAE,OAAO,0CAA0C,CAAC,CAAC;;;;;;;;;;;;AAa/F,IAAa,mBAAb,cAAsC,UAAU,gBAAgB,CAAC;;iBACrC;;;gBACV,aAAaA,aAAO;;;yBACX;;;AAG3B,eAAe,OAAO,iBAAiB,SAAS,iBAAiB"}
+{"version":3,"file":"skin.js","names":["styles"],"sources":["../../../../src/define/video/skin.ts"],"sourcesContent":["import { ReactiveElement } from '@videojs/element';\nimport { renderIcon } from '@videojs/icons/render';\nimport { createStyles, SkinMixin } from '../skin-mixin';\nimport styles from './skin.css?inline';\n\n// Side-effect imports: register all custom elements used in the template.\nimport '../media/container';\nimport '../ui/buffering-indicator';\nimport '../ui/captions-button';\nimport '../ui/controls';\nimport '../ui/fullscreen-button';\nimport '../ui/mute-button';\nimport '../ui/pip-button';\nimport '../ui/play-button';\nimport '../ui/playback-rate-button';\nimport '../ui/popover';\nimport '../ui/poster';\nimport '../ui/seek-button';\nimport '../ui/time';\nimport '../ui/time-slider';\nimport '../ui/tooltip';\nimport '../ui/tooltip-group';\nimport '../ui/volume-slider';\n\nconst SEEK_TIME = 10;\n\nfunction getTemplateHTML() {\n  return /*html*/ `\n    <media-container class=\"media-default-skin media-default-skin--video\">\n      <!-- @deprecated slot=\"media\" is no longer required, use the default slot instead -->\n      <slot name=\"media\"></slot>\n      <slot></slot>\n\n      <media-poster>\n        <slot name=\"poster\"></slot>\n      </media-poster>\n\n      <media-buffering-indicator class=\"media-buffering-indicator\">\n        <div class=\"media-surface\">\n          ${renderIcon('spinner', { class: 'media-icon' })}\n        </div>\n      </media-buffering-indicator>\n\n      <media-controls class=\"media-surface media-controls\">\n        <media-tooltip-group>\n          <media-play-button commandfor=\"play-tooltip\" class=\"media-button media-button--subtle media-button--icon media-button--play\">\n            ${renderIcon('restart', { class: 'media-icon media-icon--restart' })}\n            ${renderIcon('play', { class: 'media-icon media-icon--play' })}\n            ${renderIcon('pause', { class: 'media-icon media-icon--pause' })}\n          </media-play-button>\n          <media-tooltip id=\"play-tooltip\" side=\"top\" class=\"media-surface media-tooltip\">\n            <span class=\"media-tooltip-label media-tooltip-label--replay\">Replay</span>\n            <span class=\"media-tooltip-label media-tooltip-label--play\">Play</span>\n            <span class=\"media-tooltip-label media-tooltip-label--pause\">Pause</span>\n          </media-tooltip>\n\n          <media-seek-button commandfor=\"seek-backward-tooltip\" seconds=\"${-SEEK_TIME}\" class=\"media-button media-button--subtle media-button--icon media-button--seek\">\n            <span class=\"media-icon__container\">\n              ${renderIcon('seek', { class: 'media-icon media-icon--flipped' })}\n              <span class=\"media-icon__label\">${SEEK_TIME}</span>\n            </span>\n          </media-seek-button>\n          <media-tooltip id=\"seek-backward-tooltip\" side=\"top\" class=\"media-surface media-tooltip\">\n            Seek backward ${SEEK_TIME} seconds\n          </media-tooltip>\n\n          <media-seek-button commandfor=\"seek-forward-tooltip\" seconds=\"${SEEK_TIME}\" class=\"media-button media-button--subtle media-button--icon media-button--seek\">\n            <span class=\"media-icon__container\">\n              ${renderIcon('seek', { class: 'media-icon' })}\n              <span class=\"media-icon__label\">${SEEK_TIME}</span>\n            </span>\n          </media-seek-button>\n          <media-tooltip id=\"seek-forward-tooltip\" side=\"top\" class=\"media-surface media-tooltip\">\n            Seek forward ${SEEK_TIME} seconds\n          </media-tooltip>\n\n          <media-time-group class=\"media-time\">\n            <media-time type=\"current\" class=\"media-time__value\"></media-time>\n            <media-time-slider class=\"media-slider\">\n              <media-slider-track class=\"media-slider__track\">\n                <media-slider-fill class=\"media-slider__fill\"></media-slider-fill>\n                <media-slider-buffer class=\"media-slider__buffer\"></media-slider-buffer>\n              </media-slider-track>\n              <media-slider-thumb class=\"media-slider__thumb\"></media-slider-thumb>\n\n              <div class=\"media-surface media-preview media-slider__preview\">\n                <media-slider-thumbnail class=\"media-preview__thumbnail\"></media-slider-thumbnail>\n                <media-slider-value type=\"pointer\" class=\"media-preview__timestamp\"></media-slider-value>\n                ${renderIcon('spinner', { class: 'media-preview__spinner media-icon' })}\n              </div>\n            </media-time-slider>\n            <media-time type=\"duration\" class=\"media-time__value\"></media-time>\n          </media-time-group>\n\n          <media-playback-rate-button commandfor=\"playback-rate-tooltip\"  class=\"media-button media-button--subtle media-button--icon media-button--playback-rate\"></media-playback-rate-button>\n          <media-tooltip id=\"playback-rate-tooltip\" side=\"top\" class=\"media-surface media-tooltip\">\n            Toggle playback rate\n          </media-tooltip>\n\n          <media-mute-button commandfor=\"video-volume-popover\" class=\"media-button media-button--subtle media-button--icon media-button--mute\">\n            ${renderIcon('volume-off', { class: 'media-icon media-icon--volume-off' })}\n            ${renderIcon('volume-low', { class: 'media-icon media-icon--volume-low' })}\n            ${renderIcon('volume-high', { class: 'media-icon media-icon--volume-high' })}\n          </media-mute-button>\n\n          <media-popover id=\"video-volume-popover\" open-on-hover delay=\"200\" close-delay=\"100\" side=\"top\" class=\"media-surface media-popover media-popover--volume\">\n            <media-volume-slider class=\"media-slider\" orientation=\"vertical\" thumb-alignment=\"edge\">\n              <media-slider-track class=\"media-slider__track\">\n                <media-slider-fill class=\"media-slider__fill\"></media-slider-fill>\n              </media-slider-track>\n              <media-slider-thumb class=\"media-slider__thumb media-slider__thumb--persistent\"></media-slider-thumb>\n            </media-volume-slider>\n          </media-popover>\n\n          <media-captions-button commandfor=\"captions-tooltip\" class=\"media-button media-button--subtle media-button--icon media-button--captions\">\n            ${renderIcon('captions-off', { class: 'media-icon media-icon--captions-off' })}\n            ${renderIcon('captions-on', { class: 'media-icon media-icon--captions-on' })}\n          </media-captions-button>\n          <media-tooltip id=\"captions-tooltip\" side=\"top\" class=\"media-surface media-tooltip\">\n            <span class=\"media-tooltip-label media-tooltip-label--enable-captions\">Enable captions</span>\n            <span class=\"media-tooltip-label media-tooltip-label--disable-captions\">Disable captions</span>\n          </media-tooltip>\n\n          <media-pip-button commandfor=\"pip-tooltip\" class=\"media-button media-button--subtle media-button--icon media-button--pip\">\n            ${renderIcon('pip-enter', { class: 'media-icon media-icon--pip-enter' })}\n            ${renderIcon('pip-exit', { class: 'media-icon media-icon--pip-exit' })}\n          </media-pip-button>\n          <media-tooltip id=\"pip-tooltip\" side=\"top\" class=\"media-surface media-tooltip\">\n            <span class=\"media-tooltip-label media-tooltip-label--enter-pip\">Enter picture-in-picture</span>\n            <span class=\"media-tooltip-label media-tooltip-label--exit-pip\">Exit picture-in-picture</span>\n          </media-tooltip>\n\n          <media-fullscreen-button commandfor=\"fullscreen-tooltip\" class=\"media-button media-button--subtle media-button--icon media-button--fullscreen\">\n            ${renderIcon('fullscreen-enter', { class: 'media-icon media-icon--fullscreen-enter' })}\n            ${renderIcon('fullscreen-exit', { class: 'media-icon media-icon--fullscreen-exit' })}\n          </media-fullscreen-button>\n          <media-tooltip id=\"fullscreen-tooltip\" side=\"top\" class=\"media-surface media-tooltip\">\n            <span class=\"media-tooltip-label media-tooltip-label--enter-fullscreen\">Enter fullscreen</span>\n            <span class=\"media-tooltip-label media-tooltip-label--exit-fullscreen\">Exit fullscreen</span>\n          </media-tooltip>\n        </media-tooltip-group>\n      </media-controls>\n\n      <div class=\"media-overlay\"></div>\n    </media-container>\n  `;\n}\n\nexport class VideoSkinElement extends SkinMixin(ReactiveElement) {\n  static readonly tagName = 'video-skin';\n  static styles = createStyles(styles);\n  static getTemplateHTML = getTemplateHTML;\n}\n\ncustomElements.define(VideoSkinElement.tagName, VideoSkinElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [VideoSkinElement.tagName]: VideoSkinElement;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAwBA,MAAM,YAAY;AAElB,SAAS,kBAAkB;AACzB,QAAgB;;;;;;;;;;;;YAYN,WAAW,WAAW,EAAE,OAAO,cAAc,CAAC,CAAC;;;;;;;cAO7C,WAAW,WAAW,EAAE,OAAO,kCAAkC,CAAC,CAAC;cACnE,WAAW,QAAQ,EAAE,OAAO,+BAA+B,CAAC,CAAC;cAC7D,WAAW,SAAS,EAAE,OAAO,gCAAgC,CAAC,CAAC;;;;;;;;2EAQF,CAAC,UAAU;;gBAEtE,WAAW,QAAQ,EAAE,OAAO,kCAAkC,CAAC,CAAC;gDAChC,UAAU;;;;4BAI9B,UAAU;;;0EAGoC,UAAU;;gBAEpE,WAAW,QAAQ,EAAE,OAAO,cAAc,CAAC,CAAC;gDACZ,UAAU;;;;2BAI/B,UAAU;;;;;;;;;;;;;;;kBAenB,WAAW,WAAW,EAAE,OAAO,qCAAqC,CAAC,CAAC;;;;;;;;;;;;cAY1E,WAAW,cAAc,EAAE,OAAO,qCAAqC,CAAC,CAAC;cACzE,WAAW,cAAc,EAAE,OAAO,qCAAqC,CAAC,CAAC;cACzE,WAAW,eAAe,EAAE,OAAO,sCAAsC,CAAC,CAAC;;;;;;;;;;;;;cAa3E,WAAW,gBAAgB,EAAE,OAAO,uCAAuC,CAAC,CAAC;cAC7E,WAAW,eAAe,EAAE,OAAO,sCAAsC,CAAC,CAAC;;;;;;;;cAQ3E,WAAW,aAAa,EAAE,OAAO,oCAAoC,CAAC,CAAC;cACvE,WAAW,YAAY,EAAE,OAAO,mCAAmC,CAAC,CAAC;;;;;;;;cAQrE,WAAW,oBAAoB,EAAE,OAAO,2CAA2C,CAAC,CAAC;cACrF,WAAW,mBAAmB,EAAE,OAAO,0CAA0C,CAAC,CAAC;;;;;;;;;;;;;AAcjG,IAAa,mBAAb,cAAsC,UAAU,gBAAgB,CAAC;;iBACrC;;;gBACV,aAAaA,aAAO;;;yBACX;;;AAG3B,eAAe,OAAO,iBAAiB,SAAS,iBAAiB"}

package/dist/dev/define/video/skin.tailwind.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"skin.tailwind.d.ts","names":[],"sources":["../../../../src/define/video/skin.tailwind.ts"],"mappings":";;;iBA0CS,eAAA,CAAA;AAAA,cAAe,6BAAA;;;;cA+HX,wBAAA,SAAiC,6BAAA;EAAA,gBAC5B,OAAA;EAAA,OACT,eAAA,SAAe,eAAA;AAAA;AAAA,QAKhB,MAAA;EAAA,UACI,qBAAA;IAAA,CACP,wBAAA,CAAyB,OAAA,GAAU,wBAAA;EAAA;AAAA"}
+{"version":3,"file":"skin.tailwind.d.ts","names":[],"sources":["../../../../src/define/video/skin.tailwind.ts"],"mappings":";;;iBA6CS,eAAA,CAAA;AAAA,cAAe,6BAAA;;;;cAkIX,wBAAA,SAAiC,6BAAA;EAAA,gBAC5B,OAAA;EAAA,OACT,eAAA,SAAe,eAAA;AAAA;AAAA,QAKhB,MAAA;EAAA,UACI,qBAAA;IAAA,CACP,wBAAA,CAAyB,OAAA,GAAU,wBAAA;EAAA;AAAA"}

package/dist/dev/define/video/skin.tailwind.js

@@ -1,4 +1,6 @@
 import { SkinMixin } from "../skin-mixin.js";
+import { iconState } from "../../skins/dist/default/shared/tailwind/icon-state.js";
+import { tooltipState } from "../../skins/dist/default/shared/tailwind/tooltip-state.js";
 import "../media/container.js";
 import "../ui/buffering-indicator.js";
 import "../ui/captions-button.js";
@@ -9,21 +11,22 @@ import "../ui/pip-button.js";
 import "../ui/play-button.js";
 import "../ui/playback-rate-button.js";
 import "../ui/popover.js";
+import "../ui/poster.js";
 import "../ui/seek-button.js";
 import "../ui/time.js";
 import "../ui/time-slider.js";
 import "../ui/tooltip.js";
+import "../ui/tooltip-group.js";
 import "../ui/volume-slider.js";
+import { renderIcon } from "../../icons/dist/render/default/index.js";
 import { button } from "../../skins/dist/default/default/tailwind/components/button.js";
 import { icon, iconContainer, iconFlipped } from "../../skins/dist/default/default/tailwind/components/icon.js";
 import { playbackRate } from "../../skins/dist/default/default/tailwind/components/playback-rate.js";
 import { seek } from "../../skins/dist/default/default/tailwind/components/seek.js";
 import { time } from "../../skins/dist/default/default/tailwind/components/time.js";
-import { iconState } from "../../skins/dist/default/default/tailwind/components/icon-state.js";
 import { overlay } from "../../skins/dist/default/default/tailwind/components/overlay.js";
-import { tooltipState } from "../../skins/dist/default/default/tailwind/components/tooltip-state.js";
-import { bufferingIndicator, controls, error, popup, root, slider } from "../../skins/dist/default/default/tailwind/video.tailwind.js";
-import { renderIcon } from "../../icons/dist/render/default/index.js";
+import { poster } from "../../skins/dist/default/default/tailwind/components/poster.js";
+import { bufferingIndicator, controls, popup, preview, root, slider } from "../../skins/dist/default/default/tailwind/video.tailwind.js";
 import { ReactiveElement } from "@videojs/element";
 import { cn } from "@videojs/utils/style";
 
@@ -32,7 +35,13 @@ const SEEK_TIME = 10;
 function getTemplateHTML() {
 	return `
     <media-container class="${root(true)}">
+      <!-- @deprecated slot="media" is no longer required, use the default slot instead -->
       <slot name="media"></slot>
+      <slot></slot>
+
+      <media-poster class="${poster(true)}">
+        <slot name="poster"></slot>
+      </media-poster>
 
       <media-buffering-indicator class="${bufferingIndicator.root}">
         <div class="${bufferingIndicator.container}">
@@ -40,115 +49,112 @@ function getTemplateHTML() {
         </div>
       </media-buffering-indicator>
 
-      <!--<div class="${error.root}" role="alertdialog" aria-labelledby="media-error-title" aria-describedby="media-error-description">
-        <div class="${error.dialog}">
-          <div class="${error.content}">
-            <p id="media-error-title" class="${error.title}">Something went wrong.</p>
-            <p id="media-error-description" class="${error.description}">An error occurred while trying to play the video. Please try again.</p>
-          </div>
-          <div class="${error.actions}">
-            <button type="button" class="${cn(button.base, button.default)}">OK</button>
-          </div>
-        </div>
-      </div>-->
-
       <media-controls data-controls="" class="${controls}">
-        <span class="${tooltipState.play.wrapper}">
-          <media-play-button commandfor="play-tooltip" class="${cn(button.base, button.icon, iconState.play.button)}">
-            ${renderIcon("restart", { class: cn(icon, iconState.play.restart) })}
-            ${renderIcon("play", { class: cn(icon, iconState.play.play) })}
-            ${renderIcon("pause", { class: cn(icon, iconState.play.pause) })}
-          </media-play-button>
-          <media-tooltip id="play-tooltip" side="top" class="${cn(popup.tooltip)}">
-            <span class="${tooltipState.play.replay}">Replay</span>
-            <span class="${tooltipState.play.play}">Play</span>
-            <span class="${tooltipState.play.pause}">Pause</span>
-          </media-tooltip>
-        </span>
-
-        <media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="${cn(button.base, button.icon, seek.button)}">
-          <span class="${iconContainer}">
-            ${renderIcon("seek", { class: cn(icon, iconFlipped) })}
-            <span class="${cn(seek.label, seek.labelBackward)}">${SEEK_TIME}</span>
-          </span>
-        </media-seek-button>
-        <media-tooltip id="seek-backward-tooltip" side="top" class="${cn(popup.tooltip)}">
-          Seek backward ${SEEK_TIME} seconds
-        </media-tooltip>
-
-        <media-seek-button commandfor="seek-forward-tooltip" seconds="${SEEK_TIME}" class="${cn(button.base, button.icon, seek.button)}">
-          <span class="${iconContainer}">
-            ${renderIcon("seek", { class: icon })}
-            <span class="${cn(seek.label, seek.labelForward)}">${SEEK_TIME}</span>
+        <media-tooltip-group>
+          <span class="${tooltipState.play.wrapper}">
+            <media-play-button commandfor="play-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.play.button)}">
+              ${renderIcon("restart", { class: cn(icon, iconState.play.restart) })}
+              ${renderIcon("play", { class: cn(icon, iconState.play.play) })}
+              ${renderIcon("pause", { class: cn(icon, iconState.play.pause) })}
+            </media-play-button>
+            <media-tooltip id="play-tooltip" side="top" class="${cn(popup.tooltip)}">
+              <span class="${tooltipState.play.replay}">Replay</span>
+              <span class="${tooltipState.play.play}">Play</span>
+              <span class="${tooltipState.play.pause}">Pause</span>
+            </media-tooltip>
           </span>
-        </media-seek-button>
-        <media-tooltip id="seek-forward-tooltip" side="top" class="${cn(popup.tooltip)}">
-          Seek forward ${SEEK_TIME} seconds
-        </media-tooltip>
-
-        <media-time-group class="${time.group}">
-          <media-time type="current" class="${time.current}"></media-time>
-          <media-time-slider class="${slider.root}">
-            <media-slider-track class="${slider.track}">
-              <media-slider-fill class="${cn(slider.fill.base, slider.fill.fill)}"></media-slider-fill>
-              <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-time-slider>
-          <media-time type="duration" class="${time.duration}"></media-time>
-        </media-time-group>
-
-        <media-playback-rate-button commandfor="playback-rate-tooltip"  class="${cn(button.base, button.icon, playbackRate.button)}"></media-playback-rate-button>
-        <media-tooltip id="playback-rate-tooltip" side="top" class="${cn(popup.tooltip)}">
-          Toggle playback rate
-        </media-tooltip>
-
-        <media-mute-button commandfor="video-volume-popover" class="${cn(button.base, button.icon, iconState.mute.button)}">
-          ${renderIcon("volume-off", { class: cn(icon, iconState.mute.volumeOff) })}
-          ${renderIcon("volume-low", { class: cn(icon, iconState.mute.volumeLow) })}
-          ${renderIcon("volume-high", { class: cn(icon, iconState.mute.volumeHigh) })}
-        </media-mute-button>
-
-        <media-popover id="video-volume-popover" open-on-hover delay="200" close-delay="100" side="top" class="${cn(popup.popover, popup.volume)}">
-          <media-volume-slider class="${slider.root}" orientation="vertical" thumb-alignment="edge">
-            <media-slider-track class="${slider.track}">
-              <media-slider-fill class="${cn(slider.fill.base, slider.fill.fill)}"></media-slider-fill>
-            </media-slider-track>
-            <media-slider-thumb class="${cn(slider.thumb.base, slider.thumb.persistent)}"></media-slider-thumb>
-          </media-volume-slider>
-        </media-popover>
-
-        <span class="${tooltipState.captions.wrapper}">
-          <media-captions-button commandfor="captions-tooltip" class="${cn(button.base, button.icon, iconState.captions.button)}">
-            ${renderIcon("captions-off", { class: cn(icon, iconState.captions.off) })}
-            ${renderIcon("captions-on", { class: cn(icon, iconState.captions.on) })}
-          </media-captions-button>
-          <media-tooltip id="captions-tooltip" side="top" class="${cn(popup.tooltip)}">
-            <span class="${tooltipState.captions.enable}">Enable captions</span>
-            <span class="${tooltipState.captions.disable}">Disable captions</span>
+
+          <media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="${cn(button.base, button.subtle, button.icon, seek.button)}">
+            <span class="${iconContainer}">
+              ${renderIcon("seek", { class: cn(icon, iconFlipped) })}
+              <span class="${cn(seek.label, seek.labelBackward)}">${SEEK_TIME}</span>
+            </span>
+          </media-seek-button>
+          <media-tooltip id="seek-backward-tooltip" side="top" class="${cn(popup.tooltip)}">
+            Seek backward ${SEEK_TIME} seconds
           </media-tooltip>
-        </span>
-
-        <span class="${tooltipState.pip.wrapper}">
-          <media-pip-button commandfor="pip-tooltip" class="${cn(button.base, button.icon)}">
-            ${renderIcon("pip", { class: icon })}
-          </media-pip-button>
-          <media-tooltip id="pip-tooltip" side="top" class="${cn(popup.tooltip)}">
-            <span class="${tooltipState.pip.enter}">Enter picture-in-picture</span>
-            <span class="${tooltipState.pip.exit}">Exit picture-in-picture</span>
+
+          <media-seek-button commandfor="seek-forward-tooltip" seconds="${SEEK_TIME}" class="${cn(button.base, button.subtle, button.icon, seek.button)}">
+            <span class="${iconContainer}">
+              ${renderIcon("seek", { class: icon })}
+              <span class="${cn(seek.label, seek.labelForward)}">${SEEK_TIME}</span>
+            </span>
+          </media-seek-button>
+          <media-tooltip id="seek-forward-tooltip" side="top" class="${cn(popup.tooltip)}">
+            Seek forward ${SEEK_TIME} seconds
           </media-tooltip>
-        </span>
-
-        <span class="${tooltipState.fullscreen.wrapper}">
-          <media-fullscreen-button commandfor="fullscreen-tooltip" class="${cn(button.base, button.icon, iconState.fullscreen.button)}">
-            ${renderIcon("fullscreen-enter", { class: cn(icon, iconState.fullscreen.enter) })}
-            ${renderIcon("fullscreen-exit", { class: cn(icon, iconState.fullscreen.exit) })}
-          </media-fullscreen-button>
-          <media-tooltip id="fullscreen-tooltip" side="top" class="${cn(popup.tooltip)}">
-            <span class="${tooltipState.fullscreen.enter}">Enter fullscreen</span>
-            <span class="${tooltipState.fullscreen.exit}">Exit fullscreen</span>
+
+          <media-time-group class="${time.group}">
+            <media-time type="current" class="${time.current}"></media-time>
+            <media-time-slider class="${slider.root}">
+              <media-slider-track class="${slider.track}">
+                <media-slider-fill class="${cn(slider.fill.base, slider.fill.fill)}"></media-slider-fill>
+                <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>
+
+          <media-playback-rate-button commandfor="playback-rate-tooltip"  class="${cn(button.base, button.subtle, button.icon, playbackRate.button)}"></media-playback-rate-button>
+          <media-tooltip id="playback-rate-tooltip" side="top" class="${cn(popup.tooltip)}">
+            Toggle playback rate
           </media-tooltip>
-        </span>
+
+          <media-mute-button commandfor="video-volume-popover" class="${cn(button.base, button.subtle, button.icon, iconState.mute.button)}">
+            ${renderIcon("volume-off", { class: cn(icon, iconState.mute.volumeOff) })}
+            ${renderIcon("volume-low", { class: cn(icon, iconState.mute.volumeLow) })}
+            ${renderIcon("volume-high", { class: cn(icon, iconState.mute.volumeHigh) })}
+          </media-mute-button>
+
+          <media-popover id="video-volume-popover" open-on-hover delay="200" close-delay="100" side="top" class="${cn(popup.popover, popup.volume)}">
+            <media-volume-slider class="${slider.root}" orientation="vertical" thumb-alignment="edge">
+              <media-slider-track class="${slider.track}">
+                <media-slider-fill class="${cn(slider.fill.base, slider.fill.fill)}"></media-slider-fill>
+              </media-slider-track>
+              <media-slider-thumb class="${cn(slider.thumb.base, slider.thumb.persistent)}"></media-slider-thumb>
+            </media-volume-slider>
+          </media-popover>
+
+          <span class="${tooltipState.captions.wrapper}">
+            <media-captions-button commandfor="captions-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.captions.button)}">
+              ${renderIcon("captions-off", { class: cn(icon, iconState.captions.off) })}
+              ${renderIcon("captions-on", { class: cn(icon, iconState.captions.on) })}
+            </media-captions-button>
+            <media-tooltip id="captions-tooltip" side="top" class="${cn(popup.tooltip)}">
+              <span class="${tooltipState.captions.enable}">Enable captions</span>
+              <span class="${tooltipState.captions.disable}">Disable captions</span>
+            </media-tooltip>
+          </span>
+
+          <span class="${tooltipState.pip.wrapper}">
+            <media-pip-button commandfor="pip-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.pip.button)}">
+              ${renderIcon("pip-enter", { class: cn(icon, iconState.pip.off) })}
+              ${renderIcon("pip-exit", { class: cn(icon, iconState.pip.on) })}
+            </media-pip-button>
+            <media-tooltip id="pip-tooltip" side="top" class="${cn(popup.tooltip)}">
+              <span class="${tooltipState.pip.enter}">Enter picture-in-picture</span>
+              <span class="${tooltipState.pip.exit}">Exit picture-in-picture</span>
+            </media-tooltip>
+          </span>
+
+          <span class="${tooltipState.fullscreen.wrapper}">
+            <media-fullscreen-button commandfor="fullscreen-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.fullscreen.button)}">
+              ${renderIcon("fullscreen-enter", { class: cn(icon, iconState.fullscreen.enter) })}
+              ${renderIcon("fullscreen-exit", { class: cn(icon, iconState.fullscreen.exit) })}
+            </media-fullscreen-button>
+            <media-tooltip id="fullscreen-tooltip" side="top" class="${cn(popup.tooltip)}">
+              <span class="${tooltipState.fullscreen.enter}">Enter fullscreen</span>
+              <span class="${tooltipState.fullscreen.exit}">Exit fullscreen</span>
+            </media-tooltip>
+          </span>
+        </media-tooltip-group>
       </media-controls>
 
       <div class="${overlay}"></div>