node_modules ignore

server/node_modules/player.style/themes/winamp/CHANGELOG.md

@@ -0,0 +1,29 @@
+# Changelog
+
+## [0.0.7](https://github.com/muxinc/player.style/compare/@player.style/winamp@0.0.6...@player.style/winamp@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/winamp-v0.0.5...@player.style/winamp@0.0.6) (2024-08-15)
+
+
+### Features
+
+* add Winamp theme ([#53](https://github.com/muxinc/player.style/issues/53)) ([e258398](https://github.com/muxinc/player.style/commit/e258398d75eab19cf1656e5a597f518344d5f5b3))
+
+
+### Bug Fixes
+
+* 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/winamp/assets/fonts.css

@@ -0,0 +1,9 @@
+@font-face {
+  font-family: winamp-numbers;
+  src: url('./winamp-numbers.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: winamp;
+  src: url('./winamp.ttf') format('truetype');
+}

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

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

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

server/node_modules/player.style/themes/winamp/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-winamp', {
+    ...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/winamp/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@player.style/winamp",
+  "version": "0.0.7",
+  "description": "A retro theme inspired by the classic Winamp media player.",
+  "author": "@muxinc",
+  "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/winamp"
+  },
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "main": "dist/media-theme.js",
+  "exports": {
+    ".": "./dist/media-theme.js",
+    "./react": "./dist/react.js"
+  },
+  "scripts": {
+    "clean": "rimraf dist",
+    "build": "build-theme"
+  },
+  "peerDependencies": {
+    "media-chrome": ">=1.0.0"
+  },
+  "devDependencies": {
+    "build-theme": "^0.0.4"
+  }
+}

server/node_modules/player.style/themes/winamp/template.html

@@ -0,0 +1,595 @@
+<style>
+  :host {
+    --media-range-background: transparent;
+
+    --media-range-track-height: 1px;
+    --media-range-track-background: transparent;
+
+    --media-preview-time-background: transparent;
+    --media-preview-time-margin: 0;
+    --media-preview-time-padding: 0;
+    --media-tooltip-display: none;
+
+    --_c-buttons-image: url('<%= await base64("./assets/CBUTTONS.png") %>');
+    --_monoster-image: url('<%= await base64("./assets/MONOSTER.png") %>');
+
+    image-rendering: pixelated;
+  }
+
+  media-time-range,
+  media-time-range:active,
+  media-time-range:hover {
+    --media-range-thumb-width: 28px;
+    --media-range-thumb-height: 10px;
+    --media-range-thumb-border-radius: 0;
+    --media-range-thumb-background: 58px 0 url('<%= await base64("./assets/POSBAR.png") %>');
+  }
+
+  media-volume-range,
+  media-volume-range:active,
+  media-volume-range:hover {
+    --media-range-thumb-width: 14px;
+    --media-range-thumb-height: 10px;
+    --media-range-thumb-border-radius: 0;
+    --media-range-thumb-background: 53px 443px url('<%= await base64("./assets/BALANCE.png") %>');
+  }
+
+  .wrapper {
+    position: relative;
+    width: 275px;
+    height: 116px;
+    background: url('<%= await base64("./assets/MAIN.png") %>');
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    user-select: none;
+  }
+
+  .controls {
+    position: absolute;
+    top: 88px;
+    left: 16px;
+    display: flex;
+  }
+
+  media-seek-backward-button {
+    display: block;
+    overflow: hidden;
+    padding: 0;
+    width: 23px;
+    height: 18px;
+  }
+
+  media-seek-backward-button div[slot='icon'] {
+    width: 23px;
+    height: 18px;
+    background: 136px 0 var(--_c-buttons-image);
+  }
+
+  media-seek-backward-button:active div[slot='icon'] {
+    width: 23px;
+    height: 18px;
+    background: 136px 18px var(--_c-buttons-image);
+  }
+
+  media-play-button {
+    display: block;
+    overflow: hidden;
+    padding: 0;
+    width: 23px;
+    height: 18px;
+  }
+
+  media-play-button.play div[slot='play'] {
+    width: 23px;
+    height: 18px;
+    background: 114px 0 var(--_c-buttons-image);
+  }
+
+  media-play-button.play div[slot='pause'] {
+    width: 23px;
+    height: 18px;
+    background: 114px 0 var(--_c-buttons-image);
+  }
+
+  media-play-button.play:active div[slot='play'] {
+    width: 23px;
+    height: 18px;
+    background: 114px 18px var(--_c-buttons-image);
+  }
+
+  media-play-button.play:active div[slot='pause'] {
+    width: 23px;
+    height: 18px;
+    background: 114px 18px var(--_c-buttons-image);
+  }
+
+  media-play-button.pause div[slot='pause'] {
+    width: 23px;
+    height: 18px;
+    background: 91px 0 var(--_c-buttons-image);
+  }
+
+  media-play-button.pause div[slot='play'] {
+    width: 23px;
+    height: 18px;
+    background: 91px 0 var(--_c-buttons-image);
+  }
+
+  media-play-button.pause:active div[slot='play'] {
+    width: 23px;
+    height: 18px;
+    background: 91px 18px var(--_c-buttons-image);
+  }
+
+  media-play-button.pause:active div[slot='pause'] {
+    width: 23px;
+    height: 18px;
+    background: 91px 18px var(--_c-buttons-image);
+  }
+
+  media-play-button.stop div[slot='pause'] {
+    width: 23px;
+    height: 18px;
+    background: 68px 0 var(--_c-buttons-image);
+  }
+
+  media-play-button.stop div[slot='play'] {
+    width: 23px;
+    height: 18px;
+    background: 68px 0 var(--_c-buttons-image);
+  }
+
+  media-play-button.stop:active div[slot='play'] {
+    width: 23px;
+    height: 18px;
+    background: 68px 18px var(--_c-buttons-image);
+  }
+
+  media-play-button.stop:active div[slot='pause'] {
+    width: 23px;
+    height: 18px;
+    background: 68px 18px var(--_c-buttons-image);
+  }
+
+  media-seek-forward-button {
+    display: block;
+    overflow: hidden;
+    padding: 0;
+    width: 23px;
+    height: 18px;
+  }
+
+  media-seek-forward-button div[slot='icon'] {
+    width: 23px;
+    height: 18px;
+    background: 45px 0 var(--_c-buttons-image);
+  }
+
+  media-seek-forward-button:active div[slot='icon'] {
+    width: 23px;
+    height: 18px;
+    background: 45px 18px var(--_c-buttons-image);
+  }
+
+  media-fullscreen-button {
+    display: block;
+    overflow: hidden;
+    padding: 0;
+    margin-top: 1px;
+    margin-left: 6px;
+    width: 22px;
+    height: 16px;
+  }
+
+  media-fullscreen-button div[slot='enter'] {
+    width: 23px;
+    height: 16px;
+    background: 22px 0 var(--_c-buttons-image);
+  }
+
+  media-fullscreen-button:active div[slot='enter'] {
+    width: 23px;
+    height: 16px;
+    background: 22px 20px var(--_c-buttons-image);
+  }
+
+  media-time-display {
+    position: absolute;
+    background: black;
+    line-height: 20px;
+    top: 23px;
+    left: 61px;
+    padding: 0;
+    color: #00e201;
+    letter-spacing: -0.04rem;
+    font-family: 'winamp-numbers', monaco;
+    font-size: 83%;
+    font-smooth: never;
+    -webkit-font-smoothing: none;
+  }
+
+  media-time-range {
+    --media-range-bar-color: transparent;
+    --media-time-range-buffered-color: transparent;
+    position: absolute;
+    top: 71px;
+    left: 17px;
+    background: transparent;
+    height: 12px;
+    width: 248px;
+    padding: 0;
+  }
+
+  media-volume-range {
+    --media-range-bar-color: transparent;
+    position: absolute;
+    top: 58px;
+    left: 108px;
+    background: 0 -2px url('<%= await base64("./assets/VOLUME.png") %>');
+    height: 10px;
+    width: 68px;
+    padding: 0;
+  }
+
+  .balance {
+    position: absolute;
+    top: 58px;
+    left: 177px;
+    background: -9px -2px url('<%= await base64("./assets/BALANCE.png") %>');
+    height: 10px;
+    width: 37px;
+    padding: 0;
+  }
+
+  .monoster {
+    position: absolute;
+    left: 215px;
+    top: 40px;
+    width: 50px;
+    height: 15px;
+    display: flex;
+  }
+
+  .monoster :first-child {
+    width: 24px;
+    height: 13px;
+    background: 24px 13px var(--_monoster-image);
+  }
+
+  .monoster :last-child {
+    width: 26px;
+    height: 13px;
+    background: 0px 25px var(--_monoster-image);
+  }
+
+  marquee {
+    position: absolute;
+    left: 111px;
+    top: 27px;
+    width: 153px;
+    letter-spacing: 0.02rem;
+    font-family: winamp, monaco;
+    font-size: 6px;
+    line-height: 1;
+    color: #00e201;
+    font-smooth: never;
+    -webkit-font-smoothing: none;
+    text-transform: uppercase;
+  }
+
+  .kbps {
+    position: absolute;
+    left: 111px;
+    top: 43px;
+    width: 153px;
+    letter-spacing: 0.02rem;
+    font-family: winamp, monaco;
+    font-size: 6px;
+    line-height: 1;
+    color: #00e201;
+    font-smooth: never;
+    -webkit-font-smoothing: none;
+  }
+
+  .khz {
+    position: absolute;
+    left: 156px;
+    top: 43px;
+    width: 153px;
+    letter-spacing: 0.02rem;
+    font-family: winamp, monaco;
+    font-size: 6px;
+    line-height: 1;
+    color: #00e201;
+    font-smooth: never;
+    -webkit-font-smoothing: none;
+  }
+
+  media-play-button.play-pause-indicator {
+    display: block;
+    overflow: hidden;
+    background: none;
+    position: absolute;
+    top: 28px;
+    left: 24px;
+    padding: 0;
+    width: 9px;
+    height: 9px;
+  }
+
+  media-play-button.play-pause-indicator div[slot='play'] {
+    width: 9px;
+    height: 9px;
+    background: 0 0 url('<%= await base64("./assets/STOP.png") %>');
+  }
+
+  media-play-button.play-pause-indicator div[slot='pause'] {
+    width: 9px;
+    height: 9px;
+    background: 0 0 url('<%= await base64("./assets/PLAY.png") %>');
+  }
+
+  media-play-button.vu-meter {
+    display: block;
+    overflow: hidden;
+    background: none;
+    position: absolute;
+    top: 40px;
+    left: 20px;
+    padding: 0;
+    width: 88px;
+    height: 22px;
+  }
+
+  media-play-button.vu-meter div[slot='play'] {
+    width: 88px;
+    height: 22px;
+    background: none;
+  }
+
+  media-play-button.vu-meter div[slot='pause'] {
+    width: 88px;
+    height: 22px;
+    background: 0 0 url('<%= await base64("./assets/VU.gif") %>');
+  }
+
+  .display {
+    position: absolute;
+    left: 10px;
+    top: 22px;
+  }
+
+  .eq {
+    position: absolute;
+    left: 220px;
+    top: 57px;
+    width: 22px;
+    height: 12px;
+    background: 0 0 url('<%= await base64("./assets/EQ.png") %>');
+  }
+
+  .pl {
+    position: absolute;
+    left: 243px;
+    top: 57px;
+    width: 22px;
+    height: 12px;
+    background: 0 0 url('<%= await base64("./assets/PL.png") %>');
+  }
+
+  .loop {
+    position: absolute;
+    left: 211px;
+    top: 89px;
+    width: 28px;
+    height: 14px;
+    background: 0 0 url('<%= await base64("./assets/LOOP.png") %>');
+  }
+
+  media-captions-button {
+    position: absolute;
+    left: 165px;
+    top: 89px;
+    width: 46px;
+    height: 14px;
+    padding: 0;
+    overflow: hidden;
+  }
+
+  media-captions-button div[slot='on'] {
+    width: 46px;
+    height: 14px;
+    background: 0 0 url('<%= await base64("./assets/SHUFFLE.png") %>') no-repeat;
+  }
+
+  media-captions-button div[slot='off'] {
+    width: 46px;
+    height: 14px;
+    background: 0 0 url('<%= await base64("./assets/SHUFFLE.png") %>') no-repeat;
+  }
+
+  .container {
+    width: 275px;
+    margin: 0 auto;
+    display: flex;
+    flex-flow: column-reverse wrap;
+  }
+
+  .window {
+    width: 275px;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .window .top,
+  .window .bottom {
+    width: 100%;
+    height: 20px;
+    flex: none;
+    display: flex;
+    flex: none;
+  }
+
+  .window .top :nth-child(1) {
+    width: 25px;
+    height: 20px;
+    flex: none;
+    background-image: url('<%= await base64("./assets/WINDOWTL.png") %>');
+  }
+
+  .window .top :nth-child(2) {
+    height: 20px;
+    width: 100%;
+    flex-grow: 1;
+    background-image: url('<%= await base64("./assets/WINDOWT.png") %>');
+    background-repeat: no-repeat;
+  }
+
+  .window .top :nth-child(3) {
+    width: 25px;
+    height: 20px;
+    flex: none;
+    background-image: url('<%= await base64("./assets/WINDOWTR.png") %>');
+  }
+
+  .window .bottom :nth-child(1) {
+    width: 125px;
+    height: 14px;
+    flex: none;
+    background-image: url('<%= await base64("./assets/WINDOWBL.png") %>');
+  }
+
+  .window .bottom :nth-child(2) {
+    height: 14px;
+    width: 100%;
+    flex-grow: 1;
+    background-image: url('<%= await base64("./assets/WINDOWB.png") %>');
+    background-repeat: no-repeat;
+  }
+
+  .window .bottom :nth-child(3) {
+    width: 125px;
+    height: 14px;
+    flex: none;
+    background-image: url('<%= await base64("./assets/WINDOWBR.png") %>');
+  }
+
+  .window .center {
+    width: 100%;
+    height: 108px;
+    display: flex;
+  }
+
+  .window .center .center-left {
+    width: 11px;
+    height: 100%;
+    flex: none;
+    background-image: url('<%= await base64("./assets/WINDOWL.png") %>');
+    background-repeat: no-repeat;
+    background-position: 0 0;
+  }
+
+  .window .center .center-middle {
+    width: 100%;
+    height: 100%;
+    flex-grow: 1;
+    overflow: hidden;
+  }
+
+  .window .center .center-middle media-controller {
+    display: block;
+    width: 100%;
+    height: 100%;
+    background: black;
+  }
+
+  .window .center .center-right {
+    width: 8px;
+    height: 100%;
+    flex: none;
+    background-image: url('<%= await base64("./assets/WINDOWR.png") %>');
+  }
+</style>
+
+<div class="container">
+  <div class="window">
+    <div class="top">
+      <div></div>
+      <div></div>
+      <div></div>
+    </div>
+    <div class="center">
+      <div class="center-left"></div>
+      <div class="center-middle">
+        <div style="width: 100%; height: 100%; background: green">
+          <media-controller id="controller">
+            <slot name="media" slot="media"></slot>
+            <slot name="poster" slot="poster"></slot>
+          </media-controller>
+        </div>
+      </div>
+      <div class="center-right"></div>
+    </div>
+    <div class="bottom">
+      <div></div>
+      <div></div>
+      <div></div>
+    </div>
+  </div>
+  <div class="wrapper">
+    <div class="controls">
+      <media-seek-backward-button mediacontroller="controller">
+        <div slot="icon"></div>
+      </media-seek-backward-button>
+      <media-play-button class="play" mediacontroller="controller">
+        <div slot="play"></div>
+        <div slot="pause"></div>
+      </media-play-button>
+      <media-play-button class="pause" mediacontroller="controller">
+        <div slot="play"></div>
+        <div slot="pause"></div>
+      </media-play-button>
+      <media-play-button class="stop" mediacontroller="controller">
+        <div slot="play"></div>
+        <div slot="pause"></div>
+      </media-play-button>
+      <media-seek-forward-button mediacontroller="controller">
+        <div slot="icon"></div>
+      </media-seek-forward-button>
+      <media-fullscreen-button mediacontroller="controller">
+        <div slot="enter"></div>
+      </media-fullscreen-button>
+    </div>
+    <media-time-display mediacontroller="controller"></media-time-display>
+    <media-time-range mediacontroller="controller">
+      <div slot="preview"></div>
+    </media-time-range>
+    <media-volume-range mediacontroller="controller"></media-volume-range>
+    <img class="header" src="<%= await base64('./assets/HEADER.png') %>" />
+    <img class="display" src="<%= await base64('./assets/DISPLAY.png') %>" />
+    <div class="eq"></div>
+    <div class="pl"></div>
+    <div class="loop"></div>
+    <media-captions-button mediacontroller="controller">
+      <div slot="on"></div>
+      <div slot="off"></div>
+    </media-captions-button>
+    <div class="balance"></div>
+    <div class="monoster">
+      <div></div>
+      <div></div>
+    </div>
+    <marquee scrolldelay="200">Media Chrome, it really whips the llama's ass!</marquee>
+    <div class="kbps">192</div>
+    <div class="khz">44</div>
+    <media-play-button mediacontroller="controller" class="play-pause-indicator">
+      <div slot="play"></div>
+      <div slot="pause"></div>
+    </media-play-button>
+    <media-play-button mediacontroller="controller" class="vu-meter">
+      <div slot="play"></div>
+      <div slot="pause"></div>
+    </media-play-button>
+  </div>
+</div>