New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@mux/mux-player

Package Overview
Dependencies
Maintainers
2
Versions
601
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@mux/mux-player - npm Package Compare versions

Comparing version 0.1.0-canary.1-04bc498 to 0.1.0-canary.10-19b3efd

93

CHANGELOG.md

@@ -6,2 +6,95 @@ # Change Log

# [0.1.0-beta.23](https://github.com/muxinc/elements/compare/@mux/mux-player@0.1.0-beta.22...@mux/mux-player@0.1.0-beta.23) (2022-07-11)
**Note:** Version bump only for package @mux/mux-player
# [0.1.0-beta.22](https://github.com/muxinc/elements/compare/@mux/mux-player@0.1.0-beta.21...@mux/mux-player@0.1.0-beta.22) (2022-07-05)
**Note:** Version bump only for package @mux/mux-player
# 0.1.0-beta.21 (2022-07-05)
### Bug Fixes
- add an error if a token is provided via the playback ID ([d09446d](https://github.com/muxinc/elements/commit/d09446d6da3dc3b332db031336c97ee9349ac9f1))
- add patched template-parts fork ([b200e9f](https://github.com/muxinc/elements/commit/b200e9fcdff9cf5757ec646c8833e742e329afa0))
- attrs not available in constructor ([#240](https://github.com/muxinc/elements/issues/240)) ([add468a](https://github.com/muxinc/elements/commit/add468a0fc93ddfb745dfbc60a08e8a9120621be))
- bump LIVE_SEGMENT_SECS to 5 ([3fdf72d](https://github.com/muxinc/elements/commit/3fdf72d0e1322571aa18e8de74649f0dce5ae7b9))
- bump media-chrome dep for fullscreen bugfix ([7ba458c](https://github.com/muxinc/elements/commit/7ba458ca38d29d2a0c9d4dd8a950bb3cd394c543))
- child custom element mux-video upgraded after mux-player ([#171](https://github.com/muxinc/elements/issues/171)) ([9db8037](https://github.com/muxinc/elements/commit/9db8037f379132307727941f82a736d55e76b4e5))
- clear some state on playbackId change ([#174](https://github.com/muxinc/elements/issues/174)) ([af0738e](https://github.com/muxinc/elements/commit/af0738ea5ae5a75861f75fc2ae3809ada735f3e2))
- clear state on other src related attrs ([17e75e7](https://github.com/muxinc/elements/commit/17e75e78d9b14c913138c2d181d279a58ef98832))
- custom video events handling ([#203](https://github.com/muxinc/elements/issues/203)) ([a909f89](https://github.com/muxinc/elements/commit/a909f89a69ee0d4b67e9d9371ac0f80984016181))
- devLog links to GH base URL ([022f69f](https://github.com/muxinc/elements/commit/022f69fca5624399e67ea9bb5ce1b2b2929979d6))
- don't shift captions on iphones ([a4ae5f1](https://github.com/muxinc/elements/commit/a4ae5f1df0ce030f1ffedd74972873ff0f600483))
- don't shift captions on live, unless secondary color is set ([b474980](https://github.com/muxinc/elements/commit/b4749806ba1ec082fb21642edae9e963e9287643))
- enable cast docs + cast fix ([#253](https://github.com/muxinc/elements/issues/253)) ([421d515](https://github.com/muxinc/elements/commit/421d515cc4700cf9d7ca4f0d09aa600ec4adac7b))
- fullscreen controls layout ([#208](https://github.com/muxinc/elements/issues/208)) ([7bda89d](https://github.com/muxinc/elements/commit/7bda89de57e540e31f92a6b51f7379c94aad983d))
- get polyfill from playback core in mux-player ([ec053f9](https://github.com/muxinc/elements/commit/ec053f90f6b7e3ccf0dd6bdd9034cbe8ead0d593))
- importing castable-video ([44cbb2f](https://github.com/muxinc/elements/commit/44cbb2f26290952ac8d3fe51a1d933352b0b9134))
- keep .hls but have it log a warning saying to use .\_hls ([11e6c10](https://github.com/muxinc/elements/commit/11e6c102a7e238bc8104c52ae9b94e7e3c2c7e19))
- keep mux-player#video for backward compatibility ([ddf3c6e](https://github.com/muxinc/elements/commit/ddf3c6eccb0011a42774133ec0a646d84d463f53))
- lower captions offset for safari ([2f97a45](https://github.com/muxinc/elements/commit/2f97a452397ee276235a55d1deb29c8f0f4d2975))
- make height larger for touch temporarily ([86aaa84](https://github.com/muxinc/elements/commit/86aaa849340ff3a5acdc758f2a3a8fc6065e314e))
- make mux-player size based on video element ([#185](https://github.com/muxinc/elements/issues/185)) ([e4af9a8](https://github.com/muxinc/elements/commit/e4af9a885720f172837eb20ea49dc96bf66a77be))
- make mux-video errors more uniform, fix async ([#183](https://github.com/muxinc/elements/issues/183)) ([0ea4dc3](https://github.com/muxinc/elements/commit/0ea4dc3beafc7d8a6c5078087d14f3f4bac5dda7))
- move hasPlayed into mux-player ([62bcd07](https://github.com/muxinc/elements/commit/62bcd076612a02f4d449ebe1ad0d34c8d8106942))
- **mux-player:** Add cc btn to Vod XS chrome. ([#249](https://github.com/muxinc/elements/issues/249)) ([cf4ebe0](https://github.com/muxinc/elements/commit/cf4ebe0051c22223bcb50b0f8e2fc9a71b015ff0))
- **mux-player:** Add support for event handlers to template parts processing. ([704d2e3](https://github.com/muxinc/elements/commit/704d2e34dacdb68316ead85a2dd494475de72732))
- **mux-player:** adding test for metadata attrs. ([a460566](https://github.com/muxinc/elements/commit/a4605661fabb33a178bb3244b1411c63bf1e1148))
- **mux-player:** don't fire the closed event twice per close on the dialog WC. ([0231b1a](https://github.com/muxinc/elements/commit/0231b1a950fe6eb476ce8bcd3ce4d49cee97e0c9))
- **mux-player:** Ensure that the externally set poster attr is used iff it's set. ([e761073](https://github.com/muxinc/elements/commit/e76107359375de8e7db41cf3762734fa98c9d543))
- **mux-player:** Make sure internal state monitoring setup happens after relevant elements exist. ([43e9566](https://github.com/muxinc/elements/commit/43e956678b7e1b8da3e95144b7d9f6f3d2cb99d5))
- **mux-player:** metadata fields should be set based on 'external'/attr values in mux-player. ([bd474b6](https://github.com/muxinc/elements/commit/bd474b658931afb0ea9f3f1585ba3142d22bd503))
- **mux-player:** temp fix conditional render bug ([73534dc](https://github.com/muxinc/elements/commit/73534dc476d901e916734044834c71130a6de73e))
- **mux-player:** Update theme css to better account for audio vs. non-audio styling. ([81aa045](https://github.com/muxinc/elements/commit/81aa045be8a80e38b9da39800d1ae03cd806412e))
- **mux-player:** upgrade Media Chrome to 0.6.5 ([45415e6](https://github.com/muxinc/elements/commit/45415e63bbf8b6f7b115231022f06d3805da051e))
- **mux-player:** Use onclose event handler in template. Clear errors onclose. ([1eca0ef](https://github.com/muxinc/elements/commit/1eca0efb32b74f82c67be4f9ac0f3bc5dfbf7839))
- playback core should handle seek to live on first play ([805070a](https://github.com/muxinc/elements/commit/805070a7a4cb7158180710ecf85bf54bdb1f9280))
- point pkgjson#browser at mjs build for webpack 4 ([#191](https://github.com/muxinc/elements/issues/191)) ([a73a495](https://github.com/muxinc/elements/commit/a73a4951052bfc77cc24667b9bc0a05efbcbb355))
- prettier format all elements files ([741d607](https://github.com/muxinc/elements/commit/741d607521ca9578cfad9f0a9216a6565b4c56a1))
- prevent dialog from focus if outside player ([#196](https://github.com/muxinc/elements/issues/196)) ([6c73219](https://github.com/muxinc/elements/commit/6c732198b08f11162f7ee8c4345344b4c050a60f))
- prevent non-fatal error events propagating ([#179](https://github.com/muxinc/elements/issues/179)) ([2103800](https://github.com/muxinc/elements/commit/2103800b1026653703a67432a9bf80cb2ce5c7ac))
- primary color should be also used for the text color on controls ([d44da1b](https://github.com/muxinc/elements/commit/d44da1b7e4a11ddf8274a09acf306747a5af42ce))
- put progress bar above controls ([3f454e0](https://github.com/muxinc/elements/commit/3f454e01f464a74be6bc3c7a14a5920d2ae48623))
- switch cjs extension to .cjs.js ([30e83c3](https://github.com/muxinc/elements/commit/30e83c3ce0bd9bfda4817c30ffe0921e425619e4))
- update media-chrome to 0.5.4 ([21e7884](https://github.com/muxinc/elements/commit/21e78840768bad8eeb24d39fa97fcd8cf6ab266a))
- upgrade Media Chrome v0.6.9 ([#267](https://github.com/muxinc/elements/issues/267)) ([0ec48f7](https://github.com/muxinc/elements/commit/0ec48f79b2cafe2066425a75d95c06fbeb6a236f))
### Features
- add background color to have sufficient contrast on controls ([#78](https://github.com/muxinc/elements/issues/78)) ([4b47ef0](https://github.com/muxinc/elements/commit/4b47ef0dad9f0f14a6c551547c282c3b3de074bd))
- add beaconCollectionDomain option to replace beaconDomain ([a44b699](https://github.com/muxinc/elements/commit/a44b699ae3138590b9d953f693f95971694658df))
- add casting logic without cast-button ([#237](https://github.com/muxinc/elements/issues/237)) ([f7f1fe9](https://github.com/muxinc/elements/commit/f7f1fe9713f8c2dcedb2840f463b5478d6fffca0))
- add errorTranslator prop & muxVideo.error property ([#195](https://github.com/muxinc/elements/issues/195)) ([3afc2f0](https://github.com/muxinc/elements/commit/3afc2f0af75a5ad8ef00257a4ebc34882ff8c9ab))
- add media-theme-mux as a replaceable element ([#175](https://github.com/muxinc/elements/issues/175)) ([ee3c186](https://github.com/muxinc/elements/commit/ee3c186433c198a27304577e012b899c1aee44d4))
- default-hidden-captions to turn off showing captions by default ([#98](https://github.com/muxinc/elements/issues/98)) ([9edc3cd](https://github.com/muxinc/elements/commit/9edc3cd008e47234472b14784ea89493736599cb))
- **dvr:** Initial effort for DVR support. ([d58d78f](https://github.com/muxinc/elements/commit/d58d78fe6716d21ff03e5edb7d47c73e85ef4c85))
- Extended autoplay options ([#116](https://github.com/muxinc/elements/issues/116)) ([475e838](https://github.com/muxinc/elements/commit/475e83884f641c578fa601c9501147d485fc1831))
- Handle inferred mux data env key for custom domain cases. ([eedc19e](https://github.com/muxinc/elements/commit/eedc19e2025844f99909cf3d0751811b55239329))
- Improve error handling / messaging ([#132](https://github.com/muxinc/elements/issues/132)) ([b1f2dd0](https://github.com/muxinc/elements/commit/b1f2dd0f44ceb75a93f8cf758d6e4258e1366ed5))
- **mux-player:** Add audio-only support. Update vanilla example for audio use case. ([28c3db1](https://github.com/muxinc/elements/commit/28c3db19afb7b885316c034f1e02499dec472f7d))
- **mux-player:** Add basic chromes for audio only live & dvr. ([bc7dfdf](https://github.com/muxinc/elements/commit/bc7dfdf78aee96ab12980354384ea36a8e30ff05))
- **mux-player:** Add basic support for custom video domains. ([d355705](https://github.com/muxinc/elements/commit/d355705511df296c693fbb9f9168a15c34ae0993))
- **mux-player:** Add chromecast button for audio only chromes. ([3f2462b](https://github.com/muxinc/elements/commit/3f2462b51621a3e077d6e0471963d10cc606dbe8))
- **mux-player:** Add more seek to live behavior tests. Add event for inLiveWindow change. ([f334328](https://github.com/muxinc/elements/commit/f3343289a29b0c19856addf41fd0c5c1b2081c6a))
- **mux-player:** Add thumbnail-time support to mux-player. Document attr&prop. Warn when used with thumbnail-token. ([ee235e0](https://github.com/muxinc/elements/commit/ee235e014bd76daee470e21eff2944b9a85c9ac9))
- **mux-player:** Don't use disabled to toggle seek to live btn functionality. ([14f1f1c](https://github.com/muxinc/elements/commit/14f1f1c7ecd43416363eb43583622ea5732c9072))
- **mux-player:** minor cleanup for audio only UI. ([909a5ea](https://github.com/muxinc/elements/commit/909a5eaee520c2be982f4d3a139dc6836265d514))
- **mux-player:** move captions up when controls are showing ([e8d9842](https://github.com/muxinc/elements/commit/e8d9842f5b343fd11965c4fbda96323a6e173e63))
- **mux-player:** new iteration on error handling ([a89af8a](https://github.com/muxinc/elements/commit/a89af8a0b9400f2e0836e67b813d996636f044c1))
- **mux-player:** Seek to live button impl with live edge window detection and play on seek/seek on play behavior. ([77c8c5f](https://github.com/muxinc/elements/commit/77c8c5f05c2b22553efc6e627b0b148dded19a42))
- **mux-player:** use aria-disabled instead of non-standard attr. Add consts/code comments. fix css var. ([8c73f60](https://github.com/muxinc/elements/commit/8c73f602c6745a731f7fafdfdd8567b90db2ccad))
- only autoplay with the autoplay attribute ([#99](https://github.com/muxinc/elements/issues/99)) ([c6204fb](https://github.com/muxinc/elements/commit/c6204fb03bc78e3b55d09f9e2aa547cd62825633))
- **player:** Add inLiveWindow getter to player. Start tests for seek to live button behaviors. ([8217a4e](https://github.com/muxinc/elements/commit/8217a4ee4c9e61b570fa506f2b476a570dd78f61))
- rename .video to .media for consistency with media-chrome ([52c3a1d](https://github.com/muxinc/elements/commit/52c3a1ddef275256d2adc4cc200cb47b1c3023c3))
- rename hls to \_hls ([2d53bc2](https://github.com/muxinc/elements/commit/2d53bc2517840d65a8fd5e2bb2d979ce8b491116))
- subtitles for M3U8 playlists, resume session, add cast-button ([#239](https://github.com/muxinc/elements/issues/239)) ([89793d0](https://github.com/muxinc/elements/commit/89793d0f98776252b1a585f605a0af39bd5c22d2))
- vertical align progress bar and improve second color background ([#235](https://github.com/muxinc/elements/issues/235)) ([37e9eb7](https://github.com/muxinc/elements/commit/37e9eb74339f0f544f5e96e717396a6899446be0))
### Reverts
- Revert "Publish" ([42fc528](https://github.com/muxinc/elements/commit/42fc528216346ff52d967cec5392a1191f74a1c0))
- Revert "Add extra small player view w/ only play button" ([db4c1d9](https://github.com/muxinc/elements/commit/db4c1d9a5ebdbcdad3346e77f803749de4f8f913))
# [0.1.0-beta.20](https://github.com/muxinc/elements/compare/@mux-elements/mux-player@0.1.0-beta.19...@mux-elements/mux-player@0.1.0-beta.20) (2022-06-23)

@@ -8,0 +101,0 @@

4

dist/types-ts3.4/helpers.d.ts

@@ -16,6 +16,4 @@ import MuxPlayerElement from '.';

}) => string;
export declare function castThemeName(themeName?: string): string | undefined;
export declare function toPropName(attrName: string): string;
export declare const getTestMediaEl: (nodeName?: string) => HTMLMediaElement | undefined;
export declare const hasVolumeSupportAsync: (mediaEl?: HTMLMediaElement | undefined) => Promise<boolean>;
export declare function getCcSubTracks(el: MuxPlayerElement): TextTrack[];
export declare const getLiveTime: (el: MuxPlayerElement) => number | undefined;

@@ -22,0 +20,0 @@ export declare const seekToLive: (el: MuxPlayerElement) => void;

5

dist/types-ts3.4/html.d.ts

@@ -19,1 +19,6 @@ import { TemplateInstance, NodeTemplatePart } from '@github/template-parts';

export declare function createTemplateInstance(content: string, props?: any): TemplateInstance;
export declare const unsafeStatic: (...values: any[]) => {
$static$: (TemplateResult | {
strings: any[];
})[];
};

3

dist/types-ts3.4/index.d.ts

@@ -12,5 +12,2 @@ import '@mux/playback-core';

};
declare type MediaController = Element & {
media: HTMLVideoElement;
};
declare class MuxPlayerElement extends VideoApiElement {

@@ -17,0 +14,0 @@ private "MuxPlayerElement.#private";

25

dist/types-ts3.4/media-theme-mux/media-theme-mux.d.ts

@@ -1,15 +0,19 @@

import 'media-chrome';
import { MediaTheme } from 'media-chrome';
import '../media-chrome/time-display';
declare type ThemeMuxTemplateProps = {
streamType: string;
streamType: string | null;
audio: boolean;
playerSize: string;
playerSize: string | null;
defaultHiddenCaptions: boolean;
hasCaptions: boolean;
forwardSeekOffset: number;
backwardSeekOffset: number;
forwardSeekOffset: string | null;
backwardSeekOffset: string | null;
};
export default class MediaThemeMux extends MediaTheme {
static readonly observedAttributes: string[];
attributeChangedCallback(): void;
render(): void;
}
export declare const AudioVodChrome: (props: ThemeMuxTemplateProps) => import("../html").TemplateResult;
export declare const AudioDvrChrome: (props: ThemeMuxTemplateProps) => import("../html").TemplateResult;
export declare const AudioLiveChrome: (_props: ThemeMuxTemplateProps) => import("../html").TemplateResult;
export declare const AudioLiveChrome: () => import("../html").TemplateResult;
export declare const VodChromeExtraSmall: (props: ThemeMuxTemplateProps) => import("../html").TemplateResult;

@@ -24,7 +28,2 @@ export declare const VodChromeSmall: (props: ThemeMuxTemplateProps) => import("../html").TemplateResult;

export declare const DvrChromeLarge: (props: ThemeMuxTemplateProps) => import("../html").TemplateResult;
declare class MediaThemeMux extends HTMLElement {
static readonly observedAttributes: string[];
constructor();
attributeChangedCallback(): void;
}
export default MediaThemeMux;
export {};

4

dist/types/helpers.d.ts

@@ -16,6 +16,4 @@ import type MuxPlayerElement from '.';

}) => string;
export declare function castThemeName(themeName?: string): string | undefined;
export declare function toPropName(attrName: string): string;
export declare const getTestMediaEl: (nodeName?: string) => HTMLMediaElement | undefined;
export declare const hasVolumeSupportAsync: (mediaEl?: HTMLMediaElement | undefined) => Promise<boolean>;
export declare function getCcSubTracks(el: MuxPlayerElement): TextTrack[];
export declare const getLiveTime: (el: MuxPlayerElement) => number | undefined;

@@ -22,0 +20,0 @@ export declare const seekToLive: (el: MuxPlayerElement) => void;

5

dist/types/html.d.ts

@@ -19,1 +19,6 @@ import { TemplateInstance, NodeTemplatePart } from '@github/template-parts';

export declare function createTemplateInstance(content: string, props?: any): TemplateInstance;
export declare const unsafeStatic: (...values: any[]) => {
$static$: (TemplateResult | {
strings: any[];
})[];
};

3

dist/types/index.d.ts

@@ -12,5 +12,2 @@ import '@mux/playback-core';

};
declare type MediaController = Element & {
media: HTMLVideoElement;
};
declare class MuxPlayerElement extends VideoApiElement {

@@ -17,0 +14,0 @@ #private;

25

dist/types/media-theme-mux/media-theme-mux.d.ts

@@ -1,15 +0,19 @@

import 'media-chrome';
import { MediaTheme } from 'media-chrome';
import '../media-chrome/time-display';
declare type ThemeMuxTemplateProps = {
streamType: string;
streamType: string | null;
audio: boolean;
playerSize: string;
playerSize: string | null;
defaultHiddenCaptions: boolean;
hasCaptions: boolean;
forwardSeekOffset: number;
backwardSeekOffset: number;
forwardSeekOffset: string | null;
backwardSeekOffset: string | null;
};
export default class MediaThemeMux extends MediaTheme {
static get observedAttributes(): string[];
attributeChangedCallback(): void;
render(): void;
}
export declare const AudioVodChrome: (props: ThemeMuxTemplateProps) => import("../html").TemplateResult;
export declare const AudioDvrChrome: (props: ThemeMuxTemplateProps) => import("../html").TemplateResult;
export declare const AudioLiveChrome: (_props: ThemeMuxTemplateProps) => import("../html").TemplateResult;
export declare const AudioLiveChrome: () => import("../html").TemplateResult;
export declare const VodChromeExtraSmall: (props: ThemeMuxTemplateProps) => import("../html").TemplateResult;

@@ -24,7 +28,2 @@ export declare const VodChromeSmall: (props: ThemeMuxTemplateProps) => import("../html").TemplateResult;

export declare const DvrChromeLarge: (props: ThemeMuxTemplateProps) => import("../html").TemplateResult;
declare class MediaThemeMux extends HTMLElement {
static get observedAttributes(): string[];
constructor();
attributeChangedCallback(): void;
}
export default MediaThemeMux;
export {};

6

package.json
{
"name": "@mux/mux-player",
"version": "0.1.0-canary.1-04bc498",
"version": "0.1.0-canary.10-19b3efd",
"description": "An open source Mux player web component that Just Works™",

@@ -54,4 +54,4 @@ "main": "./dist/index.cjs.js",

"@github/template-parts": "^0.5.3",
"@mux/mux-video": "0.7.0",
"@mux/playback-core": "0.7.0",
"@mux/mux-video": "0.8.1",
"@mux/playback-core": "0.8.0",
"media-chrome": "0.6.9"

@@ -58,0 +58,0 @@ },

56

README.md

@@ -141,30 +141,30 @@ <p align="center">

| Attribute | Type | Description | Default |
| -------------------------- | ------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------- |
| `playback-id` | `string` | The playback ID for your Mux Asset or Mux Live Stream. This will also be used for automatically assigning a [poster image](https://docs.mux.com/guides/video/get-images-from-a-video) and (thumbnail previews)[https://docs.mux.com/guides/video/create-timeline-hover-previews]. For more, check out the [Mux Docs](https://docs.mux.com/guides/video/play-your-videos#1-get-your-playback-id). | N/A |
| `env-key` | `string` | Your Mux Data environment key. Note that this is different than your API Key. Get your env key from the "Mux Data" part of your [Mux Environments Dashboard](https://dashboard.mux.com/environments). If undefined, the environment will be inferred based on your Mux Video asset. | `undefined` |
| `playback-token` | `string` | The playback token for signing the `src` URL. | N/A |
| `thumbnail-token` | `string` | The thumbnail token for signing the `poster` URL. | N/A |
| `storyboard-token` | `string` | The storyboard token for signing the storyboard URL. | N/A |
| `stream-type` | `"on-demand" \| "live" \| "ll-live"` | The type of stream associated with your Mux Asset. Used to determine what UI/controls to show and what optimizations to make for playback. | `"on-demand"` |
| `audio` | `boolean` | Indicate that you want an "audio only" UI/chrome. This may be used for audio-only assets or audio+video assets. | `false` |
| `metadata-video-title` | `string` | This is an arbitrary title for your video that will be passed in as metadata into Mux Data. Adding a title will give you useful context in your Mux Data dashboard. (optional, but encouraged) | N/A |
| `metadata-viewer-user-id` | `string` | If you have a logged-in user this should be an anonymized ID value that maps back to the user in your database. Take care to not expose personal identifiable information like names, usernames or email addresses. (optional, but encouraged) | N/A |
| `metadata-video-id` | `string` | This is an arbitrary ID that should map back to a record of this video in your database. | N/A |
| `debug` | `boolean` | Enables debug mode for the underlying playback engine (currently hls.js) and mux-embed, providing additional information in the console. | `false` |
| `start-time` | `number` (seconds) | Specify where in the media's timeline you want playback to start. | `0` |
| `thumbnail-time` | `number` (seconds) | Offset for the poster image you want to show before loading media. If no `thumbnail-time` is specified, `start-time` will be used by default. NOTE: This feature currently cannot be used with `thumbnail-token`. | `0` |
| `prefer-mse` | `boolean` | Use the underlying playback engine (currently hls.js), even if native playback is supported (e.g. in Safari). For more, see the section on [`prefer-mse`](#prefer-mse) | `false` |
| `default-hidden-captions` | `boolean` | Hide captions by default instead of showing them on initial load (when available) | `false` |
| `forward-seek-offset` | `number` (seconds) | Offset applied to the forward seek button | `10` |
| `backward-seek-offset` | `number` (seconds) | Offset applied to the backward seek button | `10` |
| `primary-color` | (Any valid CSS color style) | The primary color used by the player | N/A |
| `secondary-color` | (Any valid CSS color style) | The secondary color used by the player | N/A |
| `volume` | `number` (0-1) | Sets the volume of the player from 0 to 1. | Varies |
| `muted` | `boolean` | Toggles the muted state of the player. | Varies |
| `autoplay` | `boolean` | Toggles whether or not media should auto-play when initially loaded | false |
| `playback-rate` | `number` | Applies a multiplier to the media's playback rate, either speeding it up or slowing it down. | `1` |
| `loop` | `boolean` | Automatically loop playback of your media when it finishes. | `false` |
| `poster` | `string` (URL) | Assigns a poster image URL. Will use the automatically generated poster based on your playback-id by default. | Derived |
| `beacon-collection-domain` | `string` (domain name) | Assigns a custom domain to be used for Mux Data collection. | N/A |
| Attribute | Type | Description | Default |
| -------------------------- | --------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------- |
| `playback-id` | `string` | The playback ID for your Mux Asset or Mux Live Stream. This will also be used for automatically assigning a [poster image](https://docs.mux.com/guides/video/get-images-from-a-video) and (thumbnail previews)[https://docs.mux.com/guides/video/create-timeline-hover-previews]. For more, check out the [Mux Docs](https://docs.mux.com/guides/video/play-your-videos#1-get-your-playback-id). | N/A |
| `env-key` | `string` | Your Mux Data environment key. Note that this is different than your API Key. Get your env key from the "Mux Data" part of your [Mux Environments Dashboard](https://dashboard.mux.com/environments). If undefined, the environment will be inferred based on your Mux Video asset. | `undefined` |
| `playback-token` | `string` | The playback token for signing the `src` URL. | N/A |
| `thumbnail-token` | `string` | The thumbnail token for signing the `poster` URL. | N/A |
| `storyboard-token` | `string` | The storyboard token for signing the storyboard URL. | N/A |
| `stream-type` | `"on-demand" \| "live" \| "ll-live" \| "dvr" \| "ll-dvr"` | The type of stream associated with your Mux Asset. Used to determine what UI/controls to show and what optimizations to make for playback. | `"on-demand"` |
| `audio` | `boolean` | Indicate that you want an "audio only" UI/chrome. This may be used for audio-only assets or audio+video assets. | `false` |
| `metadata-video-title` | `string` | This is an arbitrary title for your video that will be passed in as metadata into Mux Data. Adding a title will give you useful context in your Mux Data dashboard. (optional, but encouraged) | N/A |
| `metadata-viewer-user-id` | `string` | If you have a logged-in user this should be an anonymized ID value that maps back to the user in your database. Take care to not expose personal identifiable information like names, usernames or email addresses. (optional, but encouraged) | N/A |
| `metadata-video-id` | `string` | This is an arbitrary ID that should map back to a record of this video in your database. | N/A |
| `debug` | `boolean` | Enables debug mode for the underlying playback engine (currently hls.js) and mux-embed, providing additional information in the console. | `false` |
| `start-time` | `number` (seconds) | Specify where in the media's timeline you want playback to start. | `0` |
| `thumbnail-time` | `number` (seconds) | Offset for the poster image you want to show before loading media. If no `thumbnail-time` is specified, `start-time` will be used by default. NOTE: This feature currently cannot be used with `thumbnail-token`. | `0` |
| `prefer-mse` | `boolean` | Use the underlying playback engine (currently hls.js), even if native playback is supported (e.g. in Safari). For more, see the section on [`prefer-mse`](#prefer-mse) | `false` |
| `default-hidden-captions` | `boolean` | Hide captions by default instead of showing them on initial load (when available) | `false` |
| `forward-seek-offset` | `number` (seconds) | Offset applied to the forward seek button | `10` |
| `backward-seek-offset` | `number` (seconds) | Offset applied to the backward seek button | `10` |
| `primary-color` | (Any valid CSS color style) | The primary color used by the player | N/A |
| `secondary-color` | (Any valid CSS color style) | The secondary color used by the player | N/A |
| `volume` | `number` (0-1) | Sets the volume of the player from 0 to 1. | Varies |
| `muted` | `boolean` | Toggles the muted state of the player. | Varies |
| `autoplay` | `boolean` | Toggles whether or not media should auto-play when initially loaded | false |
| `playback-rate` | `number` | Applies a multiplier to the media's playback rate, either speeding it up or slowing it down. | `1` |
| `loop` | `boolean` | Automatically loop playback of your media when it finishes. | `false` |
| `poster` | `string` (URL) | Assigns a poster image URL. Will use the automatically generated poster based on your playback-id by default. | Derived |
| `beacon-collection-domain` | `string` (domain name) | Assigns a custom domain to be used for Mux Data collection. | N/A |

@@ -171,0 +171,0 @@ ### Methods

31

src/helpers.ts

@@ -59,2 +59,9 @@ import { toQuery, camelCase } from './utils';

export function castThemeName(themeName?: string): string | undefined {
if (themeName && /^media-theme-[\w-]+$/.test(themeName)) {
return themeName;
}
return undefined;
}
const attrToPropNameMap: Record<string, string> = {

@@ -69,26 +76,2 @@ crossorigin: 'crossOrigin',

let testMediaEl: HTMLMediaElement | undefined;
export const getTestMediaEl = (nodeName = 'video') => {
if (testMediaEl) return testMediaEl;
if (typeof window !== 'undefined') {
testMediaEl = document.createElement(nodeName as 'video' | 'audio');
}
return testMediaEl;
};
export const hasVolumeSupportAsync = async (mediaEl: HTMLMediaElement | undefined = getTestMediaEl()) => {
if (!mediaEl) return false;
const prevVolume = mediaEl.volume;
mediaEl.volume = prevVolume / 2 + 0.1;
return new Promise<boolean>((resolve, reject) => {
setTimeout(() => {
resolve(mediaEl.volume !== prevVolume);
}, 0);
});
};
export function getCcSubTracks(el: MuxPlayerElement) {
return Array.from(el.media?.textTracks ?? []).filter(({ kind }) => kind === 'subtitles' || kind === 'captions');
}
export const getLiveTime = (el: MuxPlayerElement) => {

@@ -95,0 +78,0 @@ const { media } = el;

50

src/html.ts

@@ -152,4 +152,45 @@ import { TemplateInstance, NodeTemplatePart, createProcessor, AttributeTemplatePart } from '@github/template-parts';

const stringsCache = new Map();
const defaultProcessor = createProcessor(processPart);
export function html(strings: TemplateStringsArray, ...values: unknown[]): TemplateResult {
const staticStrings: any = [''];
const dynamicValues: any[] = [];
let staticValues;
let hasStatics = false;
// Here the unsafe static values are moved from the string expressions
// to the static strings so they can be used in the cache key and later
// be used to generate the HTML via the <template> element.
const join = (strs: TemplateStringsArray, vals: any[] = []) => {
staticStrings[staticStrings.length - 1] = staticStrings[staticStrings.length - 1] + strs[0];
vals.forEach((dynamicValue, i) => {
if ((staticValues = dynamicValue?.$static$) !== undefined) {
staticValues.forEach((staticValue: TemplateResult) => {
join(staticValue.strings, staticValue.values);
});
staticStrings[staticStrings.length - 1] = staticStrings[staticStrings.length - 1] + strs[i + 1];
hasStatics = true;
} else {
dynamicValues.push(dynamicValue);
staticStrings.push(strs[i + 1]);
}
});
};
join(strings, values);
if (hasStatics) {
// Tagged template literals with the same static strings return the same
// TemplateStringsArray, aka they are cached. emulate this behavior w/ a Map.
const key = staticStrings.join('$$html$$');
strings = stringsCache.get(key);
if (strings === undefined) {
(staticStrings as any).raw = staticStrings;
stringsCache.set(key, (strings = staticStrings));
}
values = dynamicValues;
}
return new TemplateResult(strings, values, defaultProcessor);

@@ -167,1 +208,10 @@ }

}
export const unsafeStatic = (...values: any[]) => ({
['$static$']: values.map((value) => {
if (value instanceof TemplateResult) return value;
// Only allow word characters and dashes for security.
if (!/\w-/.test(value)) return { strings: [] };
return { strings: [value] };
}),
});

56

src/index.ts

@@ -5,14 +5,6 @@ // import playback-core here to make sure that the polyfill is loaded

import { MediaController } from 'media-chrome';
import MediaThemeMux from './media-theme-mux/media-theme-mux';
import MuxVideoElement, { MediaError } from '@mux/mux-video';
import { Metadata, StreamTypes } from '@mux/playback-core';
import VideoApiElement, { initVideoApi } from './video-api';
import {
getCcSubTracks,
getPlayerVersion,
hasVolumeSupportAsync,
isInLiveWindow,
seekToLive,
toPropName,
} from './helpers';
import { getPlayerVersion, isInLiveWindow, seekToLive, toPropName } from './helpers';
import { template } from './template';

@@ -32,4 +24,2 @@ import { render } from './html';

type MediaController = Element & { media: HTMLVideoElement };
const streamTypeValues = Object.values(StreamTypes);

@@ -97,2 +87,3 @@

poster: el.getAttribute('poster'),
theme: el.getAttribute('theme'),
thumbnailTime: !el.tokens.thumbnail && el.thumbnailTime,

@@ -125,3 +116,2 @@ autoplay: el.autoplay,

playerSize: getPlayerSize(el.mediaController ?? el),
hasCaptions: !!getCcSubTracks(el).length,
// NOTE: In order to guarantee all expected metadata props are set "from the outside" when used

@@ -154,4 +144,2 @@ // and to guarantee they'll all be set *before* the playback id is set, using attr values here (CJP)

...initialState,
supportsAirPlay: false,
supportsVolume: false,
onCloseErrorDialog: () => this.#setState({ dialog: undefined, isDialogOpen: false }),

@@ -193,15 +181,21 @@ onInitFocusDialog: (e) => {

// even before they are connected to the main document.
customElements.upgrade(this.theme as Node);
if (!(this.theme instanceof MediaThemeMux)) {
logger.error('<media-theme-mux> failed to upgrade!');
try {
customElements.upgrade(this.theme as Node);
if (!(this.theme instanceof HTMLElement)) throw '';
} catch (error) {
logger.error(`<${this.theme?.localName}> failed to upgrade!`);
}
customElements.upgrade(this.media as Node);
if (!(this.media instanceof MuxVideoElement)) {
try {
customElements.upgrade(this.media as Node);
if (!(this.media instanceof MuxVideoElement)) throw '';
} catch (error) {
logger.error('<mux-video> failed to upgrade!');
}
customElements.upgrade(this.mediaController as Node);
if (!(this.mediaController instanceof MediaController)) {
logger.error('<media-controller> failed to upgrade!');
try {
customElements.upgrade(this.mediaController as Node);
if (!(this.mediaController instanceof MediaController)) throw '';
} catch (error) {
logger.error(`<media-controller> failed to upgrade!`);
}

@@ -222,4 +216,2 @@

this.#setUpCaptionsButton();
this.#setUpAirplayButton();
this.#setUpVolumeRange();
this.#monitorLiveWindow();

@@ -502,18 +494,2 @@ this.#userInactive = this.mediaController?.hasAttribute('user-inactive') ?? true;

#setUpAirplayButton() {
if (!!(globalThis as any).WebKitPlaybackTargetAvailabilityEvent) {
const onPlaybackTargetAvailability = (evt: any) => {
const supportsAirPlay = evt.availability === 'available';
this.#setState({ supportsAirPlay });
};
this.media?.addEventListener('webkitplaybacktargetavailabilitychanged', onPlaybackTargetAvailability);
}
}
async #setUpVolumeRange() {
const supportsVolume = await hasVolumeSupportAsync();
this.#setState({ supportsVolume });
}
attributeChangedCallback(attrName: string, oldValue: string | null, newValue: string) {

@@ -520,0 +496,0 @@ if (!this.#isInit) {

129

src/media-theme-mux/media-theme-mux.ts

@@ -1,2 +0,2 @@

import 'media-chrome';
import { MediaTheme } from 'media-chrome';
import { html, render } from '../html';

@@ -17,24 +17,57 @@ import '../media-chrome/time-display';

type ThemeMuxTemplateProps = {
streamType: string;
streamType: string | null;
audio: boolean;
playerSize: string;
playerSize: string | null;
defaultHiddenCaptions: boolean;
hasCaptions: boolean;
forwardSeekOffset: number;
backwardSeekOffset: number;
forwardSeekOffset: string | null;
backwardSeekOffset: string | null;
};
const template = (props: ThemeMuxTemplateProps) => html`
<style>
${cssStr}
</style>
export default class MediaThemeMux extends MediaTheme {
static get observedAttributes() {
return [
'audio',
'stream-type',
'player-size',
'default-hidden-captions',
'forward-seek-offset',
'backward-seek-offset',
];
}
<media-controller audio="${props.audio || false}" class="size-${props.playerSize}">
<slot name="media" slot="media"></slot>
<media-loading-indicator slot="centered-chrome" no-auto-hide></media-loading-indicator>
${ChromeRenderer(props)}
<slot></slot>
</media-controller>
`;
attributeChangedCallback() {
this.render();
}
render() {
const props = {
audio: this.hasAttribute('audio'),
streamType: this.getAttribute('stream-type'),
playerSize: this.getAttribute('player-size'),
defaultHiddenCaptions: this.hasAttribute('default-hidden-captions'),
forwardSeekOffset: this.getAttribute('forward-seek-offset'),
backwardSeekOffset: this.getAttribute('backward-seek-offset'),
};
render(
html`
<style>
${cssStr}
</style>
<media-controller audio="${props.audio || false}" class="size-${props.playerSize}">
<slot name="media" slot="media"></slot>
<media-loading-indicator slot="centered-chrome" no-auto-hide></media-loading-indicator>
${ChromeRenderer(props)}
<slot></slot>
</media-controller>
`,
this.shadowRoot as Node
);
}
}
if (!customElements.get('media-theme-mux')) {
customElements.define('media-theme-mux', MediaThemeMux);
}
const ChromeRenderer = (props: ThemeMuxTemplateProps) => {

@@ -46,3 +79,3 @@ const { streamType, playerSize, audio } = props;

case StreamTypes.LL_LIVE: {
return AudioLiveChrome(props);
return AudioLiveChrome();
}

@@ -185,3 +218,3 @@ case StreamTypes.DVR:

export const AudioLiveChrome = (_props: ThemeMuxTemplateProps) => html`
export const AudioLiveChrome = () => html`
<media-control-bar>

@@ -200,3 +233,3 @@ ${MediaPlayButton()}

<media-control-bar slot="top-chrome">
${props.hasCaptions ? MediaCaptionsButton(props) : html``}
${MediaCaptionsButton(props)}
<div class="mxp-spacer"></div>

@@ -220,3 +253,3 @@ ${MediaAirplayButton()}

<media-control-bar slot="top-chrome" style="justify-content: flex-end;">
${props.hasCaptions ? MediaCaptionsButton(props) : html``}
${MediaCaptionsButton(props)}
${MediaAirplayButton()}

@@ -258,3 +291,3 @@ <media-cast-button></media-cast-button>

<media-playback-rate-button></media-playback-rate-button>
${props.hasCaptions ? MediaCaptionsButton(props) : html``}
${MediaCaptionsButton(props)}
${MediaAirplayButton()}

@@ -276,3 +309,3 @@ <media-cast-button></media-cast-button>

<div class="mxp-spacer"></div>
${props.hasCaptions ? MediaCaptionsButton(props) : html``}
${MediaCaptionsButton(props)}
${MediaAirplayButton()}

@@ -305,3 +338,3 @@ <media-cast-button></media-cast-button>

<div class="mxp-spacer"></div>
${props.hasCaptions ? MediaCaptionsButton(props) : html``}
${MediaCaptionsButton(props)}
${MediaAirplayButton()}

@@ -320,3 +353,3 @@ <media-cast-button></media-cast-button>

<media-control-bar slot="top-chrome" style="justify-content: flex-end;">
${props.hasCaptions ? MediaCaptionsButton(props) : html``}
${MediaCaptionsButton(props)}
${MediaAirplayButton()}

@@ -356,3 +389,3 @@ <media-cast-button></media-cast-button>

<div class="mxp-spacer"></div>
${props.hasCaptions ? MediaCaptionsButton(props) : html``}
${MediaCaptionsButton(props)}
${MediaAirplayButton()}

@@ -365,45 +398,1 @@ <media-cast-button></media-cast-button>

`;
function getProps(el: MediaThemeMux, state?: any): ThemeMuxTemplateProps {
return {
audio: el.hasAttribute('audio'),
streamType: el.getAttribute('stream-type'),
playerSize: el.getAttribute('player-size'),
defaultHiddenCaptions: el.hasAttribute('default-hidden-captions'),
hasCaptions: el.hasAttribute('has-captions'),
forwardSeekOffset: el.getAttribute('forward-seek-offset'),
backwardSeekOffset: el.getAttribute('backward-seek-offset'),
...state,
};
}
class MediaThemeMux extends HTMLElement {
static get observedAttributes() {
return [
'audio',
'stream-type',
'player-size',
'default-hidden-captions',
'has-captions',
'forward-seek-offset',
'backward-seek-offset',
];
}
constructor() {
super();
this.attachShadow({ mode: 'open' });
render(template(getProps(this)), this.shadowRoot as Node);
}
attributeChangedCallback() {
render(template(getProps(this)), this.shadowRoot as Node);
}
}
if (!customElements.get('media-theme-mux')) {
customElements.define('media-theme-mux', MediaThemeMux);
}
export default MediaThemeMux;

120

src/template.ts
import './media-theme-mux/media-theme-mux';
import './dialog';
import { getSrcFromPlaybackId, getPosterURLFromPlaybackId, getStoryboardURLFromPlaybackId } from './helpers';
import { html } from './html';
import {
castThemeName,
getSrcFromPlaybackId,
getPosterURLFromPlaybackId,
getStoryboardURLFromPlaybackId,
} from './helpers';
import { html, unsafeStatic } from './html';
// @ts-ignore

@@ -20,14 +25,15 @@ import cssStr from './styles.css';

export const content = (props: MuxTemplateProps) => html`
<media-theme-mux
<${unsafeStatic(castThemeName(props.theme) ?? 'media-theme-mux')}
audio="${props.audio || false}"
style="${stylePropsToString({
'--primary-color': props.primaryColor,
'--secondary-color': props.secondaryColor,
'--mux-time-range-padding': props.secondaryColor ? '0' : null,
'--media-range-track-border-radius': props.secondaryColor ? '0' : null,
}) ?? false}"
style="${
stylePropsToString({
'--primary-color': props.primaryColor,
'--secondary-color': props.secondaryColor,
'--mux-time-range-padding': props.secondaryColor ? '0' : null,
'--media-range-track-border-radius': props.secondaryColor ? '0' : null,
}) ?? false
}"
class="size-${props.playerSize}"
stream-type="${props.streamType}"
player-size="${props.playerSize}"
has-captions="${props.hasCaptions}"
default-hidden-captions="${props.defaultHiddenCaptions}"

@@ -57,36 +63,44 @@ forward-seek-offset="${props.forwardSeekOffset}"

custom-domain="${props.customDomain ?? false}"
src="${!!props.src
? props.src
: props.playbackId
? getSrcFromPlaybackId(props.playbackId, { domain: props.customDomain, token: props.tokens.playback })
: false}"
poster="${!!props.poster
? props.poster
: props.playbackId && !props.audio
? getPosterURLFromPlaybackId(props.playbackId, {
domain: props.customDomain,
thumbnailTime: props.thumbnailTime ?? props.startTime,
token: props.tokens.thumbnail,
})
: false}"
cast-src="${!!props.src
? props.src
: props.playbackId
? getSrcFromPlaybackId(props.playbackId, { domain: props.customDomain, token: props.tokens.playback })
: false}"
src="${
!!props.src
? props.src
: props.playbackId
? getSrcFromPlaybackId(props.playbackId, { domain: props.customDomain, token: props.tokens.playback })
: false
}"
poster="${
!!props.poster
? props.poster
: props.playbackId && !props.audio
? getPosterURLFromPlaybackId(props.playbackId, {
domain: props.customDomain,
thumbnailTime: props.thumbnailTime ?? props.startTime,
token: props.tokens.thumbnail,
})
: false
}"
cast-src="${
!!props.src
? props.src
: props.playbackId
? getSrcFromPlaybackId(props.playbackId, { domain: props.customDomain, token: props.tokens.playback })
: false
}"
cast-stream-type="${[StreamTypes.LIVE, StreamTypes.LL_LIVE].includes(props.streamType as any) ? 'live' : false}"
>
${props.playbackId &&
!props.audio &&
![StreamTypes.LIVE, StreamTypes.LL_LIVE, StreamTypes.DVR, StreamTypes.LL_DVR].includes(props.streamType as any)
? html`<track
label="thumbnails"
default
kind="metadata"
src="${getStoryboardURLFromPlaybackId(props.playbackId, {
domain: props.customDomain,
token: props.tokens.storyboard,
})}"
/>`
: html``}
${
props.playbackId &&
!props.audio &&
![StreamTypes.LIVE, StreamTypes.LL_LIVE, StreamTypes.DVR, StreamTypes.LL_DVR].includes(props.streamType as any)
? html`<track
label="thumbnails"
default
kind="metadata"
src="${getStoryboardURLFromPlaybackId(props.playbackId, {
domain: props.customDomain,
token: props.tokens.storyboard,
})}"
/>`
: html``
}
</mux-video>

@@ -116,14 +130,16 @@ <button

${props.dialog?.message}
${props.dialog?.linkUrl
? html`<a
href="${props.dialog.linkUrl}"
target="_blank"
rel="external noopener"
aria-label="${props.dialog.linkText ?? ''} ${i18n(`(opens in a new window)`)}"
>${props.dialog.linkText ?? props.dialog.linkUrl}</a
>`
: html``}
${
props.dialog?.linkUrl
? html`<a
href="${props.dialog.linkUrl}"
target="_blank"
rel="external noopener"
aria-label="${props.dialog.linkText ?? ''} ${i18n(`(opens in a new window)`)}"
>${props.dialog.linkText ?? props.dialog.linkUrl}</a
>`
: html``
}
</p>
</mxp-dialog>
</media-theme-mux>
</${unsafeStatic(castThemeName(props.theme) ?? 'media-theme-mux')}>
`;

4

src/types.d.ts

@@ -9,7 +9,5 @@ import type MuxVideoElement, { MediaError } from '@mux/mux-video';

audio: boolean;
theme?: string;
playerSize: string;
showLoading: boolean;
hasCaptions: boolean;
supportsAirPlay: boolean;
supportsVolume: boolean;
thumbnailTime: number;

@@ -16,0 +14,0 @@ primaryColor: string;

6

test/template.test.js

@@ -14,3 +14,3 @@ import { assert } from '@open-wc/testing';

minify(div.innerHTML),
'<media-theme-mux class="size-" stream-type="" player-size="" has-captions="" default-hidden-captions="" forward-seek-offset="" backward-seek-offset=""><mux-video slot="media" crossorigin="" playsinline="" player-software-name="" player-software-version=""></mux-video><button slot="seek-to-live-button" aria-disabled="" class="mxp-seek-to-live-button">\n Live\n </button><mxp-dialog no-auto-hide="" open=""><p></p></mxp-dialog></media-theme-mux>'
'<media-theme-mux class="size-" stream-type="" player-size="" default-hidden-captions="" forward-seek-offset="" backward-seek-offset=""><mux-video slot="media" crossorigin="" playsinline="" player-software-name="" player-software-version=""></mux-video><button slot="seek-to-live-button" aria-disabled="" class="mxp-seek-to-live-button">\n Live\n </button><mxp-dialog no-auto-hide="" open=""><p></p></mxp-dialog></media-theme-mux>'
);

@@ -33,3 +33,3 @@ });

minify(div.innerHTML),
'<media-theme-mux class="size-extra-small" stream-type="on-demand" player-size="extra-small" has-captions="" default-hidden-captions="" forward-seek-offset="" backward-seek-offset=""><mux-video slot="media" crossorigin="" playsinline="" player-software-name="" player-software-version="" stream-type="on-demand"></mux-video><button slot="seek-to-live-button" aria-disabled="" class="mxp-seek-to-live-button">\n Live\n </button><mxp-dialog no-auto-hide="" open=""><h3>Errr</h3><p></p></mxp-dialog></media-theme-mux>'
'<media-theme-mux class="size-extra-small" stream-type="on-demand" player-size="extra-small" default-hidden-captions="" forward-seek-offset="" backward-seek-offset=""><mux-video slot="media" crossorigin="" playsinline="" player-software-name="" player-software-version="" stream-type="on-demand"></mux-video><button slot="seek-to-live-button" aria-disabled="" class="mxp-seek-to-live-button">\n Live\n </button><mxp-dialog no-auto-hide="" open=""><h3>Errr</h3><p></p></mxp-dialog></media-theme-mux>'
);

@@ -50,3 +50,3 @@ });

minify(div.innerHTML),
'<media-theme-mux class="size-large" stream-type="on-demand" player-size="large" has-captions="" default-hidden-captions="" forward-seek-offset="" backward-seek-offset=""><mux-video slot="media" crossorigin="" playsinline="" player-software-name="" player-software-version="" stream-type="on-demand"></mux-video><button slot="seek-to-live-button" aria-disabled="" class="mxp-seek-to-live-button">\n Live\n </button><mxp-dialog no-auto-hide="" open=""><p></p></mxp-dialog></media-theme-mux>'
'<media-theme-mux class="size-large" stream-type="on-demand" player-size="large" default-hidden-captions="" forward-seek-offset="" backward-seek-offset=""><mux-video slot="media" crossorigin="" playsinline="" player-software-name="" player-software-version="" stream-type="on-demand"></mux-video><button slot="seek-to-live-button" aria-disabled="" class="mxp-seek-to-live-button">\n Live\n </button><mxp-dialog no-auto-hide="" open=""><p></p></mxp-dialog></media-theme-mux>'
);

@@ -53,0 +53,0 @@ });

dist/index.cjs.js

Sorry, the diff of this file is too big to display

dist/index.mjs

Sorry, the diff of this file is not supported yet

dist/mux-player.js

Sorry, the diff of this file is too big to display

dist/mux-player.mjs

Sorry, the diff of this file is not supported yet

dist/tsconfig.tsbuildinfo

Sorry, the diff of this file is not supported yet

src/media-theme-mux/styles.css

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc