npm - @videojs/html - Versions diffs - 10.0.0-beta.2 → 10.0.0-beta.4 - Mend

@videojs/html 10.0.0-beta.2 → 10.0.0-beta.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (175) hide show

package/dist/dev/define/video/minimal-skin.js CHANGED Viewed

@@ -13,6 +13,7 @@ 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 minimal_skin_default from "../../_virtual/inline-css_src/define/video/minimal-skin.js";
 import { ReactiveElement } from "@videojs/element";
@@ -28,114 +29,104 @@ function getTemplateHTML() {
         ${renderIcon("spinner", { class: "media-icon" })}
       </media-buffering-indicator>
-      <!--<div class="media-error" role="alertdialog" aria-labelledby="media-error-title" aria-describedby="media-error-description">
-        <div class="media-error__dialog">
-          <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-controls">
-        <span class="media-button-group">
-          <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-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-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-tooltip">
-            Seek forward ${SEEK_TIME} seconds
-          </media-tooltip>
-        </span>
-        <span class="media-time-controls">
-          <media-time-group class="media-time">
-            <media-time type="current" class="media-time__value media-time__value--current"></media-time>
-            <media-time-separator class="media-time__separator"></media-time-separator>
-            <media-time type="duration" class="media-time__value media-time__value--duration"></media-time>
-          </media-time-group>
-          <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>
-        </span>
-        <span class="media-button-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-tooltip">
-            Toggle playback rate
-          </media-tooltip>
+        <media-tooltip-group>
+          <div class="media-button-group">
+            <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-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-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-tooltip">
+              Seek forward ${SEEK_TIME} seconds
+            </media-tooltip>
+          </div>
-          <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>
+          <div class="media-time-controls">
+            <media-time-group class="media-time">
+              <media-time type="current" class="media-time__value media-time__value--current"></media-time>
+              <media-time-separator class="media-time__separator"></media-time-separator>
+              <media-time type="duration" class="media-time__value media-time__value--duration"></media-time>
+            </media-time-group>
-          <media-popover id="video-volume-popover" open-on-hover delay="200" close-delay="100" side="top" class="media-popover media-popover--volume">
-            <media-volume-slider class="media-slider" orientation="vertical" thumb-alignment="edge">
+            <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--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-tooltip">
-            Toggle captions
-          </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-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-slider-thumb class="media-slider__thumb"></media-slider-thumb>
+            </media-time-slider>
+          </div>
-          <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-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>
-        </span>
+          <div class="media-button-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-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-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-tooltip">
+              Toggle captions
+            </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-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-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>
+          </div>
+        </media-tooltip-group>
       </media-controls>
       <div class="media-overlay"></div>

package/dist/dev/define/video/minimal-skin.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"minimal-skin.js","names":["styles"],"sources":["../../../../src/define/video/minimal-skin.ts"],"sourcesContent":["import { ReactiveElement } from '@videojs/element';\nimport { renderIcon } from '@videojs/icons/render/minimal';\nimport { createStyles, SkinMixin } from '../skin-mixin';\nimport styles from './minimal-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/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-minimal-skin media-minimal-skin--video\">\n <slot name=\"media\"></slot>\n\n <media-buffering-indicator class=\"media-buffering-indicator\">\n ${renderIcon('spinner', { class: 'media-icon' })}\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\">\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-controls\">\n <span class=\"media-button-~~group\">\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-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-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-tooltip\">\n Seek forward ${SEEK_TIME} seconds\n </media-tooltip>\n </~~span~~>\n\n <~~span~~ class=\"media-time-controls\">\n <media-time-group class=\"media-time\">\n <media-time type=\"current\" class=\"media-time__value media-time__value--current\"></media-time>\n <media-time-separator class=\"media-time__separator\"></media-time-separator>\n <media-time type=\"duration\" class=\"media-time__value media-time__value--duration\"></media-time>\n </media-time-group>\n\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 </~~span~~>\n\n <~~span~~ class=\"media-button-group\">\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-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-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-tooltip\">\n Toggle captions\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-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-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 </~~span~~>\n </media-controls>\n\n <div class=\"media-overlay\"></div>\n </media-container>\n `;\n}\n\nexport class MinimalVideoSkinElement extends SkinMixin(ReactiveElement) {\n static readonly tagName = 'video-minimal-skin';\n static styles = createStyles(styles);\n static getTemplateHTML = getTemplateHTML;\n}\n\ncustomElements.define(MinimalVideoSkinElement.tagName, MinimalVideoSkinElement);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n [MinimalVideoSkinElement.tagName]: MinimalVideoSkinElement;\n }\n}\n"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;AAqBA~~,MAAM,YAAY;AAElB,SAAS,kBAAkB;AACzB,QAAgB;;;;;UAKR,WAAW,WAAW,EAAE,OAAO,cAAc,CAAC,CAAC~~;;;;;;;;;;;;;;;;;;cAkB3C~~,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;;;;;;;;;;;;;;;;;;;;;;;;;;;~~cA2BvB~~,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;;;;;;;~~cAO3E~~,WAAW,OAAO,EAAE,OAAO,cAAc,CAAC,CAAC;;;;;;;;~~cAQ3C~~,WAAW,oBAAoB,EAAE,OAAO,2CAA2C,CAAC,CAAC;~~cACrF~~,WAAW,mBAAmB,EAAE,OAAO,0CAA0C,CAAC,CAAC~~;;;;;;;;;;;;;AAcjG~~,IAAa,0BAAb,cAA6C,UAAU,gBAAgB,CAAC;;iBAC5C;;;gBACV,aAAaA,qBAAO;;;yBACX;;;AAG3B,eAAe,OAAO,wBAAwB,SAAS,wBAAwB"}
1	+ {"version":3,"file":"minimal-skin.js","names":["styles"],"sources":["../../../../src/define/video/minimal-skin.ts"],"sourcesContent":["import { ReactiveElement } from '@videojs/element';\nimport { renderIcon } from '@videojs/icons/render/minimal';\nimport { createStyles, SkinMixin } from '../skin-mixin';\nimport styles from './minimal-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/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/tooltip-group';\nimport '../ui/volume-slider';\n\nconst SEEK_TIME = 10;\n\nfunction getTemplateHTML() {\n return /html/ `\n <media-container class=\"media-minimal-skin media-minimal-skin--video\">\n <slot name=\"media\"></slot>\n\n <media-buffering-indicator class=\"media-buffering-indicator\">\n ${renderIcon('spinner', { class: 'media-icon' })}\n </media-buffering-indicator>\n\n <media-controls class=\"media-controls\">\n <media-tooltip-group>\n <div class=\"media-button-group\">\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-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-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-tooltip\">\n Seek forward ${SEEK_TIME} seconds\n </media-tooltip>\n </div>\n\n <div class=\"media-time-controls\">\n <media-time-group class=\"media-time\">\n <media-time type=\"current\" class=\"media-time__value media-time__value--current\"></media-time>\n <media-time-separator class=\"media-time__separator\"></media-time-separator>\n <media-time type=\"duration\" class=\"media-time__value media-time__value--duration\"></media-time>\n </media-time-group>\n\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 </div>\n\n <div class=\"media-button-group\">\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-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-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-tooltip\">\n Toggle captions\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-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-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 </div>\n </media-tooltip-group>\n </media-controls>\n\n <div class=\"media-overlay\"></div>\n </media-container>\n `;\n}\n\nexport class MinimalVideoSkinElement extends SkinMixin(ReactiveElement) {\n static readonly tagName = 'video-minimal-skin';\n static styles = createStyles(styles);\n static getTemplateHTML = getTemplateHTML;\n}\n\ncustomElements.define(MinimalVideoSkinElement.tagName, MinimalVideoSkinElement);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n [MinimalVideoSkinElement.tagName]: MinimalVideoSkinElement;\n }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAsBA,MAAM,YAAY;AAElB,SAAS,kBAAkB;AACzB,QAAgB;;;;;UAKR,WAAW,WAAW,EAAE,OAAO,cAAc,CAAC,CAAC;;;;;;;gBAOzC,WAAW,WAAW,EAAE,OAAO,kCAAkC,CAAC,CAAC;gBACnE,WAAW,QAAQ,EAAE,OAAO,+BAA+B,CAAC,CAAC;gBAC7D,WAAW,SAAS,EAAE,OAAO,gCAAgC,CAAC,CAAC;;;;;;;;6EAQF,CAAC,UAAU;;kBAEtE,WAAW,QAAQ,EAAE,OAAO,kCAAkC,CAAC,CAAC;kDAChC,UAAU;;;;8BAI9B,UAAU;;;4EAGoC,UAAU;;kBAEpE,WAAW,QAAQ,EAAE,OAAO,cAAc,CAAC,CAAC;kDACZ,UAAU;;;;6BAI/B,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;gBA2BvB,WAAW,cAAc,EAAE,OAAO,qCAAqC,CAAC,CAAC;gBACzE,WAAW,cAAc,EAAE,OAAO,qCAAqC,CAAC,CAAC;gBACzE,WAAW,eAAe,EAAE,OAAO,sCAAsC,CAAC,CAAC;;;;;;;;;;;;;gBAa3E,WAAW,gBAAgB,EAAE,OAAO,uCAAuC,CAAC,CAAC;gBAC7E,WAAW,eAAe,EAAE,OAAO,sCAAsC,CAAC,CAAC;;;;;;;gBAO3E,WAAW,OAAO,EAAE,OAAO,cAAc,CAAC,CAAC;;;;;;;;gBAQ3C,WAAW,oBAAoB,EAAE,OAAO,2CAA2C,CAAC,CAAC;gBACrF,WAAW,mBAAmB,EAAE,OAAO,0CAA0C,CAAC,CAAC;;;;;;;;;;;;;;AAenG,IAAa,0BAAb,cAA6C,UAAU,gBAAgB,CAAC;;iBAC5C;;;gBACV,aAAaA,qBAAO;;;yBACX;;;AAG3B,eAAe,OAAO,wBAAwB,SAAS,wBAAwB"}

package/dist/dev/define/video/minimal-skin.tailwind.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"minimal-skin.tailwind.d.ts","names":[],"sources":["../../../../src/define/video/minimal-skin.tailwind.ts"],"mappings":";;;iBA2CS,eAAA,CAAA;AAAA,cAAe,oCAAA;;;;~~cAsIX~~,+BAAA,SAAwC,oCAAA;EAAA,gBACnC,OAAA;EAAA,OACT,eAAA,SAAe,eAAA;AAAA;AAAA,QAKhB,MAAA;EAAA,UACI,qBAAA;IAAA,CACP,+BAAA,CAAgC,OAAA,GAAU,+BAAA;EAAA;AAAA"}
1	+ {"version":3,"file":"minimal-skin.tailwind.d.ts","names":[],"sources":["../../../../src/define/video/minimal-skin.tailwind.ts"],"mappings":";;;iBA2CS,eAAA,CAAA;AAAA,cAAe,oCAAA;;;;cA4HX,+BAAA,SAAwC,oCAAA;EAAA,gBACnC,OAAA;EAAA,OACT,eAAA,SAAe,eAAA;AAAA;AAAA,QAKhB,MAAA;EAAA,UACI,qBAAA;IAAA,CACP,+BAAA,CAAgC,OAAA,GAAU,+BAAA;EAAA;AAAA"}

package/dist/dev/define/video/minimal-skin.tailwind.js CHANGED Viewed

@@ -1,15 +1,14 @@
 import { SkinMixin } from "../skin-mixin.js";
 import { renderIcon } from "../../icons/dist/render/minimal/index.js";
+import { iconState } from "../../skins/dist/default/shared/tailwind/icon-state.js";
+import { tooltipState } from "../../skins/dist/default/shared/tailwind/tooltip-state.js";
 import { bufferingIndicator } from "../../skins/dist/default/minimal/tailwind/components/buffering.js";
 import { button } from "../../skins/dist/default/minimal/tailwind/components/button.js";
 import { buttonGroup } from "../../skins/dist/default/minimal/tailwind/components/button-group.js";
-import { error } from "../../skins/dist/default/minimal/tailwind/components/error.js";
 import { icon, iconContainer, iconFlipped } from "../../skins/dist/default/minimal/tailwind/components/icon.js";
 import { seek } from "../../skins/dist/default/minimal/tailwind/components/seek.js";
 import { time } from "../../skins/dist/default/minimal/tailwind/components/time.js";
-import { iconState } from "../../skins/dist/default/minimal/tailwind/components/icon-state.js";
 import { overlay } from "../../skins/dist/default/minimal/tailwind/components/overlay.js";
-import { tooltipState } from "../../skins/dist/default/minimal/tailwind/components/tooltip-state.js";
 import { controls, popup, root, slider } from "../../skins/dist/default/minimal/tailwind/video.tailwind.js";
 import "../media/container.js";
 import "../ui/buffering-indicator.js";
@@ -25,6 +24,7 @@ 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 { playbackRate } from "../../skins/dist/default/default/tailwind/components/playback-rate.js";
 import { ReactiveElement } from "@videojs/element";
@@ -41,124 +41,114 @@ function getTemplateHTML() {
         ${renderIcon("spinner")}
       </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">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="${buttonGroup}">
-          <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>
+        <media-tooltip-group class="contents">
+          <div class="${buttonGroup}">
+            <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>
-          <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>
-            </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="${time.controls}">
-          <media-time-group class="${time.group}">
-            <media-time type="current" class="${time.current}"></media-time>
-            <media-time-separator class="${time.separator}"></media-time-separator>
-            <media-time type="duration" class="${time.duration}"></media-time>
-          </media-time-group>
-          <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>
-        </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>
-        <span class="${buttonGroup}">
-          <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-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>
+              </span>
+            </media-seek-button>
+            <media-tooltip id="seek-forward-tooltip" side="top" class="${cn(popup.tooltip)}">
+              Seek forward ${SEEK_TIME} seconds
+            </media-tooltip>
+          </div>
-          <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>
+          <div class="${time.controls}">
+            <media-time-group class="${time.group}">
+              <media-time type="current" class="${time.current}"></media-time>
+              <media-time-separator class="${time.separator}"></media-time-separator>
+              <media-time type="duration" class="${time.duration}"></media-time>
+            </media-time-group>
-          <media-popover id="video-volume-popover" open-on-hover delay="200" close-delay="100" side="top" class="${cn(popup.volume)}">
-            <media-volume-slider class="${slider.root}" orientation="vertical" thumb-alignment="edge">
+            <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="${slider.thumb.base}"></media-slider-thumb>
-            </media-volume-slider>
-          </media-popover>
+              <media-slider-thumb class="${cn(slider.thumb.base, slider.thumb.interactive)}"></media-slider-thumb>
+            </media-time-slider>
+          </div>
-          <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>
+          <div class="${buttonGroup}">
+            <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>
-          </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-tooltip>
-          </span>
+            <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.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="${slider.thumb.base}"></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-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-tooltip>
-          </span>
-        </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-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-tooltip>
+            </span>
+          </div>
+        </media-tooltip-group>
       </media-controls>
       <div class="${overlay}"></div>