node_modules ignore

server/node_modules/player.style/themes/instaplay/dist/media-theme.d.ts

@@ -0,0 +1,13 @@
+import { MediaThemeElement } from 'media-chrome/dist/media-theme-element.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+   'media-theme-instaplay': MediaThemeInstaplayElement;
+  }
+}
+
+declare class MediaThemeInstaplayElement extends MediaThemeElement {
+  static template: HTMLTemplateElement;
+}
+
+export default MediaThemeInstaplayElement;

server/node_modules/player.style/themes/instaplay/dist/media-theme.html

@@ -0,0 +1,147 @@
+<style>
+  :host {
+    --_primary-color: var(--media-primary-color, #fff);
+    --_secondary-color: var(--media-secondary-color, rgb(38 38 38 / 0.75));
+    --_accent-color: var(--media-accent-color, #fff);
+    --media-icon-color: var(--_primary-color);
+    --media-control-background: transparent;
+    --media-control-hover-background: transparent;
+    --media-range-thumb-opacity: 0;
+    --media-control-height: 1.2em;
+    --media-font-weight: bold;
+    --media-tooltip-display: none;
+    font-size: 16px;
+    color: var(--_primary-color);
+  }
+
+  @supports (color: color-mix(in srgb, red, blue)) {
+    :host {
+      --_secondary-color: color-mix(
+        in srgb,
+        var(--media-secondary-color, rgb(38 38 38)) 75%,
+        transparent
+      );
+      --_accent-color: color-mix(in srgb, var(--media-accent-color, #fff) 75%, transparent);
+    }
+  }
+
+  .spacer {
+    flex: 1;
+  }
+
+  media-controller {
+    display: block;
+    overflow: hidden;
+    container: media-theme-instaplay / inline-size;
+  }
+
+  media-control-bar {
+    margin: 0.4em 0.8em;
+  }
+
+  media-play-button,
+  media-mute-button {
+    padding: .3em;
+    border-radius: 50%;
+    --media-control-background: var(--_secondary-color);
+    --media-control-hover-background: var(--_secondary-color);
+  }
+
+  @supports (color: color-mix(in srgb, red, blue)) {
+    media-play-button,
+    media-mute-button {
+      --media-control-hover-background: color-mix(in srgb, var(--_secondary-color) 85%, transparent);
+    }
+  }
+
+  media-play-button {
+    --media-button-icon-transform: translateX(.05em);
+    display: none;
+    padding: .7em;
+  }
+
+  media-play-button[mediapaused] {
+    display: block;
+    line-height: 1;
+  }
+
+  media-time-range {
+    --media-range-track-height: 4px;
+    --media-range-track-transition: height 0.1s linear;
+    --media-range-bar-color: var(--_accent-color);
+    --media-range-track-background: rgb(38 38 38 / 0.25);
+    --media-time-range-buffered-color: rgb(38 38 38 / 0.3);
+    --media-range-padding-left: 0;
+    --media-range-padding-right: 0;
+    --media-preview-time-background: var(--_secondary-color);
+    --media-preview-box-margin: 0 0 3px;
+    --media-preview-time-background: transparent;
+    --media-preview-thumbnail-border-radius: 4px;
+
+    width: 100%;
+    height: 8px;
+    bottom: -3px;
+  }
+
+  media-time-range::part(preview-box) {
+    /* Add more space so thumb doesn't hide preview. */
+    --media-preview-box-margin: 0 0 20px;
+    display: grid;
+  }
+
+  media-preview-thumbnail,
+  media-preview-time-display {
+    grid-area: 1 / 1;
+  }
+
+  media-preview-time-display {
+    place-self: end center;
+    position: relative;
+    line-height: 2;
+  }
+
+  @container (inline-size >=384px) {
+    [role='button'],
+    media-controller {
+      font-size: 17px;
+    }
+
+    media-time-range {
+      bottom: -2px;
+    }
+
+    media-time-range::part(preview-box) {
+      --media-preview-box-margin: 0 0 0.5em;
+    }
+  }
+</style>
+
+<media-controller
+  defaultsubtitles="{{defaultsubtitles}}"
+  defaultduration="{{defaultduration}}"
+  gesturesdisabled="{{disabled}}"
+  hotkeys="{{hotkeys}}"
+  nohotkeys="{{nohotkeys}}"
+  defaultstreamtype="on-demand"
+>
+  <slot name="media" slot="media"></slot>
+  <slot name="poster" slot="poster"></slot>
+
+  <media-play-button slot="centered-chrome">
+    <svg slot="play" aria-hidden="true" viewBox="0 0 24 24" fill="currentColor">
+      <path fill-rule="evenodd" d="M4.5 5.653c0-1.427 1.529-2.33 2.779-1.643l11.54 6.347c1.295.712 1.295 2.573 0 3.286L7.28 19.99c-1.25.687-2.779-.217-2.779-1.643V5.653Z" clip-rule="evenodd" />
+    </svg>
+  </media-play-button>
+
+  <media-control-bar noautohide>
+    <div class="spacer"></div>
+    <media-mute-button></media-mute-button>
+  </media-control-bar>
+
+  <media-time-range noautohide>
+    <media-preview-thumbnail slot="preview"></media-preview-thumbnail>
+    <media-preview-time-display slot="preview"></media-preview-time-display>
+  </media-time-range>
+
+  <slot></slot>
+</media-controller>

server/node_modules/player.style/themes/instaplay/dist/media-theme.js

@@ -0,0 +1,177 @@
+/*
+<media-theme-instaplay>
+  <video
+    slot="media"
+    src="https://stream.mux.com/fXNzVtmtWuyz00xnSrJg4OJH6PyNo6D02UzmgeKGkP5YQ/high.mp4"
+  ></video>
+</media-theme-instaplay>
+*/
+
+import 'media-chrome';
+import { globalThis } from 'media-chrome/dist/utils/server-safe-globals.js';
+import { MediaThemeElement } from 'media-chrome/dist/media-theme-element.js';
+import 'media-chrome/dist/menu/index.js';
+
+const template = globalThis.document?.createElement?.('template');
+if (template) {
+  template.innerHTML = /*html*/`
+    <style>
+      :host {
+        --_primary-color: var(--media-primary-color, #fff);
+        --_secondary-color: var(--media-secondary-color, rgb(38 38 38 / 0.75));
+        --_accent-color: var(--media-accent-color, #fff);
+        --media-icon-color: var(--_primary-color);
+        --media-control-background: transparent;
+        --media-control-hover-background: transparent;
+        --media-range-thumb-opacity: 0;
+        --media-control-height: 1.2em;
+        --media-font-weight: bold;
+        --media-tooltip-display: none;
+        font-size: 16px;
+        color: var(--_primary-color);
+      }
+
+      @supports (color: color-mix(in srgb, red, blue)) {
+        :host {
+          --_secondary-color: color-mix(
+            in srgb,
+            var(--media-secondary-color, rgb(38 38 38)) 75%,
+            transparent
+          );
+          --_accent-color: color-mix(in srgb, var(--media-accent-color, #fff) 75%, transparent);
+        }
+      }
+
+      .spacer {
+        flex: 1;
+      }
+
+      media-controller {
+        display: block;
+        overflow: hidden;
+        container: media-theme-instaplay / inline-size;
+      }
+
+      media-control-bar {
+        margin: 0.4em 0.8em;
+      }
+
+      media-play-button,
+      media-mute-button {
+        padding: .3em;
+        border-radius: 50%;
+        --media-control-background: var(--_secondary-color);
+        --media-control-hover-background: var(--_secondary-color);
+      }
+
+      @supports (color: color-mix(in srgb, red, blue)) {
+        media-play-button,
+        media-mute-button {
+          --media-control-hover-background: color-mix(in srgb, var(--_secondary-color) 85%, transparent);
+        }
+      }
+
+      media-play-button {
+        --media-button-icon-transform: translateX(.05em);
+        display: none;
+        padding: .7em;
+      }
+
+      media-play-button[mediapaused] {
+        display: block;
+        line-height: 1;
+      }
+
+      media-time-range {
+        --media-range-track-height: 4px;
+        --media-range-track-transition: height 0.1s linear;
+        --media-range-bar-color: var(--_accent-color);
+        --media-range-track-background: rgb(38 38 38 / 0.25);
+        --media-time-range-buffered-color: rgb(38 38 38 / 0.3);
+        --media-range-padding-left: 0;
+        --media-range-padding-right: 0;
+        --media-preview-time-background: var(--_secondary-color);
+        --media-preview-box-margin: 0 0 3px;
+        --media-preview-time-background: transparent;
+        --media-preview-thumbnail-border-radius: 4px;
+
+        width: 100%;
+        height: 8px;
+        bottom: -3px;
+      }
+
+      media-time-range::part(preview-box) {
+        /* Add more space so thumb doesn't hide preview. */
+        --media-preview-box-margin: 0 0 20px;
+        display: grid;
+      }
+
+      media-preview-thumbnail,
+      media-preview-time-display {
+        grid-area: 1 / 1;
+      }
+
+      media-preview-time-display {
+        place-self: end center;
+        position: relative;
+        line-height: 2;
+      }
+
+      @container (inline-size >=384px) {
+        [role='button'],
+        media-controller {
+          font-size: 17px;
+        }
+
+        media-time-range {
+          bottom: -2px;
+        }
+
+        media-time-range::part(preview-box) {
+          --media-preview-box-margin: 0 0 0.5em;
+        }
+      }
+    </style>
+
+    <media-controller
+      defaultsubtitles="{{defaultsubtitles}}"
+      defaultduration="{{defaultduration}}"
+      gesturesdisabled="{{disabled}}"
+      hotkeys="{{hotkeys}}"
+      nohotkeys="{{nohotkeys}}"
+      defaultstreamtype="on-demand"
+    >
+      <slot name="media" slot="media"></slot>
+      <slot name="poster" slot="poster"></slot>
+
+      <media-play-button slot="centered-chrome">
+        <svg slot="play" aria-hidden="true" viewBox="0 0 24 24" fill="currentColor">
+          <path fill-rule="evenodd" d="M4.5 5.653c0-1.427 1.529-2.33 2.779-1.643l11.54 6.347c1.295.712 1.295 2.573 0 3.286L7.28 19.99c-1.25.687-2.779-.217-2.779-1.643V5.653Z" clip-rule="evenodd" />
+        </svg>
+      </media-play-button>
+
+      <media-control-bar noautohide>
+        <div class="spacer"></div>
+        <media-mute-button></media-mute-button>
+      </media-control-bar>
+
+      <media-time-range noautohide>
+        <media-preview-thumbnail slot="preview"></media-preview-thumbnail>
+        <media-preview-time-display slot="preview"></media-preview-time-display>
+      </media-time-range>
+
+      <slot></slot>
+    </media-controller>
+
+  `;
+}
+
+class MediaThemeInstaplayElement extends MediaThemeElement {
+  static template = template;
+}
+
+if (globalThis.customElements && !globalThis.customElements.get('media-theme-instaplay')) {
+  globalThis.customElements.define('media-theme-instaplay', MediaThemeInstaplayElement);
+}
+
+export default MediaThemeInstaplayElement;

server/node_modules/player.style/themes/instaplay/dist/react.d.ts

@@ -0,0 +1,7 @@
+import MediaThemeInstaplayElement from './media-theme.js';
+
+declare const MediaThemeInstaplay: React.ForwardRefExoticComponent<
+  React.DetailedHTMLProps<React.HTMLAttributes<MediaThemeInstaplayElement>, MediaThemeInstaplayElement>
+>;
+
+export default MediaThemeInstaplay;

server/node_modules/player.style/themes/instaplay/dist/react.js

@@ -0,0 +1,94 @@
+'use client';
+
+import React from 'react';
+import Element from './media-theme.js';
+
+export default React.forwardRef((allProps, ref) => {
+  let { children, suppressHydrationWarning, ...props } = allProps;
+  const elementRef = React.useRef(null);
+
+  for (let name in props) {
+    if (name[0] === 'o' && name[1] === 'n') {
+      const useCapture = name.endsWith('Capture');
+      const eventName = name.slice(2, useCapture ? name.length - 7 : undefined).toLowerCase();
+      const callback = props[name];
+
+      React.useEffect(() => {
+        const eventTarget = elementRef?.current;
+        if (!eventTarget || typeof callback !== 'function') return;
+
+        eventTarget.addEventListener(eventName, callback, useCapture);
+
+        return () => {
+          eventTarget.removeEventListener(eventName, callback, useCapture);
+        };
+      }, [elementRef?.current, callback]);
+    }
+  }
+
+  const attrs = propsToAttrs(props);
+
+  // Only render the custom element template HTML on the server..
+  // The custom element will render itself on the client.
+  if (typeof window === 'undefined' && Element?.getTemplateHTML && Element?.shadowRootOptions) {
+    const { mode, delegatesFocus } = Element.shadowRootOptions;
+
+    const templateShadowRoot = React.createElement('template', {
+      shadowrootmode: mode,
+      shadowrootdelegatesfocus: delegatesFocus,
+      dangerouslySetInnerHTML: {
+        __html: Element.getTemplateHTML(attrs),
+      },
+    });
+
+    children = [templateShadowRoot, children];
+  }
+
+  return React.createElement('media-theme-instaplay', {
+    ...attrs,
+    ref: React.useCallback(
+      (node) => {
+        elementRef.current = node;
+        if (typeof ref === 'function') {
+          ref(node);
+        } else if (ref !== null) {
+          ref.current = node;
+        }
+      },
+      [ref]
+    ),
+    children,
+    suppressHydrationWarning,
+  });
+});
+
+const ReactPropToAttrNameMap = {
+  className: 'class',
+  classname: 'class',
+  htmlFor: 'for',
+  viewBox: 'viewBox',
+};
+
+function propsToAttrs(props = {}) {
+  let attrs = {};
+  for (let [propName, propValue] of Object.entries(props)) {
+    let attrName = toAttrName(propName, propValue);
+    if (attrName) attrs[attrName] = toAttrValue(propValue);
+  }
+  return attrs;
+}
+
+function toAttrName(propName, propValue) {
+  if (ReactPropToAttrNameMap[propName]) return ReactPropToAttrNameMap[propName];
+  if (typeof propValue == 'undefined') return undefined;
+  if (typeof propValue === 'boolean' && !propValue) return undefined;
+  if (propName.startsWith('on') && typeof propValue === 'function') return undefined;
+  if (/[A-Z]/.test(propName)) return propName.toLowerCase();
+  return propName;
+}
+
+function toAttrValue(propValue) {
+  if (typeof propValue === 'boolean') return '';
+  if (Array.isArray(propValue)) return propValue.join(' ');
+  return propValue;
+}