@mux/mux-player - npm Package Compare versions

Comparing version 0.1.0-canary.10-77d0386 to 0.1.0-canary.10-8374ff1

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

@@ -175,4 +175,7 @@ import '@mux/playback-core';
     storyboardToken: string | undefined;
+    addTextTrack(kind: TextTrackKind, label: string, lang?: string, id?: string): TextTrack | undefined;
+    removeTextTrack(track: TextTrack): void;
+    readonly textTracks: TextTrackList | undefined;
 }
 export declare function getVideoAttribute(el: MuxPlayerElement, name: string): string | null;
 export default MuxPlayerElement;

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

 export declare const Airplay: () => import("@github/template-parts").TemplateInstance;
 export declare const CaptionsOff: () => import("@github/template-parts").TemplateInstance;
 export declare const CaptionsOn: () => import("@github/template-parts").TemplateInstance;
+export declare const CastEnter: () => import("@github/template-parts").TemplateInstance;
+export declare const CastExit: () => import("@github/template-parts").TemplateInstance;
 export declare const FullscreenEnter: () => import("@github/template-parts").TemplateInstance;
@@ -5,0 +7,0 @@ export declare const FullscreenExit: () => import("@github/template-parts").TemplateInstance;

dist/types/index.d.ts

@@ -194,4 +194,7 @@ import '@mux/playback-core';
     set storyboardToken(val: string | undefined);
+    addTextTrack(kind: TextTrackKind, label: string, lang?: string, id?: string): TextTrack | undefined;
+    removeTextTrack(track: TextTrack): void;
+    get textTracks(): TextTrackList | undefined;
 }
 export declare function getVideoAttribute(el: MuxPlayerElement, name: string): string | null;
 export default MuxPlayerElement;

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

 export declare const Airplay: () => import("@github/template-parts").TemplateInstance;
 export declare const CaptionsOff: () => import("@github/template-parts").TemplateInstance;
 export declare const CaptionsOn: () => import("@github/template-parts").TemplateInstance;
+export declare const CastEnter: () => import("@github/template-parts").TemplateInstance;
+export declare const CastExit: () => import("@github/template-parts").TemplateInstance;
 export declare const FullscreenEnter: () => import("@github/template-parts").TemplateInstance;
@@ -5,0 +7,0 @@ export declare const FullscreenExit: () => import("@github/template-parts").TemplateInstance;

package.json

 {
   "name": "@mux/mux-player",
-  "version": "0.1.0-canary.10-77d0386",
+  "version": "0.1.0-canary.10-8374ff1",
   "description": "An open source Mux player web component that Just Works™",
@@ -56,3 +56,3 @@ "main": "./dist/index.cjs.js",
     "@mux/playback-core": "0.8.0",
-    "media-chrome": "0.6.9"
+    "media-chrome": "0.8.1"
   },
@@ -59,0 +59,0 @@ "devDependencies": {

README.md

@@ -81,3 +81,2 @@ <p align="center">
     stream-type="on-demand"
-    controls
   ></mux-player>
@@ -99,3 +98,2 @@ </body>
   metadata-viewer-user-id="user-id-1234"
-  controls
 >
@@ -136,3 +134,2 @@ </mux-player>
   prefer-mse
-  controls
 >
@@ -172,2 +169,3 @@ </mux-player>
 | `beacon-collection-domain` | `string` (domain name)                                    | Assigns a custom domain to be used for Mux Data collection.                                                                                                                                                                                                                                                                                                                                      | N/A           |
+| `custom-domain`            | `string` (domain name)                                    | Assigns a custom domain to be used for Mux Video.                                                                                                                                                                                                                                                                                                                                                | N/A           |
 
@@ -187,3 +185,2 @@ ### Methods
 | `buffered` <sub><sup>Read only</sup></sub>    | Returns a `TimeRanges` object that indicates the ranges of the media source that the browser has buffered (if any) at the moment the buffered property is accessed.                                                                                                                                                 | `undefined` |
-| `controls`                                    | Is a Boolean that reflects the controls HTML attribute, indicating whether user interface items for controlling the resource should be displayed.                                                                                                                                                                   | `false`     |
 | `crossOrigin`                                 | A DOMString indicating the CORS setting for this media element.                                                                                                                                                                                                                                                     | `null`      |
@@ -207,2 +204,3 @@ | `currentTime`                                 | A double-precision floating-point value indicating the current playback time in seconds; if the media has not started to play and has not been seeked, this value is the media's initial playback time. Setting this value seeks the media to the new time. The time is specified relative to the media's timeline. | `0`         |
 | `volume`                                      | Is a double indicating the audio volume, from 0.0 (silent) to 1.0 (loudest).                                                                                                                                                                                                                                        | `1`         |
+| `customDomain`                                | Is a `String` that assigns a custom domain to be used for Mux Video.                                                                                                                                                                                                                                                | `undefined` |
 
@@ -209,0 +207,0 @@ ### Events

src/index.ts

@@ -6,3 +6,3 @@ // import playback-core here to make sure that the polyfill is loaded
 import MuxVideoElement, { MediaError } from '@mux/mux-video';
-import { Metadata, StreamTypes } from '@mux/playback-core';
+import { Metadata, StreamTypes, addTextTrack, removeTextTrack } from '@mux/playback-core';
 import VideoApiElement, { initVideoApi } from './video-api';
@@ -916,2 +916,18 @@ import { getPlayerVersion, isInLiveWindow, seekToLive, toPropName } from './helpers';
   }
+
+  addTextTrack(kind: TextTrackKind, label: string, lang?: string, id?: string) {
+    const mediaEl = this.media?.nativeEl;
+    if (!mediaEl) return;
+    return addTextTrack(mediaEl, kind, label, lang, id);
+  }
+
+  removeTextTrack(track: TextTrack) {
+    const mediaEl = this.media?.nativeEl;
+    if (!mediaEl) return;
+    return removeTextTrack(mediaEl, track);
+  }
+
+  get textTracks() {
+    return this.media?.textTracks;
+  }
 }
@@ -918,0 +934,0 @@

src/media-theme-mux/icons.ts

@@ -6,2 +6,4 @@ // @ts-nocheck
 import captionsOnIcon from './icons/captions-on.svg';
+import castEnter from './icons/cast-enter.svg';
+import castExit from './icons/cast-exit.svg';
 import fullscreenEnter from './icons/fullscreen-enter.svg';
@@ -23,2 +25,4 @@ import fullscreenExit from './icons/fullscreen-exit.svg';
 export const CaptionsOn = () => createTemplateInstance(captionsOnIcon);
+export const CastEnter = () => createTemplateInstance(castEnter);
+export const CastExit = () => createTemplateInstance(castExit);
 export const FullscreenEnter = () => createTemplateInstance(fullscreenEnter);
@@ -25,0 +29,0 @@ export const FullscreenExit = () => createTemplateInstance(fullscreenExit);

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

@@ -188,2 +188,9 @@ import { MediaTheme } from 'media-chrome';
 
+// prettier-ignore
+const MediaCastButton = () => html`
+<media-cast-button>
+  ${icons.CastEnter()}
+  ${icons.CastExit()}
+</media-cast-button>`;
+
 export const AudioVodChrome = (props: ThemeMuxTemplateProps) => html`
@@ -197,4 +204,3 @@ <media-control-bar>
     <media-playback-rate-button></media-playback-rate-button>
-    ${MediaAirplayButton()}
-    <media-cast-button></media-cast-button>
+    ${MediaAirplayButton()} ${MediaCastButton()}
   </media-control-bar>
@@ -213,4 +219,3 @@ `;
     <media-playback-rate-button></media-playback-rate-button>
-    ${MediaAirplayButton()}
-    <media-cast-button></media-cast-button>
+    ${MediaAirplayButton()} ${MediaCastButton()}
   </media-control-bar>
@@ -225,4 +230,3 @@ `;
     <media-volume-range></media-volume-range>
-    ${MediaAirplayButton()}
-    <media-cast-button></media-cast-button>
+    ${MediaAirplayButton()} ${MediaCastButton()}
   </media-control-bar>
@@ -237,3 +241,3 @@ `;
     ${MediaAirplayButton()}
-    <media-cast-button></media-cast-button>
+    ${MediaCastButton()}
     ${MediaPipButton()}
@@ -256,3 +260,3 @@ </media-control-bar>
     ${MediaAirplayButton()}
-    <media-cast-button></media-cast-button>
+    ${MediaCastButton()}
     ${MediaPipButton()}
@@ -294,3 +298,3 @@ </media-control-bar>
     ${MediaAirplayButton()}
-    <media-cast-button></media-cast-button>
+    ${MediaCastButton()}
     ${MediaPipButton()}
@@ -312,3 +316,3 @@ ${MediaFullscreenButton()}
     ${MediaAirplayButton()}
-    <media-cast-button></media-cast-button>
+    ${MediaCastButton()}
     ${MediaPipButton()}
@@ -341,3 +345,3 @@ </media-control-bar>
     ${MediaAirplayButton()}
-    <media-cast-button></media-cast-button>
+    ${MediaCastButton()}
     ${MediaPipButton()}
@@ -356,3 +360,3 @@ ${MediaFullscreenButton()}
     ${MediaAirplayButton()}
-    <media-cast-button></media-cast-button>
+    ${MediaCastButton()}
     ${MediaPipButton()}
@@ -392,3 +396,3 @@ </media-control-bar>
     ${MediaAirplayButton()}
-    <media-cast-button></media-cast-button>
+    ${MediaCastButton()}
     ${MediaPipButton()}
@@ -395,0 +399,0 @@ ${MediaFullscreenButton()}

src/template.ts

@@ -31,7 +31,5 @@ import './media-theme-mux/media-theme-mux';
         '--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}"
+    class="size-${props.playerSize}${props.secondaryColor ? ' two-tone' : ''}"
     stream-type="${props.streamType}"
@@ -38,0 +36,0 @@ player-size="${props.playerSize}"

No alert changes

Improved metrics

Total package byte prevSize

1740085

increased by1.84%

Number of downloads

124825

increased by14.17%

Number of package files

76

increased by2.7%

Lines of code

14486

increased by3.67%

Worsened metrics

Number of lines in readme file

230

decreased by-0.86%

Published versions last months

13

decreased by-18.75%

Published versions last week

3

decreased by-25%

Dependency changes

• + Addedmedia-chrome@0.8.1(transitive)

• - Removedmedia-chrome@0.6.9(transitive)

• Updatedmedia-chrome@0.8.1