@videojs/html 0.1.0-preview.5 → 0.1.0-preview.6
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.
- package/README.md +1 -1
- package/dist/define/index.d.ts +1 -1
- package/dist/define/index.js +2 -2
- package/dist/define/video-provider.d.ts +1 -0
- package/dist/define/video-provider.js +3 -0
- package/dist/index.d.ts +3 -3
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +3 -3
- package/dist/{media-skin-mHWwUPg3.js → media-skin-CxnuHwhu.js} +1 -1
- package/dist/{media-skin-mHWwUPg3.js.map → media-skin-CxnuHwhu.js.map} +1 -1
- package/dist/skins/frosted.d.ts +1 -1
- package/dist/skins/frosted.js +8 -8
- package/dist/skins/frosted.js.map +1 -1
- package/dist/skins/minimal.d.ts +1 -1
- package/dist/skins/minimal.js +8 -8
- package/dist/skins/minimal.js.map +1 -1
- package/dist/video-provider-BCGedOLm.js +8 -0
- package/dist/video-provider-BCGedOLm.js.map +1 -0
- package/dist/{media-provider-CyoL0bCx.js → video-provider-BKDqoKFf.js} +4 -4
- package/dist/{media-provider-CyoL0bCx.js.map → video-provider-BKDqoKFf.js.map} +1 -1
- package/package.json +4 -4
- package/dist/define/media-provider.d.ts +0 -1
- package/dist/define/media-provider.js +0 -3
- package/dist/media-provider-D_GL2_DN.js +0 -8
- package/dist/media-provider-D_GL2_DN.js.map +0 -1
- /package/dist/{media-provider-D7P2TLXG.d.ts → video-provider-BcBuWpx6.d.ts} +0 -0
package/README.md
CHANGED
|
@@ -22,5 +22,5 @@ members:
|
|
|
22
22
|
|
|
23
23
|
[package]: https://www.npmjs.com/package/@videojs/html
|
|
24
24
|
[package-badge]: https://img.shields.io/npm/v/@videojs/html/next?label=@videojs/html@next
|
|
25
|
-
[discord]: https://discord.gg/
|
|
25
|
+
[discord]: https://discord.gg/JBqHh485uF
|
|
26
26
|
[gh-discussions]: https://github.com/videojs/v10/discussions
|
package/dist/define/index.d.ts
CHANGED
package/dist/define/index.js
CHANGED
|
@@ -11,10 +11,10 @@ import "../time-slider-CA1GMs6A.js";
|
|
|
11
11
|
import "../tooltip-CJpujx2f.js";
|
|
12
12
|
import "../volume-slider-guD8gqpi.js";
|
|
13
13
|
import "../media-container-C0MUzkJ_.js";
|
|
14
|
-
import "../
|
|
14
|
+
import "../video-provider-BKDqoKFf.js";
|
|
15
15
|
import "../custom-element-3bDlB2XO.js";
|
|
16
16
|
import "../media-container-BGEXSi9g.js";
|
|
17
|
-
import "../
|
|
17
|
+
import "../video-provider-BCGedOLm.js";
|
|
18
18
|
import "../media-play-button-CLj-hkwn.js";
|
|
19
19
|
import "../media-mute-button-BOVhZ3aP.js";
|
|
20
20
|
import "../media-volume-slider-CKSxmdQv.js";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import "../video-provider-BcBuWpx6.js";
|
package/dist/index.d.ts
CHANGED
|
@@ -137,13 +137,13 @@ declare class MediaContainerElement extends CustomElementConsumer {
|
|
|
137
137
|
_subscribeToPlayState: () => void;
|
|
138
138
|
}
|
|
139
139
|
//#endregion
|
|
140
|
-
//#region src/media/
|
|
140
|
+
//#region src/media/video-provider.d.ts
|
|
141
141
|
declare const ProviderHTMLElement: Constructor<CustomElement & HTMLElement>;
|
|
142
|
-
declare class
|
|
142
|
+
declare class VideoProviderElement extends ProviderHTMLElement {
|
|
143
143
|
contexts: {
|
|
144
144
|
mediaStore: () => MediaStore;
|
|
145
145
|
};
|
|
146
146
|
}
|
|
147
147
|
//#endregion
|
|
148
|
-
export { CurrentTimeDisplayElement, DurationDisplayElement, FullscreenButtonElement, MediaContainerElement,
|
|
148
|
+
export { CurrentTimeDisplayElement, DurationDisplayElement, FullscreenButtonElement, MediaContainerElement, MediaSkinElement, MuteButtonElement, PlayButtonElement, PopoverElement, PreviewTimeDisplayElement, TimeSliderElement, TooltipElement, VideoProviderElement, VolumeSliderElement };
|
|
149
149
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","names":["useCurrentTimeDisplayState: StateHook<{\n currentTime: number | undefined;\n duration: number | undefined;\n}>","getCurrentTimeDisplayProps: PropsHook<{\n currentTime: number | undefined;\n duration: number | undefined;\n}>","CurrentTimeDisplayElement: ConnectedComponentConstructor<CurrentTimeDisplayState>","useDurationDisplayState: StateHook<{\n duration: number | undefined;\n}>","getDurationDisplayProps: PropsHook<{\n duration: number | undefined;\n}>","DurationDisplayElement: ConnectedComponentConstructor<DurationDisplayState>","getFullscreenButtonState: StateHook<{ fullscreen: boolean }>","getFullscreenButtonProps: PropsHook<{ fullscreen: boolean }>","FullscreenButtonElement: ConnectedComponentConstructor<FullscreenButtonState>","getMuteButtonState: StateHook<{\n muted: boolean;\n volumeLevel: string;\n}>","getMuteButtonProps: PropsHook<{\n muted: boolean;\n volumeLevel: string;\n}>","MuteButtonElement: ConnectedComponentConstructor<MuteButtonState>","getPlayButtonState: StateHook<{ paused: boolean }>","getPlayButtonProps: PropsHook<{ paused: boolean }>","PlayButtonElement: ConnectedComponentConstructor<PlayButtonState>","usePreviewTimeDisplayState: StateHook<{\n previewTime: number | undefined;\n}>","getPreviewTimeDisplayProps: PropsHook<{\n previewTime: number | undefined;\n}>","PreviewTimeDisplayElement: ConnectedComponentConstructor<PreviewTimeDisplayState>","getTimeSliderRootProps: PropsHook<{\n currentTime: number;\n duration: number;\n requestSeek: (time: number) => void;\n core: CoreTimeSlider | null;\n}>","useTimeSliderRootState: StateHook<{\n currentTime: number;\n duration: number;\n requestSeek: (time: number) => void;\n core: CoreTimeSlider | null;\n}>","getTimeSliderTrackProps: PropsHook<Record<string, never>>","getTimeSliderProgressProps: PropsHook<Record<string, never>>","getTimeSliderPointerProps: PropsHook<Record<string, never>>","getTimeSliderThumbProps: PropsHook<Record<string, never>>","TimeSliderRootElement: ConnectedComponentConstructor<{\n currentTime: number;\n duration: number;\n requestSeek: (time: number) => void;\n core: CoreTimeSlider | null;\n}>","TimeSliderTrackElement: ConnectedComponentConstructor<any>","TimeSliderProgressElement: ConnectedComponentConstructor<any>","TimeSliderPointerElement: ConnectedComponentConstructor<any>","TimeSliderThumbElement: ConnectedComponentConstructor<any>","getVolumeSliderRootProps: PropsHook<{\n volume: number;\n muted: boolean;\n volumeLevel: string;\n requestVolumeChange: (volume: number) => void;\n core: CoreVolumeSlider | null;\n}>","useVolumeSliderRootState: StateHook<{\n volume: number;\n muted: boolean;\n volumeLevel: string;\n requestVolumeChange: (volume: number) => void;\n core: CoreVolumeSlider | null;\n}>","getVolumeSliderTrackProps: PropsHook<Record<string, never>>","getVolumeSliderProgressProps: PropsHook<Record<string, never>>","getVolumeSliderThumbProps: PropsHook<Record<string, never>>","VolumeSliderRootElement: ConnectedComponentConstructor<{\n volume: number;\n muted: boolean;\n volumeLevel: string;\n requestVolumeChange: (volume: number) => void;\n core: CoreVolumeSlider | null;\n}>","VolumeSliderTrackElement: ConnectedComponentConstructor<any>","VolumeSliderProgressElement: ConnectedComponentConstructor<any>","VolumeSliderThumbElement: ConnectedComponentConstructor<any>","CustomElementConsumer: Constructor<CustomElement & HTMLElement>","ProviderHTMLElement: Constructor<CustomElement & HTMLElement>"],"sources":["../src/utils/component-factory.ts","../src/elements/current-time-display.ts","../src/elements/duration-display.ts","../src/elements/fullscreen-button.ts","../src/elements/mute-button.ts","../src/elements/play-button.ts","../src/elements/popover.ts","../src/elements/preview-time-display.ts","../src/elements/time-slider.ts","../src/elements/tooltip.ts","../src/elements/volume-slider.ts","../src/media/media-container.ts","../src/media/
|
|
1
|
+
{"version":3,"file":"index.d.ts","names":["useCurrentTimeDisplayState: StateHook<{\n currentTime: number | undefined;\n duration: number | undefined;\n}>","getCurrentTimeDisplayProps: PropsHook<{\n currentTime: number | undefined;\n duration: number | undefined;\n}>","CurrentTimeDisplayElement: ConnectedComponentConstructor<CurrentTimeDisplayState>","useDurationDisplayState: StateHook<{\n duration: number | undefined;\n}>","getDurationDisplayProps: PropsHook<{\n duration: number | undefined;\n}>","DurationDisplayElement: ConnectedComponentConstructor<DurationDisplayState>","getFullscreenButtonState: StateHook<{ fullscreen: boolean }>","getFullscreenButtonProps: PropsHook<{ fullscreen: boolean }>","FullscreenButtonElement: ConnectedComponentConstructor<FullscreenButtonState>","getMuteButtonState: StateHook<{\n muted: boolean;\n volumeLevel: string;\n}>","getMuteButtonProps: PropsHook<{\n muted: boolean;\n volumeLevel: string;\n}>","MuteButtonElement: ConnectedComponentConstructor<MuteButtonState>","getPlayButtonState: StateHook<{ paused: boolean }>","getPlayButtonProps: PropsHook<{ paused: boolean }>","PlayButtonElement: ConnectedComponentConstructor<PlayButtonState>","usePreviewTimeDisplayState: StateHook<{\n previewTime: number | undefined;\n}>","getPreviewTimeDisplayProps: PropsHook<{\n previewTime: number | undefined;\n}>","PreviewTimeDisplayElement: ConnectedComponentConstructor<PreviewTimeDisplayState>","getTimeSliderRootProps: PropsHook<{\n currentTime: number;\n duration: number;\n requestSeek: (time: number) => void;\n core: CoreTimeSlider | null;\n}>","useTimeSliderRootState: StateHook<{\n currentTime: number;\n duration: number;\n requestSeek: (time: number) => void;\n core: CoreTimeSlider | null;\n}>","getTimeSliderTrackProps: PropsHook<Record<string, never>>","getTimeSliderProgressProps: PropsHook<Record<string, never>>","getTimeSliderPointerProps: PropsHook<Record<string, never>>","getTimeSliderThumbProps: PropsHook<Record<string, never>>","TimeSliderRootElement: ConnectedComponentConstructor<{\n currentTime: number;\n duration: number;\n requestSeek: (time: number) => void;\n core: CoreTimeSlider | null;\n}>","TimeSliderTrackElement: ConnectedComponentConstructor<any>","TimeSliderProgressElement: ConnectedComponentConstructor<any>","TimeSliderPointerElement: ConnectedComponentConstructor<any>","TimeSliderThumbElement: ConnectedComponentConstructor<any>","getVolumeSliderRootProps: PropsHook<{\n volume: number;\n muted: boolean;\n volumeLevel: string;\n requestVolumeChange: (volume: number) => void;\n core: CoreVolumeSlider | null;\n}>","useVolumeSliderRootState: StateHook<{\n volume: number;\n muted: boolean;\n volumeLevel: string;\n requestVolumeChange: (volume: number) => void;\n core: CoreVolumeSlider | null;\n}>","getVolumeSliderTrackProps: PropsHook<Record<string, never>>","getVolumeSliderProgressProps: PropsHook<Record<string, never>>","getVolumeSliderThumbProps: PropsHook<Record<string, never>>","VolumeSliderRootElement: ConnectedComponentConstructor<{\n volume: number;\n muted: boolean;\n volumeLevel: string;\n requestVolumeChange: (volume: number) => void;\n core: CoreVolumeSlider | null;\n}>","VolumeSliderTrackElement: ConnectedComponentConstructor<any>","VolumeSliderProgressElement: ConnectedComponentConstructor<any>","VolumeSliderThumbElement: ConnectedComponentConstructor<any>","CustomElementConsumer: Constructor<CustomElement & HTMLElement>","ProviderHTMLElement: Constructor<CustomElement & HTMLElement>"],"sources":["../src/utils/component-factory.ts","../src/elements/current-time-display.ts","../src/elements/duration-display.ts","../src/elements/fullscreen-button.ts","../src/elements/mute-button.ts","../src/elements/play-button.ts","../src/elements/popover.ts","../src/elements/preview-time-display.ts","../src/elements/time-slider.ts","../src/elements/tooltip.ts","../src/elements/volume-slider.ts","../src/media/media-container.ts","../src/media/video-provider.ts"],"sourcesContent":[],"mappings":";;;;;;;;UAaiB;cACH,QAAQ;;;;;cCqETE,2BAA2B,8BAA8B;;;;cCNzDG,wBAAwB,8BAA8B;;;;AEQtDM,cDXAH,uBCWiD,EDXxB,6BCWN,CDXoC,qBCWpC,CAAA;;;AAAnBG,cAAAA,iBAAiD,EAA9B,6BAAA,CAA8B,eAA9B,CAAA;;;ADXnBH,cEVAM,iBFUuD,EEVpC,6BFUM,CEVwB,eFUxB,CAAA;;;cG1DzB,cAAA,SAAuB,WAAA;;;;qBAmCf;;ENtCrB,IAAiB,WAAA,CAAA,CAAA,EAAA,OAAA;;;cM4EH;ELNd,IAAaZ,UAAAA,CAAAA,CAAAA,EAAAA,MAAAA;;;;cMVAe,2BAA2B,8BAA8B;;;;cCsKzDO,uBAAuB;;ECzOpC,QAAa,EAAA,MAAA;EAqCQ,WAAA,EAAA,CAAA,IAAA,EAAA,MAAA,EAAA,GAAA,IAAA;EAiCP,IAAA,EDuKN,UCvKM,GAAA,IAAA;CAtEsB,CAAA;AAAA,cDgPvBC,sBChPuB,EDgPC,6BChPD,CAAA,GAAA,CAAA;cDuPvBC,2BAA2B;cAO3BC,0BAA0B;cAO1BC,wBAAwB;AE/BxBM,cFsCA,iBEtCAA,EAAAA;EAWb,IAAaC,EAAAA,OFqCE,qBErCwB;EAUvC,KAAaC,EAAAA,OF4BG,sBE5B0B;EAU1C,QAAaC,EAAAA,OFmBM,yBEnBoB;EAUvC,OAAa,EAAA,OFUK,wBEVL;EASE,KAAA,EAAA,OFEC,sBEFD;CACC;;;cDzRH,cAAA,SAAuB,WAAA;;;;qBAqCf;;ET9BrB,IAAiB,KAAA,CAAA,CAAA,EAAA,MAAA;;;cS+DH;EROd,IAAanC,UAAAA,CAAAA,CAAAA,EAAAA,MAAAA;;;;;;;;;AUpEgB,cD6NhBgC,uBC7NgB,ED6NS,6BC7NT,CAAA;EAE7B,MAAa,EAAA,MAAA;EACkC,KAAA,EAAA,OAAA;EAIjC,WAAA,EAAA,MAAA;EAmDW,mBAAA,EAAA,CAAA,MAAA,EAAA,MAAA,EAAA,GAAA,IAAA;EAxDkB,IAAA,EDgOnC,YChOmC,GAAA,IAAA;CAAA,CAAA;;;;ACXrCK,cFiPOJ,wBEjP0C,EFiPhB,6BEjPgB,CAAA,GAAA,CAAA;;;;AAA5B,cF2PdC,2BE3Pc,EF2Pe,6BE3Pf,CAAA,GAAA,CAAA;AAE3B;;;cFmQaC,0BAA0B;;;;cAU1B;eASE;gBACC;mBACG;gBACH;;;;cClRVC,uBAAuB,YAAY,gBAAgB;cAE5C,qBAAA,SAA8B,qBAAA;;UACI;;EXL/C,OAAiB,eAAA,EAAA,GAAA,GAAA,MAAA;;cWSH;;EV6Dd,QAAapC,EAAAA;;;;ECNb,iBAAaG,CAAAA,CAAAA,EAAAA,IAAAA;;;;ECHb,sBAAaG,EAAAA,GAAAA,GAAuD,IAAA;wBQD3C;;;;;cCnEnB+B,qBAAqB,YAAY,gBAAgB;cAE1C,oBAAA,SAA6B,mBAAA;;sBAEtB;;AZGpB"}
|
package/dist/index.js
CHANGED
|
@@ -11,7 +11,7 @@ import { t as TimeSliderElement } from "./time-slider-CA1GMs6A.js";
|
|
|
11
11
|
import { t as TooltipElement } from "./tooltip-CJpujx2f.js";
|
|
12
12
|
import { t as VolumeSliderElement } from "./volume-slider-guD8gqpi.js";
|
|
13
13
|
import { t as MediaContainerElement } from "./media-container-C0MUzkJ_.js";
|
|
14
|
-
import { t as
|
|
15
|
-
import { t as
|
|
14
|
+
import { t as MediaSkinElement } from "./media-skin-CxnuHwhu.js";
|
|
15
|
+
import { t as VideoProviderElement } from "./video-provider-BKDqoKFf.js";
|
|
16
16
|
|
|
17
|
-
export { CurrentTimeDisplayElement, DurationDisplayElement, FullscreenButtonElement, MediaContainerElement,
|
|
17
|
+
export { CurrentTimeDisplayElement, DurationDisplayElement, FullscreenButtonElement, MediaContainerElement, MediaSkinElement, MuteButtonElement, PlayButtonElement, PopoverElement, PreviewTimeDisplayElement, TimeSliderElement, TooltipElement, VideoProviderElement, VolumeSliderElement };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"media-skin-
|
|
1
|
+
{"version":3,"file":"media-skin-CxnuHwhu.js","names":[],"sources":["../src/media/media-skin.ts"],"sourcesContent":["export function getTemplateHTML() {\n return /* html */ `\n <style>\n :host {\n display: block;\n }\n\n media-container {\n display: block;\n width: 100%;\n height: 100%;\n }\n </style>\n <slot></slot>\n `;\n}\n\nexport class MediaSkinElement extends HTMLElement {\n static shadowRootOptions = { mode: 'open' as ShadowRootMode };\n static getTemplateHTML: () => string = getTemplateHTML;\n\n constructor() {\n super();\n\n if (!this.shadowRoot) {\n this.attachShadow((this.constructor as typeof MediaSkinElement).shadowRootOptions);\n this.shadowRoot!.innerHTML = (this.constructor as typeof MediaSkinElement).getTemplateHTML();\n }\n }\n}\n"],"mappings":";AAAA,SAAgB,kBAAkB;AAChC,QAAkB;;;;;;;;;;;;;;;AAgBpB,IAAa,mBAAb,cAAsC,YAAY;;2BACrB,EAAE,MAAM,QAA0B;;;yBACtB;;CAEvC,cAAc;AACZ,SAAO;AAEP,MAAI,CAAC,KAAK,YAAY;AACpB,QAAK,aAAc,KAAK,YAAwC,kBAAkB;AAClF,QAAK,WAAY,YAAa,KAAK,YAAwC,iBAAiB"}
|
package/dist/skins/frosted.d.ts
CHANGED
package/dist/skins/frosted.js
CHANGED
|
@@ -11,12 +11,12 @@ import "../time-slider-CA1GMs6A.js";
|
|
|
11
11
|
import "../tooltip-CJpujx2f.js";
|
|
12
12
|
import "../volume-slider-guD8gqpi.js";
|
|
13
13
|
import "../media-container-C0MUzkJ_.js";
|
|
14
|
-
import "../media-
|
|
15
|
-
import
|
|
14
|
+
import { t as MediaSkinElement } from "../media-skin-CxnuHwhu.js";
|
|
15
|
+
import "../video-provider-BKDqoKFf.js";
|
|
16
16
|
import { t as defineCustomElement } from "../custom-element-3bDlB2XO.js";
|
|
17
17
|
import "../icons-CuxuONCk.js";
|
|
18
18
|
import "../media-container-BGEXSi9g.js";
|
|
19
|
-
import "../
|
|
19
|
+
import "../video-provider-BCGedOLm.js";
|
|
20
20
|
import "../media-play-button-CLj-hkwn.js";
|
|
21
21
|
import "../media-mute-button-BOVhZ3aP.js";
|
|
22
22
|
import "../media-volume-slider-CKSxmdQv.js";
|
|
@@ -74,7 +74,7 @@ function getTemplateHTML() {
|
|
|
74
74
|
</media-time-slider-track>
|
|
75
75
|
<media-time-slider-thumb class="slider-thumb"></media-time-slider-thumb>
|
|
76
76
|
</media-time-slider>
|
|
77
|
-
<media-tooltip
|
|
77
|
+
<media-tooltip
|
|
78
78
|
id="time-slider-tooltip"
|
|
79
79
|
class="surface popup-animation"
|
|
80
80
|
popover="manual"
|
|
@@ -94,9 +94,9 @@ function getTemplateHTML() {
|
|
|
94
94
|
<media-volume-low-icon class="icon volume-low-icon"></media-volume-low-icon>
|
|
95
95
|
<media-volume-off-icon class="icon volume-off-icon"></media-volume-off-icon>
|
|
96
96
|
</media-mute-button>
|
|
97
|
-
<media-popover
|
|
98
|
-
id="volume-slider-popover"
|
|
99
|
-
class="surface popup-animation"
|
|
97
|
+
<media-popover
|
|
98
|
+
id="volume-slider-popover"
|
|
99
|
+
class="surface popup-animation"
|
|
100
100
|
popover="manual"
|
|
101
101
|
open-on-hover
|
|
102
102
|
delay="200"
|
|
@@ -117,7 +117,7 @@ function getTemplateHTML() {
|
|
|
117
117
|
<media-fullscreen-enter-icon class="icon fullscreen-enter-icon"></media-fullscreen-enter-icon>
|
|
118
118
|
<media-fullscreen-exit-icon class="icon fullscreen-exit-icon"></media-fullscreen-exit-icon>
|
|
119
119
|
</media-fullscreen-button>
|
|
120
|
-
<media-tooltip
|
|
120
|
+
<media-tooltip
|
|
121
121
|
id="fullscreen-tooltip"
|
|
122
122
|
class="surface popup-animation"
|
|
123
123
|
popover="manual"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"frosted.js","names":["styles"],"sources":["../../src/skins/frosted/styles.css","../../src/skins/frosted/index.ts"],"sourcesContent":["\"media-container * {\\n box-sizing: border-box;\\n}\\n\\nmedia-container {\\n position: relative;\\n isolation: isolate;\\n container: root / inline-size;\\n overflow: clip;\\n font-size: 0.8125rem;\\n line-height: 1.5;\\n border-radius: inherit;\\n background: oklab(0 0 0);\\n}\\nmedia-container::before,\\nmedia-container::after {\\n content: '';\\n position: absolute;\\n pointer-events: none;\\n border-radius: inherit;\\n z-index: 10;\\n}\\nmedia-container::before {\\n inset: 1px;\\n box-shadow: inset 0 0 0 1px oklab(1 0 0 / 0.15);\\n}\\nmedia-container::after {\\n inset: 0;\\n box-shadow: inset 0 0 0 1px oklab(0 0 0 / 0.1);\\n}\\n\\n/* Fullscreen */\\nmedia-container:fullscreen {\\n border-radius: 0;\\n}\\n\\nmedia-container > ::slotted([slot='media']) {\\n display: block;\\n width: 100%;\\n height: 100%;\\n}\\n\\n/* Media Container UI Overlay Styling */\\nmedia-container > .overlay {\\n position: absolute;\\n inset: 0;\\n display: flex;\\n flex-flow: column nowrap;\\n align-items: start;\\n pointer-events: none;\\n border-radius: inherit;\\n background-image: linear-gradient(to top, oklab(0 0 0 / 0.5), oklab(0 0 0 / 0.3), rgba(0, 0, 0, 0));\\n backdrop-filter: saturate(1.5) brightness(0.9);\\n transition: opacity 0.15s ease-out;\\n transition-delay: 500ms;\\n opacity: 0;\\n}\\nmedia-container:hover > .overlay,\\nmedia-container:has([data-paused]) > .overlay,\\nmedia-container:has([aria-expanded='true']) > .overlay {\\n opacity: 1;\\n transition-duration: 100ms;\\n transition-delay: 0ms;\\n}\\n\\n/* Common Surface Styles - e.g. tooltips, popovers, controls */\\n.surface {\\n background-color: oklab(1 0 0 / 0.1);\\n backdrop-filter: blur(64px) brightness(0.9) saturate(1.5);\\n box-shadow:\\n inset 0 0 0 1px oklab(1 0 0 / 0.15),\\n 0 0 0 1px oklab(0 0 0 / 0.15),\\n oklab(0 0 0 / 0.15) 0px 1px 3px 0px,\\n oklab(0 0 0 / 0.15) 0px 1px 2px -1px;\\n}\\n@media (prefers-reduced-transparency: reduce) {\\n .surface {\\n background-color: oklab(0 0 0 / 0.7);\\n box-shadow:\\n inset 0 0 0 1px oklab(0 0 0),\\n 0 0 0 1px oklab(1 0 0 / 0.2);\\n }\\n}\\n@media (prefers-contrast: more) {\\n .surface {\\n background-color: oklab(0 0 0 / 0.9);\\n box-shadow:\\n inset 0 0 0 1px oklab(0 0 0),\\n 0 0 0 1px oklab(1 0 0 / 0.2);\\n }\\n}\\n\\n/* Media Control Bar UI/Styles */\\n.control-bar {\\n position: absolute;\\n bottom: 0.75rem;\\n inset-inline: 0.75rem;\\n padding: 0.25rem;\\n display: flex;\\n align-items: center;\\n gap: 0.125rem;\\n border-radius: calc(infinity * 1px);\\n will-change: scale, transform, filter, opacity;\\n scale: 0.9;\\n opacity: 0;\\n filter: blur(8px);\\n transition-property: scale, transform, filter, opacity;\\n transition-delay: 500ms;\\n transition-duration: 300ms;\\n transition-timing-function: ease-out;\\n transform-origin: bottom;\\n color: oklab(1 0 0);\\n}\\nmedia-container:hover > .control-bar,\\nmedia-container:has([data-paused]) > .control-bar,\\nmedia-container:has([aria-expanded='true']) > .control-bar {\\n opacity: 1;\\n scale: 1;\\n filter: blur(0px);\\n transition-delay: 0ms;\\n transition-duration: 100ms;\\n}\\n\\n/* Time Display Styling */\\n.time-controls {\\n display: flex;\\n align-items: center;\\n flex: 1;\\n gap: 0.75rem;\\n padding-inline: 0.375rem;\\n}\\nmedia-current-time-display,\\nmedia-duration-display {\\n text-shadow: 0 1px 0 oklab(0 0 0 / 0.25);\\n font-variant-numeric: tabular-nums;\\n}\\n\\n/* Generic Media Button Styling */\\n.button {\\n display: grid;\\n flex-shrink: 0;\\n padding: 0.5rem;\\n cursor: pointer;\\n background: transparent;\\n border: none;\\n border-radius: calc(infinity * 1px);\\n color: oklab(1 0 0 / 0.9);\\n user-select: none;\\n outline: 2px solid transparent;\\n outline-offset: -2px;\\n transition-property: background-color, color, outline-offset;\\n transition-duration: 150ms;\\n transition-timing-function: ease-out;\\n}\\n.button:hover,\\n.button:focus-visible,\\n.button[aria-expanded='true'] {\\n background-color: oklab(1 0 0 / 0.1);\\n color: oklab(1 0 0);\\n text-decoration: none;\\n}\\n.button:focus-visible {\\n outline-color: oklch(62.3% 0.214 259.815);\\n outline-offset: 2px;\\n}\\n.button[disabled] {\\n cursor: not-allowed;\\n opacity: 0.5;\\n filter: grayscale(1);\\n}\\n\\n.button .icon {\\n grid-area: 1 / 1;\\n width: 18px;\\n height: 18px;\\n filter: drop-shadow(0 1px 0 oklab(0 0 0 / 0.25));\\n}\\n\\n/* Media Play Button UI/Styles */\\nmedia-play-button .icon {\\n opacity: 0;\\n transition: opacity 150ms linear;\\n}\\n\\nmedia-play-button:not([data-paused]) .pause-icon,\\nmedia-play-button[data-paused] .play-icon {\\n opacity: 1;\\n}\\n\\n/* Media Fullscreen Button UI/Styles */\\nmedia-fullscreen-button .icon {\\n display: none;\\n}\\nmedia-fullscreen-button:not([data-fullscreen]) .fullscreen-enter-icon,\\nmedia-fullscreen-button[data-fullscreen] .fullscreen-exit-icon {\\n display: inline;\\n}\\n\\n/* One way to define the \\\"default visible\\\" icon (CJP) */\\nmedia-mute-button .icon {\\n display: none;\\n}\\nmedia-mute-button:not([data-volume-level]) .volume-low-icon,\\nmedia-mute-button[data-volume-level='high'] .volume-high-icon,\\nmedia-mute-button[data-volume-level='low'] .volume-low-icon,\\nmedia-mute-button[data-volume-level='medium'] .volume-low-icon,\\nmedia-mute-button[data-volume-level='off'] .volume-off-icon {\\n display: inline;\\n}\\n\\n/* TimeSlider Component Styles */\\n.slider {\\n flex: 1;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n position: relative;\\n border-radius: calc(infinity * 1px);\\n outline: none;\\n}\\n\\n/* Horizontal orientation styles */\\n.slider[data-orientation='horizontal'] {\\n min-width: 5rem;\\n width: 100%;\\n height: 1.25rem;\\n}\\n\\n/* Vertical orientation styles */\\n.slider[data-orientation='vertical'] {\\n height: 5rem;\\n width: 1.25rem;\\n}\\n\\n.slider-track {\\n position: relative;\\n isolation: isolate;\\n background-color: oklab(1 0 0 / 0.2);\\n border-radius: inherit;\\n overflow: hidden;\\n user-select: none;\\n outline: 2px solid transparent;\\n outline-offset: -2px;\\n transition: outline-offset 150ms ease-out;\\n box-shadow: 0 0 0 1px oklab(0 0 0 / 0.05);\\n}\\n\\n/* Horizontal track styles */\\n.slider-track[data-orientation='horizontal'] {\\n width: 100%;\\n height: 0.25rem;\\n}\\n\\n/* Vertical track styles */\\n.slider-track[data-orientation='vertical'] {\\n width: 0.25rem;\\n height: 100%;\\n}\\n\\n.slider:focus-visible .slider-track {\\n outline-color: oklch(62.3% 0.214 259.815);\\n outline-offset: 6px;\\n}\\n\\n.slider-thumb {\\n width: 0.625rem;\\n height: 0.625rem;\\n background-color: oklab(1 0 0);\\n border-radius: calc(infinity * 1px);\\n user-select: none;\\n z-index: 10;\\n box-shadow:\\n 0 0 0 1px oklab(0 0 0 / 0.1),\\n 0 1px 3px 0 oklab(0 0 0 / 0.15),\\n 0 1px 2px -1px oklab(0 0 0 / 0.15);\\n opacity: 0;\\n transition-property: opacity, height, width;\\n transition-duration: 150ms;\\n transition-timing-function: ease-out;\\n}\\n.slider-thumb:active {\\n width: 0.75rem;\\n height: 0.75rem;\\n}\\n.slider:hover .slider-thumb,\\n.slider:focus-within .slider-thumb {\\n opacity: 1;\\n}\\n.slider-track[data-orientation='horizontal'] .slider-thumb {\\n cursor: ew-resize;\\n}\\n.slider-track[data-orientation='vertical'] .slider-thumb {\\n cursor: ns-resize;\\n}\\n\\n.slider-pointer {\\n background-color: oklab(1 0 0 / 0.2);\\n border-radius: inherit;\\n}\\n\\n.slider-progress {\\n background-color: oklab(1 0 0);\\n border-radius: inherit;\\n}\\n\\nmedia-preview-time-display {\\n font-variant-numeric: tabular-nums;\\n}\\n\\n.popup-animation {\\n transition-property: transform, scale, opacity, filter;\\n transition-duration: 200ms;\\n transform: scale(1);\\n transform-origin: bottom;\\n opacity: 1;\\n filter: blur(0px);\\n}\\n.popup-animation[data-starting-style],\\n.popup-animation[data-ending-style] {\\n transform: scale(0);\\n opacity: 0;\\n filter: blur(8px);\\n}\\n.popup-animation[data-instant] {\\n transition-duration: 0ms;\\n}\\n\\nmedia-popover {\\n margin: 0;\\n border: none;\\n box-shadow: none;\\n background: transparent;\\n padding: 0.75rem 0.25rem;\\n border-radius: calc(infinity * 1px);\\n}\\n\\n/* Tooltip Component Styles */\\nmedia-tooltip {\\n margin: 0;\\n border: none;\\n box-shadow: none;\\n background: transparent;\\n color: oklab(1 0 0);\\n padding: 0.25rem 0.625rem;\\n border-radius: calc(infinity * 1px);\\n font-size: 0.75rem;\\n}\\n\\n.tooltip {\\n display: none;\\n white-space: nowrap;\\n}\\n\\n[data-paused] + media-tooltip .play-tooltip,\\n:not([data-paused]) + media-tooltip .pause-tooltip {\\n display: block;\\n}\\n\\n[data-fullscreen] + media-tooltip .fullscreen-exit-tooltip,\\n:not([data-fullscreen]) + media-tooltip .fullscreen-enter-tooltip {\\n display: block;\\n}\\n\"","import { MediaSkinElement } from '@/media/media-skin';\nimport { defineCustomElement } from '@/utils/custom-element';\nimport styles from './styles.css';\nimport '@/define/media-container';\nimport '@/define/media-provider';\nimport '@/define/media-play-button';\nimport '@/define/media-mute-button';\nimport '@/define/media-volume-slider';\nimport '@/define/media-time-slider';\nimport '@/define/media-fullscreen-button';\nimport '@/define/media-duration-display';\nimport '@/define/media-current-time-display';\nimport '@/define/media-preview-time-display';\nimport '@/define/media-popover';\nimport '@/define/media-tooltip';\nimport '@/icons';\n\nexport function getTemplateHTML() {\n return /* html */`\n ${MediaSkinElement.getTemplateHTML()}\n <style>${styles}</style>\n\n <media-container>\n <slot name=\"media\" slot=\"media\"></slot>\n\n <div class=\"overlay\"></div>\n\n <div class=\"control-bar surface\">\n <!-- NOTE: We can decide if we further want to provide a further, \"themed\" media-play-button that comes with baked in default styles and icons. (CJP) -->\n\n <media-play-button commandfor=\"play-tooltip\" class=\"button\">\n <media-play-icon class=\"icon play-icon\"></media-play-icon>\n <media-pause-icon class=\"icon pause-icon\"></media-pause-icon>\n </media-play-button>\n <media-tooltip\n id=\"play-tooltip\"\n class=\"surface popup-animation\"\n popover=\"manual\"\n delay=\"500\"\n side=\"top\"\n side-offset=\"12\"\n collision-padding=\"12\"\n >\n <span class=\"tooltip play-tooltip\">Play</span>\n <span class=\"tooltip pause-tooltip\">Pause</span>\n </media-tooltip>\n\n <div class=\"time-controls\">\n <!-- Use the show-remaining attribute to show count down/remaining time -->\n <media-current-time-display></media-current-time-display>\n\n <media-time-slider commandfor=\"time-slider-tooltip\" class=\"slider\">\n <media-time-slider-track class=\"slider-track\">\n <media-time-slider-progress class=\"slider-progress\"></media-time-slider-progress>\n <media-time-slider-pointer class=\"slider-pointer\"></media-time-slider-pointer>\n </media-time-slider-track>\n <media-time-slider-thumb class=\"slider-thumb\"></media-time-slider-thumb>\n </media-time-slider>\n <media-tooltip \n id=\"time-slider-tooltip\"\n class=\"surface popup-animation\"\n popover=\"manual\"\n track-cursor-axis=\"x\"\n side=\"top\"\n side-offset=\"18\"\n collision-padding=\"12\"\n >\n <media-preview-time-display></media-preview-time-display>\n </media-tooltip>\n\n <media-duration-display></media-duration-display>\n </div>\n\n <media-mute-button commandfor=\"volume-slider-popover\" command=\"toggle-popover\" class=\"button\">\n <media-volume-high-icon class=\"icon volume-high-icon\"></media-volume-high-icon>\n <media-volume-low-icon class=\"icon volume-low-icon\"></media-volume-low-icon>\n <media-volume-off-icon class=\"icon volume-off-icon\"></media-volume-off-icon>\n </media-mute-button>\n <media-popover \n id=\"volume-slider-popover\" \n class=\"surface popup-animation\" \n popover=\"manual\"\n open-on-hover\n delay=\"200\"\n close-delay=\"100\"\n side=\"top\"\n side-offset=\"12\"\n collision-padding=\"12\"\n >\n <media-volume-slider class=\"slider\" orientation=\"vertical\">\n <media-volume-slider-track class=\"slider-track\">\n <media-volume-slider-indicator class=\"slider-progress\"></media-volume-slider-indicator>\n </media-volume-slider-track>\n <media-volume-slider-thumb class=\"slider-thumb\"></media-volume-slider-thumb>\n </media-volume-slider>\n </media-popover>\n\n <media-fullscreen-button commandfor=\"fullscreen-tooltip\" class=\"button\">\n <media-fullscreen-enter-icon class=\"icon fullscreen-enter-icon\"></media-fullscreen-enter-icon>\n <media-fullscreen-exit-icon class=\"icon fullscreen-exit-icon\"></media-fullscreen-exit-icon>\n </media-fullscreen-button>\n <media-tooltip \n id=\"fullscreen-tooltip\"\n class=\"surface popup-animation\"\n popover=\"manual\"\n delay=\"500\"\n side=\"top\"\n side-offset=\"12\"\n collision-padding=\"12\"\n >\n <span class=\"tooltip fullscreen-enter-tooltip\">Enter Fullscreen</span>\n <span class=\"tooltip fullscreen-exit-tooltip\">Exit Fullscreen</span>\n </media-tooltip>\n </div>\n </media-container>\n `;\n}\n\nexport class MediaSkinFrostedElement extends MediaSkinElement {\n static getTemplateHTML: () => string = getTemplateHTML;\n}\n\ndefineCustomElement('media-skin-frosted', MediaSkinFrostedElement);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAAA;;;;ACiBA,SAAgB,kBAAkB;AAChC,QAAiB;MACb,iBAAiB,iBAAiB,CAAC;aAC5BA,eAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkGpB,IAAa,0BAAb,cAA6C,iBAAiB;;yBACrB;;;AAGzC,oBAAoB,sBAAsB,wBAAwB"}
|
|
1
|
+
{"version":3,"file":"frosted.js","names":["styles"],"sources":["../../src/skins/frosted/styles.css","../../src/skins/frosted/index.ts"],"sourcesContent":["\"media-container * {\\n box-sizing: border-box;\\n}\\n\\nmedia-container {\\n position: relative;\\n isolation: isolate;\\n container: root / inline-size;\\n overflow: clip;\\n font-size: 0.8125rem;\\n line-height: 1.5;\\n border-radius: inherit;\\n background: oklab(0 0 0);\\n}\\nmedia-container::before,\\nmedia-container::after {\\n content: '';\\n position: absolute;\\n pointer-events: none;\\n border-radius: inherit;\\n z-index: 10;\\n}\\nmedia-container::before {\\n inset: 1px;\\n box-shadow: inset 0 0 0 1px oklab(1 0 0 / 0.15);\\n}\\nmedia-container::after {\\n inset: 0;\\n box-shadow: inset 0 0 0 1px oklab(0 0 0 / 0.1);\\n}\\n\\n/* Fullscreen */\\nmedia-container:fullscreen {\\n border-radius: 0;\\n}\\n\\nmedia-container > ::slotted([slot='media']) {\\n display: block;\\n width: 100%;\\n height: 100%;\\n}\\n\\n/* Media Container UI Overlay Styling */\\nmedia-container > .overlay {\\n position: absolute;\\n inset: 0;\\n display: flex;\\n flex-flow: column nowrap;\\n align-items: start;\\n pointer-events: none;\\n border-radius: inherit;\\n background-image: linear-gradient(to top, oklab(0 0 0 / 0.5), oklab(0 0 0 / 0.3), rgba(0, 0, 0, 0));\\n backdrop-filter: saturate(1.5) brightness(0.9);\\n transition: opacity 0.15s ease-out;\\n transition-delay: 500ms;\\n opacity: 0;\\n}\\nmedia-container:hover > .overlay,\\nmedia-container:has([data-paused]) > .overlay,\\nmedia-container:has([aria-expanded='true']) > .overlay {\\n opacity: 1;\\n transition-duration: 100ms;\\n transition-delay: 0ms;\\n}\\n\\n/* Common Surface Styles - e.g. tooltips, popovers, controls */\\n.surface {\\n background-color: oklab(1 0 0 / 0.1);\\n backdrop-filter: blur(64px) brightness(0.9) saturate(1.5);\\n box-shadow:\\n inset 0 0 0 1px oklab(1 0 0 / 0.15),\\n 0 0 0 1px oklab(0 0 0 / 0.15),\\n oklab(0 0 0 / 0.15) 0px 1px 3px 0px,\\n oklab(0 0 0 / 0.15) 0px 1px 2px -1px;\\n}\\n@media (prefers-reduced-transparency: reduce) {\\n .surface {\\n background-color: oklab(0 0 0 / 0.7);\\n box-shadow:\\n inset 0 0 0 1px oklab(0 0 0),\\n 0 0 0 1px oklab(1 0 0 / 0.2);\\n }\\n}\\n@media (prefers-contrast: more) {\\n .surface {\\n background-color: oklab(0 0 0 / 0.9);\\n box-shadow:\\n inset 0 0 0 1px oklab(0 0 0),\\n 0 0 0 1px oklab(1 0 0 / 0.2);\\n }\\n}\\n\\n/* Media Control Bar UI/Styles */\\n.control-bar {\\n position: absolute;\\n bottom: 0.75rem;\\n inset-inline: 0.75rem;\\n padding: 0.25rem;\\n display: flex;\\n align-items: center;\\n gap: 0.125rem;\\n border-radius: calc(infinity * 1px);\\n will-change: scale, transform, filter, opacity;\\n scale: 0.9;\\n opacity: 0;\\n filter: blur(8px);\\n transition-property: scale, transform, filter, opacity;\\n transition-delay: 500ms;\\n transition-duration: 300ms;\\n transition-timing-function: ease-out;\\n transform-origin: bottom;\\n color: oklab(1 0 0);\\n}\\nmedia-container:hover > .control-bar,\\nmedia-container:has([data-paused]) > .control-bar,\\nmedia-container:has([aria-expanded='true']) > .control-bar {\\n opacity: 1;\\n scale: 1;\\n filter: blur(0px);\\n transition-delay: 0ms;\\n transition-duration: 100ms;\\n}\\n\\n/* Time Display Styling */\\n.time-controls {\\n display: flex;\\n align-items: center;\\n flex: 1;\\n gap: 0.75rem;\\n padding-inline: 0.375rem;\\n}\\nmedia-current-time-display,\\nmedia-duration-display {\\n text-shadow: 0 1px 0 oklab(0 0 0 / 0.25);\\n font-variant-numeric: tabular-nums;\\n}\\n\\n/* Generic Media Button Styling */\\n.button {\\n display: grid;\\n flex-shrink: 0;\\n padding: 0.5rem;\\n cursor: pointer;\\n background: transparent;\\n border: none;\\n border-radius: calc(infinity * 1px);\\n color: oklab(1 0 0 / 0.9);\\n user-select: none;\\n outline: 2px solid transparent;\\n outline-offset: -2px;\\n transition-property: background-color, color, outline-offset;\\n transition-duration: 150ms;\\n transition-timing-function: ease-out;\\n}\\n.button:hover,\\n.button:focus-visible,\\n.button[aria-expanded='true'] {\\n background-color: oklab(1 0 0 / 0.1);\\n color: oklab(1 0 0);\\n text-decoration: none;\\n}\\n.button:focus-visible {\\n outline-color: oklch(62.3% 0.214 259.815);\\n outline-offset: 2px;\\n}\\n.button[disabled] {\\n cursor: not-allowed;\\n opacity: 0.5;\\n filter: grayscale(1);\\n}\\n\\n.button .icon {\\n grid-area: 1 / 1;\\n width: 18px;\\n height: 18px;\\n filter: drop-shadow(0 1px 0 oklab(0 0 0 / 0.25));\\n}\\n\\n/* Media Play Button UI/Styles */\\nmedia-play-button .icon {\\n opacity: 0;\\n transition: opacity 150ms linear;\\n}\\n\\nmedia-play-button:not([data-paused]) .pause-icon,\\nmedia-play-button[data-paused] .play-icon {\\n opacity: 1;\\n}\\n\\n/* Media Fullscreen Button UI/Styles */\\nmedia-fullscreen-button .icon {\\n display: none;\\n}\\nmedia-fullscreen-button:not([data-fullscreen]) .fullscreen-enter-icon,\\nmedia-fullscreen-button[data-fullscreen] .fullscreen-exit-icon {\\n display: inline;\\n}\\n\\n/* One way to define the \\\"default visible\\\" icon (CJP) */\\nmedia-mute-button .icon {\\n display: none;\\n}\\nmedia-mute-button:not([data-volume-level]) .volume-low-icon,\\nmedia-mute-button[data-volume-level='high'] .volume-high-icon,\\nmedia-mute-button[data-volume-level='low'] .volume-low-icon,\\nmedia-mute-button[data-volume-level='medium'] .volume-low-icon,\\nmedia-mute-button[data-volume-level='off'] .volume-off-icon {\\n display: inline;\\n}\\n\\n/* TimeSlider Component Styles */\\n.slider {\\n flex: 1;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n position: relative;\\n border-radius: calc(infinity * 1px);\\n outline: none;\\n}\\n\\n/* Horizontal orientation styles */\\n.slider[data-orientation='horizontal'] {\\n min-width: 5rem;\\n width: 100%;\\n height: 1.25rem;\\n}\\n\\n/* Vertical orientation styles */\\n.slider[data-orientation='vertical'] {\\n height: 5rem;\\n width: 1.25rem;\\n}\\n\\n.slider-track {\\n position: relative;\\n isolation: isolate;\\n background-color: oklab(1 0 0 / 0.2);\\n border-radius: inherit;\\n overflow: hidden;\\n user-select: none;\\n outline: 2px solid transparent;\\n outline-offset: -2px;\\n transition: outline-offset 150ms ease-out;\\n box-shadow: 0 0 0 1px oklab(0 0 0 / 0.05);\\n}\\n\\n/* Horizontal track styles */\\n.slider-track[data-orientation='horizontal'] {\\n width: 100%;\\n height: 0.25rem;\\n}\\n\\n/* Vertical track styles */\\n.slider-track[data-orientation='vertical'] {\\n width: 0.25rem;\\n height: 100%;\\n}\\n\\n.slider:focus-visible .slider-track {\\n outline-color: oklch(62.3% 0.214 259.815);\\n outline-offset: 6px;\\n}\\n\\n.slider-thumb {\\n width: 0.625rem;\\n height: 0.625rem;\\n background-color: oklab(1 0 0);\\n border-radius: calc(infinity * 1px);\\n user-select: none;\\n z-index: 10;\\n box-shadow:\\n 0 0 0 1px oklab(0 0 0 / 0.1),\\n 0 1px 3px 0 oklab(0 0 0 / 0.15),\\n 0 1px 2px -1px oklab(0 0 0 / 0.15);\\n opacity: 0;\\n transition-property: opacity, height, width;\\n transition-duration: 150ms;\\n transition-timing-function: ease-out;\\n}\\n.slider-thumb:active {\\n width: 0.75rem;\\n height: 0.75rem;\\n}\\n.slider:hover .slider-thumb,\\n.slider:focus-within .slider-thumb {\\n opacity: 1;\\n}\\n.slider-track[data-orientation='horizontal'] .slider-thumb {\\n cursor: ew-resize;\\n}\\n.slider-track[data-orientation='vertical'] .slider-thumb {\\n cursor: ns-resize;\\n}\\n\\n.slider-pointer {\\n background-color: oklab(1 0 0 / 0.2);\\n border-radius: inherit;\\n}\\n\\n.slider-progress {\\n background-color: oklab(1 0 0);\\n border-radius: inherit;\\n}\\n\\nmedia-preview-time-display {\\n font-variant-numeric: tabular-nums;\\n}\\n\\n.popup-animation {\\n transition-property: transform, scale, opacity, filter;\\n transition-duration: 200ms;\\n transform: scale(1);\\n transform-origin: bottom;\\n opacity: 1;\\n filter: blur(0px);\\n}\\n.popup-animation[data-starting-style],\\n.popup-animation[data-ending-style] {\\n transform: scale(0);\\n opacity: 0;\\n filter: blur(8px);\\n}\\n.popup-animation[data-instant] {\\n transition-duration: 0ms;\\n}\\n\\nmedia-popover {\\n margin: 0;\\n border: none;\\n box-shadow: none;\\n background: transparent;\\n padding: 0.75rem 0.25rem;\\n border-radius: calc(infinity * 1px);\\n}\\n\\n/* Tooltip Component Styles */\\nmedia-tooltip {\\n margin: 0;\\n border: none;\\n box-shadow: none;\\n background: transparent;\\n color: oklab(1 0 0);\\n padding: 0.25rem 0.625rem;\\n border-radius: calc(infinity * 1px);\\n font-size: 0.75rem;\\n}\\n\\n.tooltip {\\n display: none;\\n white-space: nowrap;\\n}\\n\\n[data-paused] + media-tooltip .play-tooltip,\\n:not([data-paused]) + media-tooltip .pause-tooltip {\\n display: block;\\n}\\n\\n[data-fullscreen] + media-tooltip .fullscreen-exit-tooltip,\\n:not([data-fullscreen]) + media-tooltip .fullscreen-enter-tooltip {\\n display: block;\\n}\\n\"","import { MediaSkinElement } from '@/media/media-skin';\nimport { defineCustomElement } from '@/utils/custom-element';\nimport styles from './styles.css';\nimport '@/define/media-container';\nimport '@/define/video-provider';\nimport '@/define/media-play-button';\nimport '@/define/media-mute-button';\nimport '@/define/media-volume-slider';\nimport '@/define/media-time-slider';\nimport '@/define/media-fullscreen-button';\nimport '@/define/media-duration-display';\nimport '@/define/media-current-time-display';\nimport '@/define/media-preview-time-display';\nimport '@/define/media-popover';\nimport '@/define/media-tooltip';\nimport '@/icons';\n\nexport function getTemplateHTML() {\n return /* html */`\n ${MediaSkinElement.getTemplateHTML()}\n <style>${styles}</style>\n\n <media-container>\n <slot name=\"media\" slot=\"media\"></slot>\n\n <div class=\"overlay\"></div>\n\n <div class=\"control-bar surface\">\n <!-- NOTE: We can decide if we further want to provide a further, \"themed\" media-play-button that comes with baked in default styles and icons. (CJP) -->\n\n <media-play-button commandfor=\"play-tooltip\" class=\"button\">\n <media-play-icon class=\"icon play-icon\"></media-play-icon>\n <media-pause-icon class=\"icon pause-icon\"></media-pause-icon>\n </media-play-button>\n <media-tooltip\n id=\"play-tooltip\"\n class=\"surface popup-animation\"\n popover=\"manual\"\n delay=\"500\"\n side=\"top\"\n side-offset=\"12\"\n collision-padding=\"12\"\n >\n <span class=\"tooltip play-tooltip\">Play</span>\n <span class=\"tooltip pause-tooltip\">Pause</span>\n </media-tooltip>\n\n <div class=\"time-controls\">\n <!-- Use the show-remaining attribute to show count down/remaining time -->\n <media-current-time-display></media-current-time-display>\n\n <media-time-slider commandfor=\"time-slider-tooltip\" class=\"slider\">\n <media-time-slider-track class=\"slider-track\">\n <media-time-slider-progress class=\"slider-progress\"></media-time-slider-progress>\n <media-time-slider-pointer class=\"slider-pointer\"></media-time-slider-pointer>\n </media-time-slider-track>\n <media-time-slider-thumb class=\"slider-thumb\"></media-time-slider-thumb>\n </media-time-slider>\n <media-tooltip\n id=\"time-slider-tooltip\"\n class=\"surface popup-animation\"\n popover=\"manual\"\n track-cursor-axis=\"x\"\n side=\"top\"\n side-offset=\"18\"\n collision-padding=\"12\"\n >\n <media-preview-time-display></media-preview-time-display>\n </media-tooltip>\n\n <media-duration-display></media-duration-display>\n </div>\n\n <media-mute-button commandfor=\"volume-slider-popover\" command=\"toggle-popover\" class=\"button\">\n <media-volume-high-icon class=\"icon volume-high-icon\"></media-volume-high-icon>\n <media-volume-low-icon class=\"icon volume-low-icon\"></media-volume-low-icon>\n <media-volume-off-icon class=\"icon volume-off-icon\"></media-volume-off-icon>\n </media-mute-button>\n <media-popover\n id=\"volume-slider-popover\"\n class=\"surface popup-animation\"\n popover=\"manual\"\n open-on-hover\n delay=\"200\"\n close-delay=\"100\"\n side=\"top\"\n side-offset=\"12\"\n collision-padding=\"12\"\n >\n <media-volume-slider class=\"slider\" orientation=\"vertical\">\n <media-volume-slider-track class=\"slider-track\">\n <media-volume-slider-indicator class=\"slider-progress\"></media-volume-slider-indicator>\n </media-volume-slider-track>\n <media-volume-slider-thumb class=\"slider-thumb\"></media-volume-slider-thumb>\n </media-volume-slider>\n </media-popover>\n\n <media-fullscreen-button commandfor=\"fullscreen-tooltip\" class=\"button\">\n <media-fullscreen-enter-icon class=\"icon fullscreen-enter-icon\"></media-fullscreen-enter-icon>\n <media-fullscreen-exit-icon class=\"icon fullscreen-exit-icon\"></media-fullscreen-exit-icon>\n </media-fullscreen-button>\n <media-tooltip\n id=\"fullscreen-tooltip\"\n class=\"surface popup-animation\"\n popover=\"manual\"\n delay=\"500\"\n side=\"top\"\n side-offset=\"12\"\n collision-padding=\"12\"\n >\n <span class=\"tooltip fullscreen-enter-tooltip\">Enter Fullscreen</span>\n <span class=\"tooltip fullscreen-exit-tooltip\">Exit Fullscreen</span>\n </media-tooltip>\n </div>\n </media-container>\n `;\n}\n\nexport class MediaSkinFrostedElement extends MediaSkinElement {\n static getTemplateHTML: () => string = getTemplateHTML;\n}\n\ndefineCustomElement('media-skin-frosted', MediaSkinFrostedElement);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAAA;;;;ACiBA,SAAgB,kBAAkB;AAChC,QAAiB;MACb,iBAAiB,iBAAiB,CAAC;aAC5BA,eAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkGpB,IAAa,0BAAb,cAA6C,iBAAiB;;yBACrB;;;AAGzC,oBAAoB,sBAAsB,wBAAwB"}
|
package/dist/skins/minimal.d.ts
CHANGED
package/dist/skins/minimal.js
CHANGED
|
@@ -11,12 +11,12 @@ import "../time-slider-CA1GMs6A.js";
|
|
|
11
11
|
import "../tooltip-CJpujx2f.js";
|
|
12
12
|
import "../volume-slider-guD8gqpi.js";
|
|
13
13
|
import "../media-container-C0MUzkJ_.js";
|
|
14
|
-
import "../media-
|
|
15
|
-
import
|
|
14
|
+
import { t as MediaSkinElement } from "../media-skin-CxnuHwhu.js";
|
|
15
|
+
import "../video-provider-BKDqoKFf.js";
|
|
16
16
|
import { t as defineCustomElement } from "../custom-element-3bDlB2XO.js";
|
|
17
17
|
import "../icons-CuxuONCk.js";
|
|
18
18
|
import "../media-container-BGEXSi9g.js";
|
|
19
|
-
import "../
|
|
19
|
+
import "../video-provider-BCGedOLm.js";
|
|
20
20
|
import "../media-play-button-CLj-hkwn.js";
|
|
21
21
|
import "../media-mute-button-BOVhZ3aP.js";
|
|
22
22
|
import "../media-volume-slider-CKSxmdQv.js";
|
|
@@ -80,7 +80,7 @@ function getTemplateHTML() {
|
|
|
80
80
|
</media-time-slider-track>
|
|
81
81
|
<media-time-slider-thumb class="slider-thumb"></media-time-slider-thumb>
|
|
82
82
|
</media-time-slider>
|
|
83
|
-
<media-tooltip
|
|
83
|
+
<media-tooltip
|
|
84
84
|
id="time-slider-tooltip"
|
|
85
85
|
class="popup-animation"
|
|
86
86
|
popover="manual"
|
|
@@ -98,8 +98,8 @@ function getTemplateHTML() {
|
|
|
98
98
|
<media-volume-low-icon class="icon volume-low-icon"></media-volume-low-icon>
|
|
99
99
|
<media-volume-off-icon class="icon volume-off-icon"></media-volume-off-icon>
|
|
100
100
|
</media-mute-button>
|
|
101
|
-
<media-popover
|
|
102
|
-
id="volume-slider-popover"
|
|
101
|
+
<media-popover
|
|
102
|
+
id="volume-slider-popover"
|
|
103
103
|
class="popup-animation"
|
|
104
104
|
popover="manual"
|
|
105
105
|
open-on-hover
|
|
@@ -121,8 +121,8 @@ function getTemplateHTML() {
|
|
|
121
121
|
<media-fullscreen-enter-alt-icon class="icon fullscreen-enter-icon"></media-fullscreen-enter-alt-icon>
|
|
122
122
|
<media-fullscreen-exit-alt-icon class="icon fullscreen-exit-icon"></media-fullscreen-exit-icon>
|
|
123
123
|
</media-fullscreen-button>
|
|
124
|
-
<media-tooltip
|
|
125
|
-
id="fullscreen-tooltip"
|
|
124
|
+
<media-tooltip
|
|
125
|
+
id="fullscreen-tooltip"
|
|
126
126
|
class="popup-animation"
|
|
127
127
|
popover="manual"
|
|
128
128
|
delay="500"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"minimal.js","names":["styles"],"sources":["../../src/skins/minimal/styles.css","../../src/skins/minimal/index.ts"],"sourcesContent":["\"media-container * {\\n box-sizing: border-box;\\n}\\n\\nmedia-container {\\n position: relative;\\n isolation: isolate;\\n container: root / inline-size;\\n overflow: clip;\\n font-size: 0.8125rem;\\n line-height: 1.5;\\n border-radius: inherit;\\n background: oklab(0 0 0);\\n}\\nmedia-container::after {\\n content: '';\\n position: absolute;\\n pointer-events: none;\\n border-radius: inherit;\\n z-index: 10;\\n inset: 0;\\n box-shadow: inset 0 0 0 1px oklab(0 0 0 / 0.2);\\n}\\n@media (prefers-color-scheme: dark) {\\n media-container::after {\\n box-shadow: inset 0 0 0 1px oklab(1 0 0 / 0.2);\\n }\\n}\\n\\n/* Fullscreen */\\nmedia-container:fullscreen {\\n border-radius: 0;\\n}\\n\\nmedia-container > ::slotted([slot='media']) {\\n display: block;\\n width: 100%;\\n height: 100%;\\n}\\n\\n/* Media Container UI Overlay Styling */\\nmedia-container > .overlay {\\n position: absolute;\\n inset: 0;\\n display: flex;\\n flex-flow: column nowrap;\\n align-items: start;\\n pointer-events: none;\\n border-radius: inherit;\\n background-image: linear-gradient(to top, oklab(0 0 0 / 0.7), oklab(0 0 0 / 0.5) 7.5rem, rgba(0, 0, 0, 0));\\n transform: translateY(100%);\\n transition-property: transform, opacity;\\n transition-duration: 150ms;\\n transition-timing-function: ease-out;\\n transition-delay: 500ms;\\n opacity: 0;\\n}\\nmedia-container:hover > .overlay,\\nmedia-container:has([data-paused]) > .overlay,\\nmedia-container:has([aria-expanded='true']) > .overlay {\\n opacity: 1;\\n transform: translateY(0);\\n transition-duration: 100ms;\\n transition-delay: 0ms;\\n}\\n\\n/* Media Control Bar UI/Styles */\\n.control-bar {\\n position: absolute;\\n bottom: 0;\\n inset-inline: 0;\\n padding: 2.5rem 0.75rem 0.75rem 0.75rem;\\n display: flex;\\n align-items: center;\\n gap: 0.875rem;\\n will-change: transform, filter, opacity;\\n transform: translateY(100%);\\n opacity: 0;\\n filter: blur(8px);\\n transition-property: transform, filter, opacity;\\n transition-delay: 500ms;\\n transition-duration: 300ms;\\n transition-timing-function: ease-out;\\n color: oklab(1 0 0);\\n}\\nmedia-container:hover > .control-bar,\\nmedia-container:has([data-paused]) > .control-bar,\\nmedia-container:has([aria-expanded='true']) > .control-bar {\\n opacity: 1;\\n transform: translateY(0);\\n filter: blur(0px);\\n transition-delay: 0ms;\\n transition-duration: 100ms;\\n}\\n\\n/* Time Display Styling */\\n.time-display-group {\\n display: flex;\\n align-items: center;\\n gap: 0.25rem;\\n}\\n.duration-display {\\n display: contents;\\n color: oklab(1 0 0 / 0.5);\\n}\\nmedia-current-time-display,\\nmedia-duration-display {\\n text-shadow: 0 1px 0 oklab(0 0 0 / 0.2);\\n font-variant-numeric: tabular-nums;\\n}\\n\\n.button-group {\\n display: flex;\\n align-items: center;\\n gap: 0.375rem;\\n}\\n\\n/* Generic Media Button Styling */\\n.button {\\n display: grid;\\n flex-shrink: 0;\\n padding: 0.625rem;\\n cursor: pointer;\\n background: transparent;\\n border: none;\\n border-radius: 0.375rem;\\n color: oklab(1 0 0);\\n user-select: none;\\n outline: 2px solid transparent;\\n outline-offset: -2px;\\n transition-property: background-color, color, outline-offset;\\n transition-duration: 150ms;\\n transition-timing-function: ease-out;\\n}\\n.button:hover,\\n.button:focus-visible,\\n.button[aria-expanded='true'] {\\n color: oklab(1 0 0 / 0.8);\\n text-decoration: none;\\n}\\n.button:focus-visible {\\n outline-color: oklab(1 0 0);\\n outline-offset: 2px;\\n}\\n.button[disabled] {\\n cursor: not-allowed;\\n opacity: 0.5;\\n filter: grayscale(1);\\n}\\n\\n.button .icon {\\n grid-area: 1 / 1;\\n width: 18px;\\n height: 18px;\\n filter: drop-shadow(0 1px 0 oklab(0 0 0 / 0.4));\\n}\\n\\n/* Media Play Button UI/Styles */\\nmedia-play-button .icon {\\n opacity: 0;\\n transition: opacity 150ms linear;\\n}\\n\\nmedia-play-button:not([data-paused]) .pause-icon,\\nmedia-play-button[data-paused] .play-icon {\\n opacity: 1;\\n}\\n\\n/* Media Fullscreen Button UI/Styles */\\nmedia-fullscreen-button .icon {\\n display: none;\\n}\\nmedia-fullscreen-button:not([data-fullscreen]) .fullscreen-enter-icon,\\nmedia-fullscreen-button[data-fullscreen] .fullscreen-exit-icon {\\n display: inline;\\n}\\n\\n/* One way to define the \\\"default visible\\\" icon (CJP) */\\nmedia-mute-button .icon {\\n display: none;\\n}\\nmedia-mute-button:not([data-volume-level]) .volume-low-icon,\\nmedia-mute-button[data-volume-level='high'] .volume-high-icon,\\nmedia-mute-button[data-volume-level='low'] .volume-low-icon,\\nmedia-mute-button[data-volume-level='medium'] .volume-low-icon,\\nmedia-mute-button[data-volume-level='off'] .volume-off-icon {\\n display: inline;\\n}\\n\\n/* TimeSlider Component Styles */\\n.slider {\\n flex: 1;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n position: relative;\\n border-radius: calc(infinity * 1px);\\n outline: none;\\n}\\n\\n/* Horizontal orientation styles */\\n.slider[data-orientation='horizontal'] {\\n min-width: 5rem;\\n width: 100%;\\n height: 1.25rem;\\n}\\n\\n/* Vertical orientation styles */\\n.slider[data-orientation='vertical'] {\\n height: 4.5rem;\\n width: 1.25rem;\\n}\\n\\n.slider-track {\\n position: relative;\\n isolation: isolate;\\n background-color: oklab(1 0 0 / 0.2);\\n border-radius: inherit;\\n overflow: hidden;\\n user-select: none;\\n outline: 2px solid transparent;\\n outline-offset: -2px;\\n transition: outline-offset 150ms ease-out;\\n box-shadow: 0 0 0 1px oklab(0 0 0 / 0.05);\\n}\\n\\n/* Horizontal track styles */\\n.slider-track[data-orientation='horizontal'] {\\n width: 100%;\\n height: 0.1875rem;\\n}\\n\\n/* Vertical track styles */\\n.slider-track[data-orientation='vertical'] {\\n width: 0.1875rem;\\n height: 100%;\\n}\\n\\n.slider:focus-visible .slider-track {\\n outline-color: oklab(1 0 0);\\n outline-offset: 6px;\\n}\\n\\n.slider-thumb {\\n width: 0.75rem;\\n height: 0.75rem;\\n background-color: oklab(1 0 0);\\n border-radius: calc(infinity * 1px);\\n user-select: none;\\n z-index: 10;\\n box-shadow:\\n 0 0 0 1px oklab(0 0 0 / 0.1),\\n 0 1px 3px 0 oklab(0 0 0 / 0.15),\\n 0 1px 2px -1px oklab(0 0 0 / 0.15);\\n opacity: 0;\\n scale: 0.7;\\n transform-origin: center;\\n transition-property: opacity, scale;\\n transition-duration: 150ms;\\n transition-timing-function: ease-out;\\n}\\n.slider:hover .slider-thumb,\\n.slider:focus-within .slider-thumb {\\n opacity: 1;\\n scale: 1;\\n}\\n.slider-track[data-orientation='horizontal'] .slider-thumb {\\n cursor: ew-resize;\\n}\\n.slider-track[data-orientation='vertical'] .slider-thumb {\\n cursor: ns-resize;\\n}\\n\\n.slider-pointer {\\n display: none;\\n}\\n\\n.slider-progress {\\n background-color: oklab(1 0 0);\\n border-radius: inherit;\\n}\\n\\nmedia-preview-time-display {\\n font-variant-numeric: tabular-nums;\\n}\\n\\n.popup-animation {\\n transition-property: transform, scale, opacity, filter;\\n transition-duration: 200ms;\\n transform: scale(1);\\n transform-origin: bottom;\\n opacity: 1;\\n filter: blur(0px);\\n}\\n.popup-animation[data-starting-style],\\n.popup-animation[data-ending-style] {\\n transform: scale(0);\\n opacity: 0;\\n filter: blur(8px);\\n}\\n.popup-animation[data-instant] {\\n transition-duration: 0ms;\\n}\\n\\nmedia-popover {\\n margin: 0;\\n border: none;\\n box-shadow: none;\\n background: transparent;\\n padding: 0.75rem 0.25rem;\\n border-radius: calc(infinity * 1px);\\n}\\n\\n/* Tooltip Component Styles */\\nmedia-tooltip {\\n margin: 0;\\n border: none;\\n box-shadow: none;\\n background: transparent;\\n color: oklab(1 0 0);\\n padding: 0.25rem 0.5rem;\\n border-radius: 0.25rem;\\n font-size: 0.75rem;\\n background-color: oklab(1 0 0 / 0.1);\\n backdrop-filter: blur(64px) brightness(0.9) saturate(1.5);\\n box-shadow:\\n 0 4px 6px -1px oklab(0 0 0 / 0.1),\\n 0 2px 4px -2px oklab(0 0 0 / 0.1);\\n}\\n@media (prefers-reduced-transparency: reduce) {\\n media-tooltip {\\n background-color: oklab(0 0 0 / 0.7);\\n }\\n}\\n@media (prefers-contrast: more) {\\n media-tooltip {\\n background-color: oklab(0 0 0 / 0.9);\\n }\\n}\\n\\n.tooltip {\\n display: none;\\n white-space: nowrap;\\n}\\n\\n[data-paused] + media-tooltip .play-tooltip,\\n:not([data-paused]) + media-tooltip .pause-tooltip {\\n display: block;\\n}\\n\\n[data-fullscreen] + media-tooltip .fullscreen-exit-tooltip,\\n:not([data-fullscreen]) + media-tooltip .fullscreen-enter-tooltip {\\n display: block;\\n}\\n\"","import { MediaSkinElement } from '@/media/media-skin';\nimport { defineCustomElement } from '@/utils/custom-element';\nimport styles from './styles.css';\nimport '@/define/media-container';\nimport '@/define/media-provider';\nimport '@/define/media-play-button';\nimport '@/define/media-mute-button';\nimport '@/define/media-volume-slider';\nimport '@/define/media-time-slider';\nimport '@/define/media-fullscreen-button';\nimport '@/define/media-duration-display';\nimport '@/define/media-current-time-display';\nimport '@/define/media-preview-time-display';\nimport '@/define/media-popover';\n\nimport '@/define/media-tooltip';\nimport '@/icons';\n\nexport function getTemplateHTML() {\n return /* html */`\n ${MediaSkinElement.getTemplateHTML()}\n <style>${styles}</style>\n\n <media-container>\n <slot name=\"media\" slot=\"media\"></slot>\n\n <div class=\"overlay\"></div>\n\n <div class=\"control-bar\">\n <!-- NOTE: We can decide if we further want to provide a further, \"themed\" media-play-button that comes with baked in default styles and icons. (CJP) -->\n\n <media-play-button commandfor=\"play-tooltip\" class=\"button\">\n <media-play-icon class=\"icon play-icon\"></media-play-icon>\n <media-pause-icon class=\"icon pause-icon\"></media-pause-icon>\n </media-play-button>\n <media-tooltip\n id=\"play-tooltip\"\n class=\"popup-animation\"\n popover=\"manual\"\n delay=\"500\"\n side=\"top\"\n side-offset=\"6\"\n collision-padding=\"12\"\n >\n <span class=\"tooltip play-tooltip\">Play</span>\n <span class=\"tooltip pause-tooltip\">Pause</span>\n </media-tooltip>\n\n <div class=\"time-display-group\">\n <!-- Use the show-remaining attribute to show count down/remaining time -->\n <media-current-time-display></media-current-time-display>\n\n <span class=\"duration-display\">\n /\n <media-duration-display></media-duration-display>\n </span>\n </div>\n\n <media-time-slider commandfor=\"time-slider-tooltip\" class=\"slider\">\n <media-time-slider-track class=\"slider-track\">\n <media-time-slider-progress class=\"slider-progress\"></media-time-slider-progress>\n <media-time-slider-pointer class=\"slider-pointer\"></media-time-slider-pointer>\n </media-time-slider-track>\n <media-time-slider-thumb class=\"slider-thumb\"></media-time-slider-thumb>\n </media-time-slider>\n <media-tooltip \n id=\"time-slider-tooltip\"\n class=\"popup-animation\"\n popover=\"manual\"\n track-cursor-axis=\"x\"\n side=\"top\"\n side-offset=\"12\"\n collision-padding=\"12\"\n >\n <media-preview-time-display></media-preview-time-display>\n </media-tooltip>\n\n <div class=\"button-group\">\n <media-mute-button commandfor=\"volume-slider-popover\" command=\"toggle-popover\" class=\"button\">\n <media-volume-high-icon class=\"icon volume-high-icon\"></media-volume-high-icon>\n <media-volume-low-icon class=\"icon volume-low-icon\"></media-volume-low-icon>\n <media-volume-off-icon class=\"icon volume-off-icon\"></media-volume-off-icon>\n </media-mute-button>\n <media-popover \n id=\"volume-slider-popover\" \n class=\"popup-animation\"\n popover=\"manual\"\n open-on-hover\n delay=\"200\"\n close-delay=\"100\"\n side=\"top\"\n side-offset=\"2\"\n collision-padding=\"12\"\n >\n <media-volume-slider class=\"slider\" orientation=\"vertical\">\n <media-volume-slider-track class=\"slider-track\">\n <media-volume-slider-indicator class=\"slider-progress\"></media-volume-slider-indicator>\n </media-volume-slider-track>\n <media-volume-slider-thumb class=\"slider-thumb\"></media-volume-slider-thumb>\n </media-volume-slider>\n </media-popover>\n\n <media-fullscreen-button commandfor=\"fullscreen-tooltip\" class=\"button\">\n <media-fullscreen-enter-alt-icon class=\"icon fullscreen-enter-icon\"></media-fullscreen-enter-alt-icon>\n <media-fullscreen-exit-alt-icon class=\"icon fullscreen-exit-icon\"></media-fullscreen-exit-icon>\n </media-fullscreen-button>\n <media-tooltip \n id=\"fullscreen-tooltip\" \n class=\"popup-animation\"\n popover=\"manual\"\n delay=\"500\"\n side=\"top\"\n side-offset=\"6\"\n collision-padding=\"12\"\n >\n <span class=\"tooltip fullscreen-enter-tooltip\">Enter Fullscreen</span>\n <span class=\"tooltip fullscreen-exit-tooltip\">Exit Fullscreen</span>\n </media-tooltip>\n </div>\n </div>\n </media-container>\n `;\n}\n\nexport class MediaSkinMinimalElement extends MediaSkinElement {\n static getTemplateHTML: () => string = getTemplateHTML;\n}\n\ndefineCustomElement('media-skin-minimal', MediaSkinMinimalElement);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAAA;;;;ACkBA,SAAgB,kBAAkB;AAChC,QAAiB;MACb,iBAAiB,iBAAiB,CAAC;aAC5BA,eAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuGpB,IAAa,0BAAb,cAA6C,iBAAiB;;yBACrB;;;AAGzC,oBAAoB,sBAAsB,wBAAwB"}
|
|
1
|
+
{"version":3,"file":"minimal.js","names":["styles"],"sources":["../../src/skins/minimal/styles.css","../../src/skins/minimal/index.ts"],"sourcesContent":["\"media-container * {\\n box-sizing: border-box;\\n}\\n\\nmedia-container {\\n position: relative;\\n isolation: isolate;\\n container: root / inline-size;\\n overflow: clip;\\n font-size: 0.8125rem;\\n line-height: 1.5;\\n border-radius: inherit;\\n background: oklab(0 0 0);\\n}\\nmedia-container::after {\\n content: '';\\n position: absolute;\\n pointer-events: none;\\n border-radius: inherit;\\n z-index: 10;\\n inset: 0;\\n box-shadow: inset 0 0 0 1px oklab(0 0 0 / 0.2);\\n}\\n@media (prefers-color-scheme: dark) {\\n media-container::after {\\n box-shadow: inset 0 0 0 1px oklab(1 0 0 / 0.2);\\n }\\n}\\n\\n/* Fullscreen */\\nmedia-container:fullscreen {\\n border-radius: 0;\\n}\\n\\nmedia-container > ::slotted([slot='media']) {\\n display: block;\\n width: 100%;\\n height: 100%;\\n}\\n\\n/* Media Container UI Overlay Styling */\\nmedia-container > .overlay {\\n position: absolute;\\n inset: 0;\\n display: flex;\\n flex-flow: column nowrap;\\n align-items: start;\\n pointer-events: none;\\n border-radius: inherit;\\n background-image: linear-gradient(to top, oklab(0 0 0 / 0.7), oklab(0 0 0 / 0.5) 7.5rem, rgba(0, 0, 0, 0));\\n transform: translateY(100%);\\n transition-property: transform, opacity;\\n transition-duration: 150ms;\\n transition-timing-function: ease-out;\\n transition-delay: 500ms;\\n opacity: 0;\\n}\\nmedia-container:hover > .overlay,\\nmedia-container:has([data-paused]) > .overlay,\\nmedia-container:has([aria-expanded='true']) > .overlay {\\n opacity: 1;\\n transform: translateY(0);\\n transition-duration: 100ms;\\n transition-delay: 0ms;\\n}\\n\\n/* Media Control Bar UI/Styles */\\n.control-bar {\\n position: absolute;\\n bottom: 0;\\n inset-inline: 0;\\n padding: 2.5rem 0.75rem 0.75rem 0.75rem;\\n display: flex;\\n align-items: center;\\n gap: 0.875rem;\\n will-change: transform, filter, opacity;\\n transform: translateY(100%);\\n opacity: 0;\\n filter: blur(8px);\\n transition-property: transform, filter, opacity;\\n transition-delay: 500ms;\\n transition-duration: 300ms;\\n transition-timing-function: ease-out;\\n color: oklab(1 0 0);\\n}\\nmedia-container:hover > .control-bar,\\nmedia-container:has([data-paused]) > .control-bar,\\nmedia-container:has([aria-expanded='true']) > .control-bar {\\n opacity: 1;\\n transform: translateY(0);\\n filter: blur(0px);\\n transition-delay: 0ms;\\n transition-duration: 100ms;\\n}\\n\\n/* Time Display Styling */\\n.time-display-group {\\n display: flex;\\n align-items: center;\\n gap: 0.25rem;\\n}\\n.duration-display {\\n display: contents;\\n color: oklab(1 0 0 / 0.5);\\n}\\nmedia-current-time-display,\\nmedia-duration-display {\\n text-shadow: 0 1px 0 oklab(0 0 0 / 0.2);\\n font-variant-numeric: tabular-nums;\\n}\\n\\n.button-group {\\n display: flex;\\n align-items: center;\\n gap: 0.375rem;\\n}\\n\\n/* Generic Media Button Styling */\\n.button {\\n display: grid;\\n flex-shrink: 0;\\n padding: 0.625rem;\\n cursor: pointer;\\n background: transparent;\\n border: none;\\n border-radius: 0.375rem;\\n color: oklab(1 0 0);\\n user-select: none;\\n outline: 2px solid transparent;\\n outline-offset: -2px;\\n transition-property: background-color, color, outline-offset;\\n transition-duration: 150ms;\\n transition-timing-function: ease-out;\\n}\\n.button:hover,\\n.button:focus-visible,\\n.button[aria-expanded='true'] {\\n color: oklab(1 0 0 / 0.8);\\n text-decoration: none;\\n}\\n.button:focus-visible {\\n outline-color: oklab(1 0 0);\\n outline-offset: 2px;\\n}\\n.button[disabled] {\\n cursor: not-allowed;\\n opacity: 0.5;\\n filter: grayscale(1);\\n}\\n\\n.button .icon {\\n grid-area: 1 / 1;\\n width: 18px;\\n height: 18px;\\n filter: drop-shadow(0 1px 0 oklab(0 0 0 / 0.4));\\n}\\n\\n/* Media Play Button UI/Styles */\\nmedia-play-button .icon {\\n opacity: 0;\\n transition: opacity 150ms linear;\\n}\\n\\nmedia-play-button:not([data-paused]) .pause-icon,\\nmedia-play-button[data-paused] .play-icon {\\n opacity: 1;\\n}\\n\\n/* Media Fullscreen Button UI/Styles */\\nmedia-fullscreen-button .icon {\\n display: none;\\n}\\nmedia-fullscreen-button:not([data-fullscreen]) .fullscreen-enter-icon,\\nmedia-fullscreen-button[data-fullscreen] .fullscreen-exit-icon {\\n display: inline;\\n}\\n\\n/* One way to define the \\\"default visible\\\" icon (CJP) */\\nmedia-mute-button .icon {\\n display: none;\\n}\\nmedia-mute-button:not([data-volume-level]) .volume-low-icon,\\nmedia-mute-button[data-volume-level='high'] .volume-high-icon,\\nmedia-mute-button[data-volume-level='low'] .volume-low-icon,\\nmedia-mute-button[data-volume-level='medium'] .volume-low-icon,\\nmedia-mute-button[data-volume-level='off'] .volume-off-icon {\\n display: inline;\\n}\\n\\n/* TimeSlider Component Styles */\\n.slider {\\n flex: 1;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n position: relative;\\n border-radius: calc(infinity * 1px);\\n outline: none;\\n}\\n\\n/* Horizontal orientation styles */\\n.slider[data-orientation='horizontal'] {\\n min-width: 5rem;\\n width: 100%;\\n height: 1.25rem;\\n}\\n\\n/* Vertical orientation styles */\\n.slider[data-orientation='vertical'] {\\n height: 4.5rem;\\n width: 1.25rem;\\n}\\n\\n.slider-track {\\n position: relative;\\n isolation: isolate;\\n background-color: oklab(1 0 0 / 0.2);\\n border-radius: inherit;\\n overflow: hidden;\\n user-select: none;\\n outline: 2px solid transparent;\\n outline-offset: -2px;\\n transition: outline-offset 150ms ease-out;\\n box-shadow: 0 0 0 1px oklab(0 0 0 / 0.05);\\n}\\n\\n/* Horizontal track styles */\\n.slider-track[data-orientation='horizontal'] {\\n width: 100%;\\n height: 0.1875rem;\\n}\\n\\n/* Vertical track styles */\\n.slider-track[data-orientation='vertical'] {\\n width: 0.1875rem;\\n height: 100%;\\n}\\n\\n.slider:focus-visible .slider-track {\\n outline-color: oklab(1 0 0);\\n outline-offset: 6px;\\n}\\n\\n.slider-thumb {\\n width: 0.75rem;\\n height: 0.75rem;\\n background-color: oklab(1 0 0);\\n border-radius: calc(infinity * 1px);\\n user-select: none;\\n z-index: 10;\\n box-shadow:\\n 0 0 0 1px oklab(0 0 0 / 0.1),\\n 0 1px 3px 0 oklab(0 0 0 / 0.15),\\n 0 1px 2px -1px oklab(0 0 0 / 0.15);\\n opacity: 0;\\n scale: 0.7;\\n transform-origin: center;\\n transition-property: opacity, scale;\\n transition-duration: 150ms;\\n transition-timing-function: ease-out;\\n}\\n.slider:hover .slider-thumb,\\n.slider:focus-within .slider-thumb {\\n opacity: 1;\\n scale: 1;\\n}\\n.slider-track[data-orientation='horizontal'] .slider-thumb {\\n cursor: ew-resize;\\n}\\n.slider-track[data-orientation='vertical'] .slider-thumb {\\n cursor: ns-resize;\\n}\\n\\n.slider-pointer {\\n display: none;\\n}\\n\\n.slider-progress {\\n background-color: oklab(1 0 0);\\n border-radius: inherit;\\n}\\n\\nmedia-preview-time-display {\\n font-variant-numeric: tabular-nums;\\n}\\n\\n.popup-animation {\\n transition-property: transform, scale, opacity, filter;\\n transition-duration: 200ms;\\n transform: scale(1);\\n transform-origin: bottom;\\n opacity: 1;\\n filter: blur(0px);\\n}\\n.popup-animation[data-starting-style],\\n.popup-animation[data-ending-style] {\\n transform: scale(0);\\n opacity: 0;\\n filter: blur(8px);\\n}\\n.popup-animation[data-instant] {\\n transition-duration: 0ms;\\n}\\n\\nmedia-popover {\\n margin: 0;\\n border: none;\\n box-shadow: none;\\n background: transparent;\\n padding: 0.75rem 0.25rem;\\n border-radius: calc(infinity * 1px);\\n}\\n\\n/* Tooltip Component Styles */\\nmedia-tooltip {\\n margin: 0;\\n border: none;\\n box-shadow: none;\\n background: transparent;\\n color: oklab(1 0 0);\\n padding: 0.25rem 0.5rem;\\n border-radius: 0.25rem;\\n font-size: 0.75rem;\\n background-color: oklab(1 0 0 / 0.1);\\n backdrop-filter: blur(64px) brightness(0.9) saturate(1.5);\\n box-shadow:\\n 0 4px 6px -1px oklab(0 0 0 / 0.1),\\n 0 2px 4px -2px oklab(0 0 0 / 0.1);\\n}\\n@media (prefers-reduced-transparency: reduce) {\\n media-tooltip {\\n background-color: oklab(0 0 0 / 0.7);\\n }\\n}\\n@media (prefers-contrast: more) {\\n media-tooltip {\\n background-color: oklab(0 0 0 / 0.9);\\n }\\n}\\n\\n.tooltip {\\n display: none;\\n white-space: nowrap;\\n}\\n\\n[data-paused] + media-tooltip .play-tooltip,\\n:not([data-paused]) + media-tooltip .pause-tooltip {\\n display: block;\\n}\\n\\n[data-fullscreen] + media-tooltip .fullscreen-exit-tooltip,\\n:not([data-fullscreen]) + media-tooltip .fullscreen-enter-tooltip {\\n display: block;\\n}\\n\"","import { MediaSkinElement } from '@/media/media-skin';\nimport { defineCustomElement } from '@/utils/custom-element';\nimport styles from './styles.css';\nimport '@/define/media-container';\nimport '@/define/video-provider';\nimport '@/define/media-play-button';\nimport '@/define/media-mute-button';\nimport '@/define/media-volume-slider';\nimport '@/define/media-time-slider';\nimport '@/define/media-fullscreen-button';\nimport '@/define/media-duration-display';\nimport '@/define/media-current-time-display';\nimport '@/define/media-preview-time-display';\nimport '@/define/media-popover';\n\nimport '@/define/media-tooltip';\nimport '@/icons';\n\nexport function getTemplateHTML() {\n return /* html */`\n ${MediaSkinElement.getTemplateHTML()}\n <style>${styles}</style>\n\n <media-container>\n <slot name=\"media\" slot=\"media\"></slot>\n\n <div class=\"overlay\"></div>\n\n <div class=\"control-bar\">\n <!-- NOTE: We can decide if we further want to provide a further, \"themed\" media-play-button that comes with baked in default styles and icons. (CJP) -->\n\n <media-play-button commandfor=\"play-tooltip\" class=\"button\">\n <media-play-icon class=\"icon play-icon\"></media-play-icon>\n <media-pause-icon class=\"icon pause-icon\"></media-pause-icon>\n </media-play-button>\n <media-tooltip\n id=\"play-tooltip\"\n class=\"popup-animation\"\n popover=\"manual\"\n delay=\"500\"\n side=\"top\"\n side-offset=\"6\"\n collision-padding=\"12\"\n >\n <span class=\"tooltip play-tooltip\">Play</span>\n <span class=\"tooltip pause-tooltip\">Pause</span>\n </media-tooltip>\n\n <div class=\"time-display-group\">\n <!-- Use the show-remaining attribute to show count down/remaining time -->\n <media-current-time-display></media-current-time-display>\n\n <span class=\"duration-display\">\n /\n <media-duration-display></media-duration-display>\n </span>\n </div>\n\n <media-time-slider commandfor=\"time-slider-tooltip\" class=\"slider\">\n <media-time-slider-track class=\"slider-track\">\n <media-time-slider-progress class=\"slider-progress\"></media-time-slider-progress>\n <media-time-slider-pointer class=\"slider-pointer\"></media-time-slider-pointer>\n </media-time-slider-track>\n <media-time-slider-thumb class=\"slider-thumb\"></media-time-slider-thumb>\n </media-time-slider>\n <media-tooltip\n id=\"time-slider-tooltip\"\n class=\"popup-animation\"\n popover=\"manual\"\n track-cursor-axis=\"x\"\n side=\"top\"\n side-offset=\"12\"\n collision-padding=\"12\"\n >\n <media-preview-time-display></media-preview-time-display>\n </media-tooltip>\n\n <div class=\"button-group\">\n <media-mute-button commandfor=\"volume-slider-popover\" command=\"toggle-popover\" class=\"button\">\n <media-volume-high-icon class=\"icon volume-high-icon\"></media-volume-high-icon>\n <media-volume-low-icon class=\"icon volume-low-icon\"></media-volume-low-icon>\n <media-volume-off-icon class=\"icon volume-off-icon\"></media-volume-off-icon>\n </media-mute-button>\n <media-popover\n id=\"volume-slider-popover\"\n class=\"popup-animation\"\n popover=\"manual\"\n open-on-hover\n delay=\"200\"\n close-delay=\"100\"\n side=\"top\"\n side-offset=\"2\"\n collision-padding=\"12\"\n >\n <media-volume-slider class=\"slider\" orientation=\"vertical\">\n <media-volume-slider-track class=\"slider-track\">\n <media-volume-slider-indicator class=\"slider-progress\"></media-volume-slider-indicator>\n </media-volume-slider-track>\n <media-volume-slider-thumb class=\"slider-thumb\"></media-volume-slider-thumb>\n </media-volume-slider>\n </media-popover>\n\n <media-fullscreen-button commandfor=\"fullscreen-tooltip\" class=\"button\">\n <media-fullscreen-enter-alt-icon class=\"icon fullscreen-enter-icon\"></media-fullscreen-enter-alt-icon>\n <media-fullscreen-exit-alt-icon class=\"icon fullscreen-exit-icon\"></media-fullscreen-exit-icon>\n </media-fullscreen-button>\n <media-tooltip\n id=\"fullscreen-tooltip\"\n class=\"popup-animation\"\n popover=\"manual\"\n delay=\"500\"\n side=\"top\"\n side-offset=\"6\"\n collision-padding=\"12\"\n >\n <span class=\"tooltip fullscreen-enter-tooltip\">Enter Fullscreen</span>\n <span class=\"tooltip fullscreen-exit-tooltip\">Exit Fullscreen</span>\n </media-tooltip>\n </div>\n </div>\n </media-container>\n `;\n}\n\nexport class MediaSkinMinimalElement extends MediaSkinElement {\n static getTemplateHTML: () => string = getTemplateHTML;\n}\n\ndefineCustomElement('media-skin-minimal', MediaSkinMinimalElement);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAAA;;;;ACkBA,SAAgB,kBAAkB;AAChC,QAAiB;MACb,iBAAiB,iBAAiB,CAAC;aAC5BA,eAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuGpB,IAAa,0BAAb,cAA6C,iBAAiB;;yBACrB;;;AAGzC,oBAAoB,sBAAsB,wBAAwB"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { t as VideoProviderElement } from "./video-provider-BKDqoKFf.js";
|
|
2
|
+
import { t as defineCustomElement } from "./custom-element-3bDlB2XO.js";
|
|
3
|
+
|
|
4
|
+
//#region src/define/video-provider.ts
|
|
5
|
+
defineCustomElement("video-provider", VideoProviderElement);
|
|
6
|
+
|
|
7
|
+
//#endregion
|
|
8
|
+
//# sourceMappingURL=video-provider-BCGedOLm.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"video-provider-BCGedOLm.js","names":[],"sources":["../src/define/video-provider.ts"],"sourcesContent":["import { VideoProviderElement } from '@/media/video-provider';\nimport { defineCustomElement } from '@/utils/custom-element';\n\ndefineCustomElement('video-provider', VideoProviderElement);\n"],"mappings":";;;;AAGA,oBAAoB,kBAAkB,qBAAqB"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { createMediaStore } from "@videojs/core/store";
|
|
2
2
|
import { ProviderMixin } from "@open-wc/context-protocol";
|
|
3
3
|
|
|
4
|
-
//#region src/media/
|
|
4
|
+
//#region src/media/video-provider.ts
|
|
5
5
|
const ProviderHTMLElement = ProviderMixin(HTMLElement);
|
|
6
|
-
var
|
|
6
|
+
var VideoProviderElement = class extends ProviderHTMLElement {
|
|
7
7
|
constructor(..._args) {
|
|
8
8
|
super(..._args);
|
|
9
9
|
this.contexts = { mediaStore: () => {
|
|
@@ -13,5 +13,5 @@ var MediaProviderElement = class extends ProviderHTMLElement {
|
|
|
13
13
|
};
|
|
14
14
|
|
|
15
15
|
//#endregion
|
|
16
|
-
export {
|
|
17
|
-
//# sourceMappingURL=
|
|
16
|
+
export { VideoProviderElement as t };
|
|
17
|
+
//# sourceMappingURL=video-provider-BKDqoKFf.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"
|
|
1
|
+
{"version":3,"file":"video-provider-BKDqoKFf.js","names":["ProviderHTMLElement: Constructor<CustomElement & HTMLElement>"],"sources":["../src/media/video-provider.ts"],"sourcesContent":["import type { Constructor, CustomElement } from '@open-wc/context-protocol';\nimport type { MediaStore } from '@videojs/core/store';\n\nimport { ProviderMixin } from '@open-wc/context-protocol';\nimport { createMediaStore } from '@videojs/core/store';\n\nconst ProviderHTMLElement: Constructor<CustomElement & HTMLElement> = ProviderMixin(HTMLElement);\n\nexport class VideoProviderElement extends ProviderHTMLElement {\n contexts = {\n mediaStore: (): MediaStore => {\n return createMediaStore();\n },\n };\n}\n"],"mappings":";;;;AAMA,MAAMA,sBAAgE,cAAc,YAAY;AAEhG,IAAa,uBAAb,cAA0C,oBAAoB;;;kBACjD,EACT,kBAA8B;AAC5B,UAAO,kBAAkB;KAE5B"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@videojs/html",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "0.1.0-preview.
|
|
4
|
+
"version": "0.1.0-preview.6",
|
|
5
5
|
"description": "HTML library for building media players",
|
|
6
6
|
"license": "Apache-2.0",
|
|
7
7
|
"keywords": [
|
|
@@ -48,9 +48,9 @@
|
|
|
48
48
|
"@floating-ui/core": "^1.6.13",
|
|
49
49
|
"@floating-ui/dom": "^1.6.13",
|
|
50
50
|
"@open-wc/context-protocol": "^0.0.9",
|
|
51
|
-
"@videojs/
|
|
52
|
-
"@videojs/
|
|
53
|
-
"@videojs/
|
|
51
|
+
"@videojs/icons": "0.1.0-preview.6",
|
|
52
|
+
"@videojs/utils": "0.1.0-preview.6",
|
|
53
|
+
"@videojs/core": "0.1.0-preview.6"
|
|
54
54
|
},
|
|
55
55
|
"devDependencies": {
|
|
56
56
|
"tsdown": "^0.15.9",
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import "../media-provider-D7P2TLXG.js";
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import { t as MediaProviderElement } from "./media-provider-CyoL0bCx.js";
|
|
2
|
-
import { t as defineCustomElement } from "./custom-element-3bDlB2XO.js";
|
|
3
|
-
|
|
4
|
-
//#region src/define/media-provider.ts
|
|
5
|
-
defineCustomElement("media-provider", MediaProviderElement);
|
|
6
|
-
|
|
7
|
-
//#endregion
|
|
8
|
-
//# sourceMappingURL=media-provider-D_GL2_DN.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"media-provider-D_GL2_DN.js","names":[],"sources":["../src/define/media-provider.ts"],"sourcesContent":["import { MediaProviderElement } from '@/media/media-provider';\nimport { defineCustomElement } from '@/utils/custom-element';\n\ndefineCustomElement('media-provider', MediaProviderElement);\n"],"mappings":";;;;AAGA,oBAAoB,kBAAkB,qBAAqB"}
|
|
File without changes
|