feat: add optional mux logo to mux video

examples/svelte-kit/src/routes/mux-video/+page.svelte

@@ -25,6 +25,7 @@
 			width: 100%;
 			aspect-ratio: 16 / 9;
 			margin: 1rem 0 2rem;
+			background-color: #000;
 		}
 	</style>
 </svelte:head>
@@ -36,6 +37,7 @@
 	metadata-viewer-user-id="user-id-6789"
 	stream-type="on-demand"
 	controls
+	logo
 	muted
 ></mux-video>
 

packages/mux-video/src/assets/mux-logo.ts

@@ -0,0 +1,2 @@
+export const muxLogo = `
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" class="logo" part="logo" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 1600 500"><g fill="#fff"><path d="M994.287 93.486c-17.121 0-31-13.879-31-31 0-17.121 13.879-31 31-31 17.121 0 31 13.879 31 31 0 17.121-13.879 31-31 31m0-93.486c-34.509 0-62.484 27.976-62.484 62.486v187.511c0 68.943-56.09 125.033-125.032 125.033s-125.03-56.09-125.03-125.033V62.486C681.741 27.976 653.765 0 619.256 0s-62.484 27.976-62.484 62.486v187.511C556.772 387.85 668.921 500 806.771 500c137.851 0 250.001-112.15 250.001-250.003V62.486c0-34.51-27.976-62.486-62.485-62.486M1537.51 468.511c-17.121 0-31-13.879-31-31 0-17.121 13.879-31 31-31 17.121 0 31 13.879 31 31 0 17.121-13.879 31-31 31m-275.883-218.509-143.33 143.329c-24.402 24.402-24.402 63.966 0 88.368 24.402 24.402 63.967 24.402 88.369 0l143.33-143.329 143.328 143.329c24.402 24.4 63.967 24.402 88.369 0 24.403-24.402 24.403-63.966.001-88.368l-143.33-143.329.001-.004 143.329-143.329c24.402-24.402 24.402-63.965 0-88.367s-63.967-24.402-88.369 0L1349.996 161.63 1206.667 18.302c-24.402-24.401-63.967-24.402-88.369 0s-24.402 63.965 0 88.367l143.329 143.329v.004ZM437.511 468.521c-17.121 0-31-13.879-31-31 0-17.121 13.879-31 31-31 17.121 0 31 13.879 31 31 0 17.121-13.879 31-31 31M461.426 4.759C438.078-4.913 411.2.432 393.33 18.303L249.999 161.632 106.669 18.303C88.798.432 61.922-4.913 38.573 4.759 15.224 14.43-.001 37.214-.001 62.488v375.026c0 34.51 27.977 62.486 62.487 62.486 34.51 0 62.486-27.976 62.486-62.486V213.341l80.843 80.844c24.404 24.402 63.965 24.402 88.369 0l80.843-80.844v224.173c0 34.51 27.976 62.486 62.486 62.486s62.486-27.976 62.486-62.486V62.488c0-25.274-15.224-48.058-38.573-57.729" style="fill-rule:nonzero"/></g></svg>`;

packages/mux-video/src/index.ts

@@ -48,6 +48,7 @@ import { CustomVideoElement, Events as VideoEvents } from 'custom-media-element'
 import { CastableMediaMixin } from 'castable-video/castable-mixin.js';
 import { MediaTracksMixin } from 'media-tracks';
 import type { HlsConfig } from 'hls.js';
+import { muxLogo } from './assets/mux-logo.js';
 
 // Must mutate so the added events are available in custom-media-element.
 VideoEvents.push('castchange', 'entercast', 'leavecast');
@@ -80,6 +81,7 @@ export const Attributes = {
   TARGET_LIVE_WINDOW: 'target-live-window',
   LIVE_EDGE_OFFSET: 'live-edge-offset',
   TYPE: 'type',
+  LOGO: 'logo',
 } as const;
 
 const AttributeNameValues = Object.values(Attributes);
@@ -110,6 +112,43 @@ class MuxVideoBaseElement extends CustomVideoElement implements Partial<MuxMedia
   #playerSoftwareName?: string;
   #errorTranslator?: (errorEvent: any) => any;
 
+  static getTemplateHTML(attrs: Record<string, string> = {}) {
+    const template = super.getTemplateHTML(attrs);
+    const showLogo = attrs['logo'] !== 'false' && attrs['logo'] !== undefined;
+    const hasLogoSrc = attrs['logo'] && attrs['logo'] !== '';
+    const logoSrc = attrs['logo'];
+
+    const logoTemplate = showLogo
+      ? `
+      <style>
+        :host {
+          position: relative;
+        }
+        :host slot[name="logo"] {
+          display: flex;
+          justify-content: end;
+          position: absolute;
+          top: 1rem;
+          right: 1rem;
+
+        }
+         :host slot[name="logo"] .logo{
+          width: 5rem;
+          pointer-events: none;
+          user-select: none;
+         }
+      </style>
+      <slot name="logo">
+        ${hasLogoSrc ? `<img class="logo" part="logo" src="${logoSrc}" />` : muxLogo}
+      </slot>
+    `
+      : '';
+
+    return `
+      ${template}
+      ${logoTemplate}
+    `;
+  }
   constructor() {
     super();
     this.#defaultPlayerInitTime = generatePlayerInitTime();
@@ -704,6 +743,18 @@ class MuxVideoBaseElement extends CustomVideoElement implements Partial<MuxMedia
     this.#_hlsConfig = val;
   }
 
+  get logo() {
+    return this.getAttribute(Attributes.LOGO);
+  }
+
+  set logo(val) {
+    if (val) {
+      this.setAttribute(Attributes.LOGO, val);
+    } else {
+      this.removeAttribute(Attributes.LOGO);
+    }
+  }
+
   async #requestLoad() {
     if (this.#loadRequested) return;
     await (this.#loadRequested = Promise.resolve());
@@ -808,7 +859,6 @@ class MuxVideoBaseElement extends CustomVideoElement implements Partial<MuxMedia
       this.#requestLoad();
     }
   }
-
   disconnectedCallback(): void {
     this.unload();
   }