node_modules ignore

server/node_modules/player.style/themes/tailwind-audio/CHANGELOG.md

@@ -0,0 +1,30 @@
+# Changelog
+
+## [0.0.7](https://github.com/muxinc/player.style/compare/@player.style/tailwind-audio@0.0.6...@player.style/tailwind-audio@0.0.7) (2024-09-10)
+
+
+### Dependencies
+
+* The following workspace dependencies were updated
+  * devDependencies
+    * build-theme bumped from ^0.0.3 to ^0.0.4
+
+## [0.0.6](https://github.com/muxinc/player.style/compare/@player.style/tailwind-audio-v0.0.5...@player.style/tailwind-audio@0.0.6) (2024-08-15)
+
+
+### Features
+
+* add tailwind-audio theme ([#40](https://github.com/muxinc/player.style/issues/40)) ([c80e967](https://github.com/muxinc/player.style/commit/c80e9670548ff1db8e241e0b8dc90084004ebd5f))
+
+
+### Bug Fixes
+
+* improve color CSS vars & site color picker ([#49](https://github.com/muxinc/player.style/issues/49)) ([a8e8dc0](https://github.com/muxinc/player.style/commit/a8e8dc0898979e72d035af87233b2a0941fdcc7f))
+* upgrade to Media Chrome v4 ([#64](https://github.com/muxinc/player.style/issues/64)) ([be68af2](https://github.com/muxinc/player.style/commit/be68af2f9c3a6ff6674b9951f0b34f2bfdb042aa))
+
+
+### Dependencies
+
+* The following workspace dependencies were updated
+  * devDependencies
+    * build-theme bumped from ^0.0.2 to ^0.0.3

server/node_modules/player.style/themes/tailwind-audio/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-tailwind-audio': MediaThemeTailwindAudioElement;
+  }
+}
+
+declare class MediaThemeTailwindAudioElement extends MediaThemeElement {
+  static template: HTMLTemplateElement;
+}
+
+export default MediaThemeTailwindAudioElement;

server/node_modules/player.style/themes/tailwind-audio/dist/react.d.ts

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

server/node_modules/player.style/themes/tailwind-audio/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-tailwind-audio', {
+    ...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;
+}

server/node_modules/player.style/themes/tailwind-audio/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@player.style/tailwind-audio",
+  "version": "0.0.7",
+  "description": "A slick, minimal audio player theme made with Tailwind CSS.",
+  "author": "@luwes",
+  "license": "MIT",
+  "homepage": "https://github.com/muxinc/player.style#readme",
+  "bugs": {
+    "url": "https://github.com/muxinc/player.style/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/muxinc/player.style.git",
+    "directory": "themes/tailwind-audio"
+  },
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "main": "dist/media-theme.js",
+  "exports": {
+    ".": "./dist/media-theme.js",
+    "./react": "./dist/react.js"
+  },
+  "scripts": {
+    "clean": "rimraf dist",
+    "prebuild": "tailwindcss -i ./styles.css --minify -o ./dist/styles.css",
+    "build": "build-theme"
+  },
+  "peerDependencies": {
+    "media-chrome": ">=1.0.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/container-queries": "^0.1.0",
+    "build-theme": "^0.0.4",
+    "tailwindcss": "^3.2.4"
+  }
+}

server/node_modules/player.style/themes/tailwind-audio/styles.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

server/node_modules/player.style/themes/tailwind-audio/tailwind.config.js

@@ -0,0 +1,16 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['./**/*.{html,js}'],
+  theme: {
+    extend: {
+      colors: {
+        // todo: needs more sub variants because slate-500, slate-700 and slate-900 is used.
+        //       ideally 3 shades of each color would be created via CSS.
+        // primary: 'var(--media-primary-color, rgb(51 65 85 / var(--tw-bg-opacity)))',
+        secondary: 'var(--media-secondary-color, #fff)',
+        accent: 'var(--media-accent-color, rgb(79 70 229))',
+      },
+    },
+  },
+  plugins: [require('@tailwindcss/container-queries')],
+};

server/node_modules/player.style/themes/tailwind-audio/template.html

@@ -0,0 +1,229 @@
+<style>
+  <%- await include('/styles.css') -%>
+</style>
+
+<svg class="hidden">
+  <symbol
+    id="backward"
+    viewBox="0 0 24 24"
+    stroke-width="1.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <path
+      d="M8 5L5 8M5 8L8 11M5 8H13.5C16.5376 8 19 10.4624 19 13.5C19 15.4826 18.148 17.2202 17 18.188"
+    ></path>
+    <path d="M5 15V19"></path>
+    <path
+      d="M8 18V16C8 15.4477 8.44772 15 9 15H10C10.5523 15 11 15.4477 11 16V18C11 18.5523
+        10.5523 19 10 19H9C8.44772 19 8 18.5523 8 18Z"
+    ></path>
+  </symbol>
+
+  <symbol id="play" viewBox="0 0 24 24">
+    <path
+      fill-rule="evenodd"
+      d="M4.5 5.653c0-1.426 1.529-2.33 2.779-1.643l11.54 6.348c1.295.712 1.295 2.573 0
+        3.285L7.28 19.991c-1.25.687-2.779-.217-2.779-1.643V5.653z"
+      clip-rule="evenodd"
+    />
+  </symbol>
+
+  <symbol id="pause" viewBox="0 0 24 24">
+    <path
+      fill-rule="evenodd"
+      d="M6.75 5.25a.75.75 0 01.75-.75H9a.75.75 0 01.75.75v13.5a.75.75 0
+      01-.75.75H7.5a.75.75 0 01-.75-.75V5.25zm7.5 0A.75.75 0 0115 4.5h1.5a.75.75 0 01.75.75v13.5a.75.75 0
+      01-.75.75H15a.75.75 0 01-.75-.75V5.25z"
+      clip-rule="evenodd"
+    />
+  </symbol>
+
+  <symbol id="forward" viewBox="0 0 24 24">
+    <path
+      d="M16 5L19 8M19 8L16 11M19 8H10.5C7.46243 8 5 10.4624 5 13.5C5 15.4826 5.85204 17.2202 7 18.188"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    ></path>
+    <path d="M13 15V19" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
+    <path
+      d="M16 18V16C16 15.4477 16.4477 15 17 15H18C18.5523 15 19 15.4477 19 16V18C19 18.5523 18.5523 19 18
+      19H17C16.4477 19 16 18.5523 16 18Z"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    ></path>
+  </symbol>
+
+  <symbol id="high" viewBox="0 0 24 24">
+    <path
+      d="M13.5 4.06c0-1.336-1.616-2.005-2.56-1.06l-4.5 4.5H4.508c-1.141 0-2.318.664-2.66 1.905A9.76 9.76 0
+      001.5 12c0 .898.121 1.768.35 2.595.341 1.24 1.518 1.905 2.659 1.905h1.93l4.5 4.5c.945.945 2.561.276
+      2.561-1.06V4.06zM18.584 5.106a.75.75 0 011.06 0c3.808 3.807 3.808 9.98 0 13.788a.75.75 0 11-1.06-1.06
+      8.25 8.25 0 000-11.668.75.75 0 010-1.06z"
+    ></path>
+    <path
+      d="M15.932 7.757a.75.75 0 011.061 0 6 6 0 010 8.486.75.75 0 01-1.06-1.061 4.5 4.5 0 000-6.364.75.75 0
+      010-1.06z"
+    ></path>
+  </symbol>
+
+  <symbol id="off" viewBox="0 0 24 24">
+    <path
+      d="M13.5 4.06c0-1.336-1.616-2.005-2.56-1.06l-4.5 4.5H4.508c-1.141 0-2.318.664-2.66 1.905A9.76 9.76 0
+      001.5 12c0 .898.121 1.768.35 2.595.341 1.24 1.518 1.905 2.659 1.905h1.93l4.5 4.5c.945.945 2.561.276
+      2.561-1.06V4.06zM17.78 9.22a.75.75 0 10-1.06 1.06L18.44 12l-1.72 1.72a.75.75 0 001.06 1.06l1.72-1.72 1.72
+      1.72a.75.75 0 101.06-1.06L20.56 12l1.72-1.72a.75.75 0 00-1.06-1.06l-1.72 1.72-1.72-1.72z"
+    />
+  </symbol>
+</svg>
+
+<media-controller
+  audio
+  defaultsubtitles="{{defaultsubtitles}}"
+  defaultduration="{{defaultduration}}"
+  gesturesdisabled="{{disabled}}"
+  hotkeys="{{hotkeys}}"
+  nohotkeys="{{nohotkeys}}"
+  defaultstreamtype="on-demand"
+  class="@container block w-full shadow-xl shadow-black/5"
+  style="
+    --media-background-color: transparent;
+    --media-control-background: transparent;
+    --media-control-hover-background: transparent;
+    --media-tooltip-display: none;
+  "
+>
+  <slot name="media" slot="media"></slot>
+
+  <media-time-range
+    class="block @md:hidden w-full h-2 min-h-0 p-0 bg-slate-50 focus-visible:ring-slate-700 focus-visible:ring-2"
+    style="
+      --media-range-track-background: transparent;
+      --media-time-range-buffered-color: rgb(0 0 0 / 0.02);
+      --media-range-bar-color: var(--media-accent-color, rgb(79 70 229));
+      --media-range-track-height: 0.5rem;
+      --media-range-thumb-background: var(--media-accent-color, rgb(79 70 229));
+      --media-range-thumb-box-shadow: 0 0 0 2px var(--media-secondary-color, rgb(255 255 255 / 0.9));
+      --media-range-thumb-width: 0.25rem;
+      --media-range-thumb-height: 1rem;
+      --media-preview-time-text-shadow: transparent;
+    "
+  >
+    <media-preview-time-display
+      slot="preview"
+      class="text-slate-600 text-xs"
+    ></media-preview-time-display>
+  </media-time-range>
+
+  <media-control-bar
+    class="h-20 @md:h-16 px-4 w-full flex items-center justify-between @md:rounded-md @md:ring-1 @md:ring-slate-700/10 bg-secondary"
+  >
+    <media-seek-backward-button
+      seekoffset="10"
+      class="w-8 h-8 p-0 group rounded-full focus:outline-none focus-visible:ring-slate-700 focus-visible:ring-2"
+    >
+      <svg
+        slot="icon"
+        aria-hidden="true"
+        class="w-7 h-7 fill-none stroke-slate-500 group-hover:stroke-slate-700"
+      >
+        <use href="#backward" />
+      </svg>
+    </media-seek-backward-button>
+
+    <media-play-button
+      class="h-10 w-10 p-2 mx-3 rounded-full bg-slate-700 hover:bg-slate-900 focus:outline-none focus:ring-slate-700 focus:ring-2 focus:ring-offset-2"
+      style="--media-primary-color: #fff"
+    >
+      <svg slot="play" aria-hidden="true" class="relative left-px">
+        <use href="#play" />
+      </svg>
+      <svg slot="pause" aria-hidden="true">
+        <use href="#pause" />
+      </svg>
+    </media-play-button>
+
+    <media-seek-forward-button
+      seekoffset="10"
+      class="w-8 h-8 p-0 group relative rounded-full focus:outline-none focus-visible:ring-slate-700 focus-visible:ring-2"
+    >
+      <svg
+        slot="icon"
+        aria-hidden="true"
+        class="w-7 h-7 fill-none stroke-slate-500 group-hover:stroke-slate-700"
+      >
+        <use href="#forward" />
+      </svg>
+    </media-seek-forward-button>
+
+    <div class="hidden @md:block h-full border-l border-slate-700/10 mx-4"></div>
+
+    <media-time-display
+      class="hidden @md:block text-slate-500 text-sm rounded-md focus:outline-none focus:ring-slate-700 focus:ring-2"
+    ></media-time-display>
+
+    <media-time-range
+      class="hidden @md:block h-2 min-h-0 p-0 m-2 rounded-md bg-slate-50 focus-visible:ring-slate-700 focus-visible:ring-2"
+      style="
+        --media-range-track-background: transparent;
+        --media-time-buffered-color: rgb(0 0 0 / 0.02);
+        --media-range-bar-color: var(--media-accent-color, rgb(79 70 229));
+        --media-range-track-border-radius: 4px;
+        --media-range-track-height: 0.5rem;
+        --media-range-thumb-background: var(--media-accent-color, rgb(79 70 229));
+        --media-range-thumb-box-shadow: 0 0 0 2px var(--media-secondary-color, rgb(255 255 255 / 0.9));
+        --media-range-thumb-width: 0.25rem;
+        --media-range-thumb-height: 1rem;
+        --media-preview-time-text-shadow: transparent;
+      "
+    >
+      <media-preview-time-display
+        slot="preview"
+        class="text-slate-600 text-xs"
+      ></media-preview-time-display>
+    </media-time-range>
+
+    <media-duration-display
+      class="hidden @md:block text-slate-500 text-sm"
+    ></media-duration-display>
+
+    <media-playback-rate-button
+      class="text-slate-500 rounded-md focus:outline-none focus-visible:ring-slate-700 focus-visible:ring-2"
+    ></media-playback-rate-button>
+
+    <media-mute-button
+      class="group relative order-first @md:order-none rounded-md focus:outline-none focus-visible:ring-slate-700 focus-visible:ring-2"
+    >
+      <svg
+        slot="high"
+        aria-hidden="true"
+        class="h-5 w-5 fill-slate-500 stroke-slate-500 group-hover:fill-slate-700 group-hover:stroke-slate-700"
+      >
+        <use href="#high" />
+      </svg>
+      <svg
+        slot="medium"
+        aria-hidden="true"
+        class="h-5 w-5 fill-slate-500 stroke-slate-500 group-hover:fill-slate-700 group-hover:stroke-slate-700"
+      >
+        <use href="#high" />
+      </svg>
+      <svg
+        slot="low"
+        aria-hidden="true"
+        class="h-5 w-5 fill-slate-500 stroke-slate-500 group-hover:fill-slate-700 group-hover:stroke-slate-700"
+      >
+        <use href="#high" />
+      </svg>
+      <svg
+        slot="off"
+        aria-hidden="true"
+        class="h-5 w-5 fill-slate-500 stroke-slate-500 group-hover:fill-slate-700 group-hover:stroke-slate-700"
+      >
+        <use href="#off" />
+      </svg>
+    </media-mute-button>
+  </media-control-bar>
+</media-controller>