Showing preview only (797K chars total). Download the full file or copy to clipboard to get everything.
Repository: muxinc/player.style
Branch: main
Commit: 12c9ad656e98
Files: 174
Total size: 748.0 KB
Directory structure:
gitextract_oirhxjsl/
├── .github/
│ ├── dependabot.yml
│ ├── release-please/
│ │ ├── .release-please-manifest.json
│ │ └── release-please-config.json
│ └── workflows/
│ ├── cd.yml
│ └── ci.yml
├── .gitignore
├── CHANGELOG.md
├── LICENSE
├── README.md
├── examples/
│ ├── remix/
│ │ ├── .eslintrc.cjs
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── app/
│ │ │ ├── entry.client.tsx
│ │ │ ├── entry.server.tsx
│ │ │ ├── root.tsx
│ │ │ ├── routes/
│ │ │ │ └── _index.tsx
│ │ │ └── tailwind.css
│ │ ├── package.json
│ │ ├── postcss.config.js
│ │ ├── tailwind.config.ts
│ │ ├── tsconfig.json
│ │ └── vite.config.ts
│ └── vanilla/
│ ├── CHANGELOG.md
│ ├── index.html
│ ├── package.json
│ └── script.js
├── index.js
├── package.json
├── scripts/
│ ├── build-theme/
│ │ ├── CHANGELOG.md
│ │ ├── build.js
│ │ ├── package.json
│ │ └── templates/
│ │ ├── media-theme.d.ts
│ │ ├── media-theme.js
│ │ ├── react.d.ts
│ │ └── react.js
│ └── publish-packages/
│ ├── package.json
│ └── publish-packages.js
├── site/
│ ├── .eslintrc.json
│ ├── .gitignore
│ ├── CHANGELOG.md
│ ├── README.md
│ ├── app/
│ │ ├── (home)/
│ │ │ ├── page.tsx
│ │ │ └── page.tsx.orig
│ │ ├── _components/
│ │ │ ├── AnalyticsProvider.tsx
│ │ │ ├── AuthorLink.tsx
│ │ │ ├── ButtonPicker.tsx
│ │ │ ├── ButtonPickerOption.tsx
│ │ │ ├── Code.tsx
│ │ │ ├── ColorPicker.tsx
│ │ │ ├── CopyButton.tsx
│ │ │ ├── DocsEmbed.tsx
│ │ │ ├── DocsInstall.tsx
│ │ │ ├── Footer.tsx
│ │ │ ├── Grid.tsx
│ │ │ ├── Hero.tsx
│ │ │ ├── Link/
│ │ │ │ ├── Link.client.tsx
│ │ │ │ ├── Link.server.tsx
│ │ │ │ └── index.ts
│ │ │ ├── LinkWithUnderline.tsx
│ │ │ ├── MediaTheme.tsx
│ │ │ ├── MobileNav.tsx
│ │ │ ├── MuxLogo.tsx
│ │ │ ├── NavBar.tsx
│ │ │ ├── NavLink.tsx
│ │ │ ├── PlayerHero.tsx
│ │ │ ├── PlayerStyleLogo.tsx
│ │ │ ├── PostHogPageView.tsx
│ │ │ ├── Search.tsx
│ │ │ ├── TagCheckbox.tsx
│ │ │ ├── ThemeColorPopover.tsx
│ │ │ ├── ThemePreview.tsx
│ │ │ └── Video.tsx
│ │ ├── _utils/
│ │ │ ├── content.ts
│ │ │ └── utils.ts
│ │ ├── about/
│ │ │ └── page.tsx
│ │ ├── demo/
│ │ │ └── page.tsx
│ │ ├── features/
│ │ │ └── [slug]/
│ │ │ └── page.tsx
│ │ ├── layout.tsx
│ │ ├── players/
│ │ │ └── [slug]/
│ │ │ └── page.tsx
│ │ ├── styles/
│ │ │ ├── fonts/
│ │ │ │ ├── Aeonik/
│ │ │ │ │ ├── Aeonik-Bold.otf
│ │ │ │ │ └── Aeonik-Regular.otf
│ │ │ │ └── index.ts
│ │ │ └── globals.css
│ │ └── themes/
│ │ └── [slug]/
│ │ └── page.tsx
│ ├── content-collections.ts
│ ├── features/
│ │ ├── airplay.md
│ │ ├── audio-tracks.md
│ │ ├── google-cast.md
│ │ ├── timeline-chapters.md
│ │ └── timeline-thumbnails.md
│ ├── frameworks/
│ │ ├── html.md
│ │ ├── js.md
│ │ ├── lit.md
│ │ ├── react.md
│ │ ├── svelte.md
│ │ └── vue.md
│ ├── media-assets.ts
│ ├── media-elements.ts
│ ├── next.config.mjs
│ ├── package.json
│ ├── players/
│ │ ├── cloudflare.md
│ │ ├── dash.md
│ │ ├── hls.md
│ │ ├── jwplayer.md
│ │ ├── mux.md
│ │ ├── vimeo.md
│ │ ├── wistia.md
│ │ └── youtube.md
│ ├── postcss.config.mjs
│ ├── public/
│ │ └── landscape-test-chapters.vtt
│ ├── tailwind.config.js
│ ├── themes/
│ │ ├── demuxed-2022.md
│ │ ├── halloween.md
│ │ ├── instaplay.md
│ │ ├── microvideo.md
│ │ ├── minimal.md
│ │ ├── notflix.md
│ │ ├── reelplay.md
│ │ ├── sutro-audio.md
│ │ ├── sutro.md
│ │ ├── tailwind-audio.md
│ │ ├── vimeonova.md
│ │ ├── winamp.md
│ │ ├── x-mas.md
│ │ └── yt.md
│ └── tsconfig.json
├── themes/
│ ├── demuxed-2022/
│ │ ├── CHANGELOG.md
│ │ ├── package.json
│ │ └── template.html
│ ├── halloween/
│ │ ├── CHANGELOG.md
│ │ ├── package.json
│ │ └── template.html
│ ├── instaplay/
│ │ ├── CHANGELOG.md
│ │ ├── package.json
│ │ └── template.html
│ ├── microvideo/
│ │ ├── CHANGELOG.md
│ │ ├── package.json
│ │ └── template.html
│ ├── minimal/
│ │ ├── CHANGELOG.md
│ │ ├── package.json
│ │ └── template.html
│ ├── notflix/
│ │ ├── CHANGELOG.md
│ │ ├── package.json
│ │ └── template.html
│ ├── reelplay/
│ │ ├── CHANGELOG.md
│ │ ├── assets/
│ │ │ └── fonts.css
│ │ ├── package.json
│ │ └── template.html
│ ├── sutro/
│ │ ├── CHANGELOG.md
│ │ ├── package.json
│ │ └── template.html
│ ├── sutro-audio/
│ │ ├── CHANGELOG.md
│ │ ├── package.json
│ │ └── template.html
│ ├── tailwind-audio/
│ │ ├── CHANGELOG.md
│ │ ├── package.json
│ │ ├── styles.css
│ │ ├── tailwind.config.js
│ │ └── template.html
│ ├── vimeonova/
│ │ ├── CHANGELOG.md
│ │ ├── package.json
│ │ └── template.html
│ ├── winamp/
│ │ ├── CHANGELOG.md
│ │ ├── assets/
│ │ │ └── fonts.css
│ │ ├── package.json
│ │ └── template.html
│ ├── x-mas/
│ │ ├── CHANGELOG.md
│ │ ├── package.json
│ │ └── template.html
│ └── yt/
│ ├── CHANGELOG.md
│ ├── package.json
│ └── template.html
└── turbo.json
================================================
FILE CONTENTS
================================================
================================================
FILE: .github/dependabot.yml
================================================
version: 2
updates:
- package-ecosystem: 'npm'
directories:
- '/'
schedule:
interval: 'daily'
commit-message:
prefix: 'fix'
prefix-development: 'chore'
groups:
prod-dependencies:
patterns:
- 'media-chrome'
allow:
- dependency-name: 'media-chrome'
================================================
FILE: .github/release-please/.release-please-manifest.json
================================================
{
".": "0.3.4",
"examples/vanilla": "1.11.15",
"examples/remix": "1.0.6",
"scripts/build-theme": "0.1.1",
"site": "1.11.15",
"themes/demuxed-2022": "0.1.2",
"themes/halloween": "0.1.2",
"themes/instaplay": "0.1.2",
"themes/microvideo": "0.2.0",
"themes/minimal": "0.2.1",
"themes/notflix": "0.1.2",
"themes/reelplay": "0.1.2",
"themes/sutro": "0.2.1",
"themes/sutro-audio": "0.0.8",
"themes/tailwind-audio": "0.0.13",
"themes/vimeonova": "0.1.2",
"themes/winamp": "0.0.13",
"themes/x-mas": "0.1.2",
"themes/yt": "0.2.1"
}
================================================
FILE: .github/release-please/release-please-config.json
================================================
{
"bump-minor-pre-major": true,
"bump-patch-for-minor-pre-major": false,
"tag-separator": "@",
"include-component-in-tag": true,
"include-v-in-tag": false,
"plugins": ["node-workspace"],
"packages": {
".": {
"exclude-paths": ["examples", "scripts", "site"]
},
"examples/vanilla": {},
"examples/remix": {},
"site": {},
"scripts/build-theme": {},
"themes/demuxed-2022": {},
"themes/halloween": {},
"themes/instaplay": {},
"themes/microvideo": {},
"themes/minimal": {},
"themes/notflix": {},
"themes/reelplay": {},
"themes/sutro": {},
"themes/sutro-audio": {},
"themes/tailwind-audio": {},
"themes/vimeonova": {},
"themes/winamp": {},
"themes/x-mas": {},
"themes/yt": {}
}
}
================================================
FILE: .github/workflows/cd.yml
================================================
name: CD
concurrency: production
on:
push:
branches:
- main
jobs:
lint:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with:
node-version: 24
cache: 'npm'
- run: npm ci
- run: npx -y turbo lint
test:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with:
node-version: 24
cache: 'npm'
- run: npm ci
- run: npx -y turbo test
release:
needs: [lint, test]
runs-on: ubuntu-latest
environment: production
permissions:
contents: write
pull-requests: write
id-token: write
steps:
- uses: googleapis/release-please-action@v4
id: release
with:
config-file: .github/release-please/release-please-config.json
manifest-file: .github/release-please/.release-please-manifest.json
- uses: actions/checkout@v4
# these if statements ensure that a publication only occurs when
# a new release is created:
if: ${{ steps.release.outputs.releases_created == 'true' }}
- uses: actions/setup-node@v4
with:
node-version: 24
registry-url: 'https://registry.npmjs.org'
if: ${{ steps.release.outputs.releases_created == 'true' }}
- run: npm ci
if: ${{ steps.release.outputs.releases_created == 'true' }}
- run: npx -y turbo build
if: ${{ steps.release.outputs.releases_created == 'true' }}
- run: npm exec -c publish-packages
if: ${{ steps.release.outputs.releases_created == 'true' }}
================================================
FILE: .github/workflows/ci.yml
================================================
name: CI
on: [push, pull_request]
jobs:
lint:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with:
node-version: 24
cache: 'npm'
- run: npm ci
- run: npx -y turbo lint
test:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with:
node-version: 24
cache: 'npm'
- run: npm ci
- run: npx -y turbo test
================================================
FILE: .gitignore
================================================
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/.pnp
.pnp.js
.yarn/install-state.gz
# testing
/coverage
# next.js
/.next/
/out/
# production
/build
# misc
.DS_Store
*.pem
# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# local env files
.env*.local
# vercel
.vercel
# typescript
*.tsbuildinfo
next-env.d.ts
.turbo/
dist/
node_modules/
site/.content-collections/
================================================
FILE: CHANGELOG.md
================================================
# Changelog
## [0.3.4](https://github.com/muxinc/player.style/compare/player.style@0.3.3...player.style@0.3.4) (2026-04-15)
### Bug Fixes
* **microvideo:** update template.html ([dcf73c5](https://github.com/muxinc/player.style/commit/dcf73c53745e94ee7b95fa18e957c84aa2118b41))
### Dependencies
* The following workspace dependencies were updated
* devDependencies
* @player.style/microvideo bumped from 0.1.3 to 0.2.0
## [0.3.3](https://github.com/muxinc/player.style/compare/player.style@0.3.2...player.style@0.3.3) (2026-04-15)
### Bug Fixes
* **deps:** Bump media-chrome ([f1a9d2c](https://github.com/muxinc/player.style/commit/f1a9d2c2319cdd2206e0e25f0326a55599afb39d))
## [0.3.2](https://github.com/muxinc/player.style/compare/player.style@0.3.1...player.style@0.3.2) (2026-03-25)
### Bug Fixes
* add smooth transition to volume control appear on hover in microvideo ([#215](https://github.com/muxinc/player.style/issues/215)) ([5059029](https://github.com/muxinc/player.style/commit/5059029fe61a8c0b0a02851f9dab5f130cd38fec))
* bump media-chrome from 4.16.1 to 4.17.0 in the prod-dependencies group across 1 directory ([dd2446d](https://github.com/muxinc/player.style/commit/dd2446df855a013da8e55a5af8fdf9440e67f45a))
* bump media-chrome in the prod-dependencies group across 1 directory ([e5a49b1](https://github.com/muxinc/player.style/commit/e5a49b1f25f56eab88b470984e2de0ff42895e44))
* Bumped media-chrome to latest release ([6b04fd6](https://github.com/muxinc/player.style/commit/6b04fd67a13c756aaeaa44f77ea6ce4adc23c20d))
### Dependencies
* The following workspace dependencies were updated
* devDependencies
* @player.style/microvideo bumped from 0.1.2 to 0.1.3
## [0.3.1](https://github.com/muxinc/player.style/compare/player.style@0.3.0...player.style@0.3.1) (2025-12-04)
### Bug Fixes
* Updated ce-la-react ([8bb95a9](https://github.com/muxinc/player.style/commit/8bb95a957120f747824c3f7ce1e8bce161407a99))
### Dependencies
* The following workspace dependencies were updated
* devDependencies
* @player.style/demuxed-2022 bumped from 0.1.1 to 0.1.2
* @player.style/halloween bumped from 0.1.1 to 0.1.2
* @player.style/x-mas bumped from 0.1.1 to 0.1.2
* @player.style/instaplay bumped from 0.1.1 to 0.1.2
* @player.style/microvideo bumped from 0.1.1 to 0.1.2
* @player.style/minimal bumped from 0.2.0 to 0.2.1
* @player.style/notflix bumped from 0.1.1 to 0.1.2
* @player.style/reelplay bumped from 0.1.1 to 0.1.2
* @player.style/sutro bumped from 0.2.0 to 0.2.1
* @player.style/sutro-audio bumped from 0.0.7 to 0.0.8
* @player.style/tailwind-audio bumped from 0.0.12 to 0.0.13
* @player.style/vimeonova bumped from 0.1.1 to 0.1.2
* @player.style/winamp bumped from 0.0.12 to 0.0.13
* @player.style/yt bumped from 0.2.0 to 0.2.1
## [0.3.0](https://github.com/muxinc/player.style/compare/player.style@0.2.0...player.style@0.3.0) (2025-10-01)
### Features
* :minimal theme video title ([#203](https://github.com/muxinc/player.style/issues/203)) ([a01e1a0](https://github.com/muxinc/player.style/commit/a01e1a0a31d861186e002ee0b1b48dd99cd31957))
### Bug Fixes
* bump media-chrome in the prod-dependencies group across 1 directory ([#206](https://github.com/muxinc/player.style/issues/206)) ([ff2e40e](https://github.com/muxinc/player.style/commit/ff2e40e3a862b1c43fd4905481eca7d06e9f5c4b))
* bump media-chrome in the prod-dependencies group across 1 directory ([#208](https://github.com/muxinc/player.style/issues/208)) ([fd06f87](https://github.com/muxinc/player.style/commit/fd06f875b23d7107efc5268f3e9fab1407a5e7aa))
### Dependencies
* The following workspace dependencies were updated
* devDependencies
* @player.style/minimal bumped from 0.1.1 to 0.2.0
## [0.2.0](https://github.com/muxinc/player.style/compare/player.style@0.1.10...player.style@0.2.0) (2025-08-22)
### Features
* Sutro bump for ([75f730b](https://github.com/muxinc/player.style/commit/75f730b3682856b6ec74880dbb6ecb942aa93a63))
### Bug Fixes
* upgrade dependencies ([#198](https://github.com/muxinc/player.style/issues/198)) ([bad9d8f](https://github.com/muxinc/player.style/commit/bad9d8f3378895743cc5e0763d7b326fb0d70d94))
### Dependencies
* The following workspace dependencies were updated
* devDependencies
* @player.style/sutro bumped from 0.1.1 to 0.2.0
* @player.style/yt bumped from 0.1.1 to 0.2.0
## [0.1.10](https://github.com/muxinc/player.style/compare/player.style@0.1.9...player.style@0.1.10) (2025-08-01)
### Bug Fixes
* : Add index.js to Warn Against Naked Imports ([#196](https://github.com/muxinc/player.style/issues/196)) ([6029d09](https://github.com/muxinc/player.style/commit/6029d094737b335d855a1ab9d5766620445b644d))
* bump media-chrome in the prod-dependencies group across 1 directory ([#189](https://github.com/muxinc/player.style/issues/189)) ([f40edbd](https://github.com/muxinc/player.style/commit/f40edbd387c0a0e10d675767395841587c0c20b1))
## [0.1.9](https://github.com/muxinc/player.style/compare/player.style@0.1.8...player.style@0.1.9) (2025-06-12)
### Bug Fixes
* bump media-chrome in the prod-dependencies group across 1 directory ([#185](https://github.com/muxinc/player.style/issues/185)) ([d82ade5](https://github.com/muxinc/player.style/commit/d82ade587e3ee1ef44bf13ece4f122e6ba1dafb0))
* bump media-chrome in the prod-dependencies group across 1 directory ([#188](https://github.com/muxinc/player.style/issues/188)) ([ec538f8](https://github.com/muxinc/player.style/commit/ec538f804cf490ec0cc0783f44c5757c8006d52c))
## [0.1.8](https://github.com/muxinc/player.style/compare/player.style@0.1.7...player.style@0.1.8) (2025-05-01)
### Bug Fixes
* bump media-chrome in the prod-dependencies group across 1 directory ([#183](https://github.com/muxinc/player.style/issues/183)) ([e2c1c98](https://github.com/muxinc/player.style/commit/e2c1c98362ac126e2657688d7b028661f48bf3ab))
## [0.1.7](https://github.com/muxinc/player.style/compare/player.style@0.1.6...player.style@0.1.7) (2025-03-31)
### Bug Fixes
* bump media-chrome in the prod-dependencies group across 1 directory ([#176](https://github.com/muxinc/player.style/issues/176)) ([9ed57cc](https://github.com/muxinc/player.style/commit/9ed57ccd4d6d56fc0c81ccef2265d0b114bedbc4))
## [0.1.6](https://github.com/muxinc/player.style/compare/player.style@0.1.5...player.style@0.1.6) (2025-03-14)
### Bug Fixes
* bump media-chrome in the prod-dependencies group across 1 directory ([#169](https://github.com/muxinc/player.style/issues/169)) ([e80f7a7](https://github.com/muxinc/player.style/commit/e80f7a704122eb9e9b5994de599552b1a509bc1f))
## [0.1.5](https://github.com/muxinc/player.style/compare/player.style@0.1.4...player.style@0.1.5) (2025-03-05)
### Bug Fixes
* dependabot syntax ([bf90fc8](https://github.com/muxinc/player.style/commit/bf90fc808f5dd4102d4947401fb2784af89e3e89))
## [0.1.4](https://github.com/muxinc/player.style/compare/player.style@0.1.3...player.style@0.1.4) (2025-02-13)
### Bug Fixes
* upgrade MC ([#162](https://github.com/muxinc/player.style/issues/162)) ([b88abeb](https://github.com/muxinc/player.style/commit/b88abeb86fa078ffa8494cdc71637531eb0296d6))
## [0.1.3](https://github.com/muxinc/player.style/compare/player.style@0.1.2...player.style@0.1.3) (2025-01-29)
### Bug Fixes
* upgrade Media Chrome ([#152](https://github.com/muxinc/player.style/issues/152)) ([6b676e4](https://github.com/muxinc/player.style/commit/6b676e451b862cfe642cd02bcf1b46d9b9f48cb1))
## [0.1.2](https://github.com/muxinc/player.style/compare/player.style@0.1.1...player.style@0.1.2) (2025-01-23)
### Bug Fixes
* upgrade MC ([#149](https://github.com/muxinc/player.style/issues/149)) ([4ecfd39](https://github.com/muxinc/player.style/commit/4ecfd391b7695ae3bf0daa3d7118dc9c58c0b0a8))
## [0.1.1](https://github.com/muxinc/player.style/compare/player.style@0.1.0...player.style@0.1.1) (2024-12-19)
### Bug Fixes
* use ce-la-react, fix React 19+ wrappers ([#146](https://github.com/muxinc/player.style/issues/146)) ([10f29b3](https://github.com/muxinc/player.style/commit/10f29b3f20b1a359300aaa0cd5c1f93a9e0a59dc))
### Dependencies
* The following workspace dependencies were updated
* devDependencies
* @player.style/demuxed-2022 bumped from 0.1.0 to 0.1.1
* @player.style/halloween bumped from 0.1.0 to 0.1.1
* @player.style/x-mas bumped from 0.1.0 to 0.1.1
* @player.style/instaplay bumped from 0.1.0 to 0.1.1
* @player.style/microvideo bumped from 0.1.0 to 0.1.1
* @player.style/minimal bumped from 0.1.0 to 0.1.1
* @player.style/notflix bumped from 0.1.0 to 0.1.1
* @player.style/reelplay bumped from 0.1.0 to 0.1.1
* @player.style/sutro bumped from 0.1.0 to 0.1.1
* @player.style/sutro-audio bumped from 0.0.6 to 0.0.7
* @player.style/tailwind-audio bumped from 0.0.11 to 0.0.12
* @player.style/vimeonova bumped from 0.1.0 to 0.1.1
* @player.style/winamp bumped from 0.0.11 to 0.0.12
* @player.style/yt bumped from 0.1.0 to 0.1.1
## [0.1.0](https://github.com/muxinc/player.style/compare/player.style@0.0.14...player.style@0.1.0) (2024-12-09)
### Features
* add basics of theme picker ([61152dc](https://github.com/muxinc/player.style/commit/61152dcec3fb6f68a7dccbb581628ea9469dcfa4))
* Add Christmas theme ([#138](https://github.com/muxinc/player.style/issues/138)) ([8203d90](https://github.com/muxinc/player.style/commit/8203d904e485c122f012b368ec11a625db0d6e97))
* add collection, theme and about base pages ([8d96835](https://github.com/muxinc/player.style/commit/8d968357b5e1097fb75e925e6b0437da0df292b1))
* add Demuxed 2022 theme ([#20](https://github.com/muxinc/player.style/issues/20)) ([f61ba1c](https://github.com/muxinc/player.style/commit/f61ba1cb1dc39e1f2f3d503c1fb4b26aa25f0759))
* add error dialog ([#143](https://github.com/muxinc/player.style/issues/143)) ([2edd3fe](https://github.com/muxinc/player.style/commit/2edd3fec8b54d187c45dd88d13ac73a3b616c373))
* add Halloween theme ([#125](https://github.com/muxinc/player.style/issues/125)) ([445cc74](https://github.com/muxinc/player.style/commit/445cc74bc2e84765ae03d9c35aad80e92f1774e6))
* add Instaplay theme ([#58](https://github.com/muxinc/player.style/issues/58)) ([fb84b90](https://github.com/muxinc/player.style/commit/fb84b909f9c7dce6b8cd15ce3cc6af9ef6f21c1f))
* add Notflix theme ([#21](https://github.com/muxinc/player.style/issues/21)) ([ed8c33c](https://github.com/muxinc/player.style/commit/ed8c33c61aadb47e897638dce8ec3a77cf774b71))
* add packages restructure ([#2](https://github.com/muxinc/player.style/issues/2)) ([b23ddb0](https://github.com/muxinc/player.style/commit/b23ddb0fba3682b19b7d8e2912045ccbfbce6cb0))
* add Reelplay theme ([#94](https://github.com/muxinc/player.style/issues/94)) ([872d05a](https://github.com/muxinc/player.style/commit/872d05a192a0bda926774eff9d4c2c3be7240f8f))
* add resize slider and light/dark mode toggle ([57d0b91](https://github.com/muxinc/player.style/commit/57d0b9120fc16dfb2533a46b4652a41396862e93))
* add Sutro audio theme ([#65](https://github.com/muxinc/player.style/issues/65)) ([1ec5d61](https://github.com/muxinc/player.style/commit/1ec5d61b223138b1f668ec1d593189e2717a7279))
* add tailwind-audio theme ([#40](https://github.com/muxinc/player.style/issues/40)) ([c80e967](https://github.com/muxinc/player.style/commit/c80e9670548ff1db8e241e0b8dc90084004ebd5f))
* add typesVersions and CJS support ([#122](https://github.com/muxinc/player.style/issues/122)) ([8811309](https://github.com/muxinc/player.style/commit/8811309ef34a9af3f8796069fe85abcf82325eb7))
* add Vimeonova theme ([#44](https://github.com/muxinc/player.style/issues/44)) ([e421c28](https://github.com/muxinc/player.style/commit/e421c28ae88a16fce65c6beca0e778d01fc1a353))
* add Winamp theme ([#53](https://github.com/muxinc/player.style/issues/53)) ([e258398](https://github.com/muxinc/player.style/commit/e258398d75eab19cf1656e5a597f518344d5f5b3))
* make theme work on entry page ([#1](https://github.com/muxinc/player.style/issues/1)) ([3f766ce](https://github.com/muxinc/player.style/commit/3f766ce271bbf6128e7fc8ef0475fa5c9eb895ae))
* new promo video + features ([#109](https://github.com/muxinc/player.style/issues/109)) ([0049a24](https://github.com/muxinc/player.style/commit/0049a2411f90fd3c2971533b6fa3419b8c994e29))
### Bug Fixes
* add airplay icon and button ([#131](https://github.com/muxinc/player.style/issues/131)) ([548247e](https://github.com/muxinc/player.style/commit/548247ef50c27ca4c3175be2e4cd8dc423e882f7))
* add tailwind-audio to release pkgs ([9448055](https://github.com/muxinc/player.style/commit/9448055ed3ef1e8ea5087a558686d10e3d5bd745))
* add Vimeonova color support ([#54](https://github.com/muxinc/player.style/issues/54)) ([e954611](https://github.com/muxinc/player.style/commit/e9546111a87a1974da018fe95d1f50c5fed25720))
* Changed Youtube theme name to YT ([#12](https://github.com/muxinc/player.style/issues/12)) ([e981669](https://github.com/muxinc/player.style/commit/e981669b170502e692eae355e904681b26b9552f))
* custom colors + hide empty settings menu item ([#85](https://github.com/muxinc/player.style/issues/85)) ([d2815b3](https://github.com/muxinc/player.style/commit/d2815b34b023e7e5829326528fc51c895f42fca7))
* empty YT settings menus ([#100](https://github.com/muxinc/player.style/issues/100)) ([bbc3349](https://github.com/muxinc/player.style/commit/bbc33498110921f248ad62b920214ff7aff7ed15))
* escape backtick in template HTML ([4cae721](https://github.com/muxinc/player.style/commit/4cae7212ac4d2ec1f408ef1f9ae3ac5c684efc7d)), closes [#98](https://github.com/muxinc/player.style/issues/98)
* exclude build-theme ([#129](https://github.com/muxinc/player.style/issues/129)) ([656409b](https://github.com/muxinc/player.style/commit/656409bb39b6224beebef7dd3c3300666082a55a))
* fix imports and exports ([08ca9c0](https://github.com/muxinc/player.style/commit/08ca9c0a2d8d6634baffb18e49b007d0fceaf796))
* 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))
* make subpackages publish-able ([f4208e8](https://github.com/muxinc/player.style/commit/f4208e89396241f64cce826a661bee9a6d45e76c))
* make themes dev deps, prevent dup deps ([#82](https://github.com/muxinc/player.style/issues/82)) ([bd0e705](https://github.com/muxinc/player.style/commit/bd0e705b3e7cd4042b70d3a9d423f778d1f74185)), closes [#80](https://github.com/muxinc/player.style/issues/80)
* media theme types bug ([8dd42da](https://github.com/muxinc/player.style/commit/8dd42dab7f0536a49f2df5109f27c7285ad9ff48))
* mobile overflow. hide duration on mobile ([#87](https://github.com/muxinc/player.style/issues/87)) ([47cf00c](https://github.com/muxinc/player.style/commit/47cf00c0c11e08a2e90098ef43d29ed6cf1e8fbc)), closes [#78](https://github.com/muxinc/player.style/issues/78)
* no render on preload none ([#38](https://github.com/muxinc/player.style/issues/38)) ([64dda58](https://github.com/muxinc/player.style/commit/64dda5825562da846edb33ddc7d4ba2548c08e00))
* player resize input bug ([#86](https://github.com/muxinc/player.style/issues/86)) ([70c91f2](https://github.com/muxinc/player.style/commit/70c91f262cb7b46698ff5f11d38331d9ee85830a))
* player.style dependency ([bb2a628](https://github.com/muxinc/player.style/commit/bb2a62895db48cd89b6af38d6a550136626f0ade))
* player.style dependency ([a62612b](https://github.com/muxinc/player.style/commit/a62612b43f1b7269e41cfeec499c49dd29babf95))
* remove unneeded package.json extra ([f869248](https://github.com/muxinc/player.style/commit/f86924841e9c04e68ac96c3c091eaf192f446772))
* responsive fullscreen ([#61](https://github.com/muxinc/player.style/issues/61)) ([05343b8](https://github.com/muxinc/player.style/commit/05343b8ddfe6eafec255384d8ab40b63b1a724f0)), closes [#59](https://github.com/muxinc/player.style/issues/59)
* Safari color picker border ([f1b1203](https://github.com/muxinc/player.style/commit/f1b1203338e428ce8ab61cf042822c5c20f0939a)), closes [#104](https://github.com/muxinc/player.style/issues/104)
* Safari CSS aspect-ratio height bug workaround ([7d6014a](https://github.com/muxinc/player.style/commit/7d6014aa529c7ceb6741f73e2972f10be2d100ca))
* Safari menu position bug ([554d69d](https://github.com/muxinc/player.style/commit/554d69dfd21ad7f90799db46f50a4f12ac6b7aed))
* Safari portrait asset height bug ([34dbc22](https://github.com/muxinc/player.style/commit/34dbc22d45935a706c1d1ed4235af5d6db34268e)), closes [#106](https://github.com/muxinc/player.style/issues/106)
* Safari Vimeonova play button height ([487c6b1](https://github.com/muxinc/player.style/commit/487c6b131f9ce225f826e80f8c42d83b8932a808)), closes [#103](https://github.com/muxinc/player.style/issues/103)
* Stop the YT play button from transitioning on load ([#42](https://github.com/muxinc/player.style/issues/42)) ([ebf45cd](https://github.com/muxinc/player.style/commit/ebf45cdc41e23d123667cda1bcd1d5191791356c))
* types and cleanup theme build ([#8](https://github.com/muxinc/player.style/issues/8)) ([21b9916](https://github.com/muxinc/player.style/commit/21b991621accfecba421f3cf1d2dbb0b98509d95))
* upgrade Media Chrome 4.1.4 ([6673f13](https://github.com/muxinc/player.style/commit/6673f13dc2165fb59b90f660f8b2ee602704f0d1))
* upgrade Media Chrome 4.2.0 ([8797cf0](https://github.com/muxinc/player.style/commit/8797cf0a0abfe965563eb36e9c1d2a7d933b7526))
* upgrade Media Chrome 4.2.1 ([7363898](https://github.com/muxinc/player.style/commit/736389836227d207685d8a28a4bce8ee5786d37c))
* upgrade media-chrome 4.1.1 ([4e231a3](https://github.com/muxinc/player.style/commit/4e231a3d9eecde095446f60578e172ed660c6f2e))
* upgrade media-chrome v4.1.3 ([9588e41](https://github.com/muxinc/player.style/commit/9588e41239485ae00eeac0d587c0d46ed744ed27))
* upgrade to Media Chrome v4 ([#64](https://github.com/muxinc/player.style/issues/64)) ([be68af2](https://github.com/muxinc/player.style/commit/be68af2f9c3a6ff6674b9951f0b34f2bfdb042aa))
* vanilla pkg, add vanilla example ([dc01aa4](https://github.com/muxinc/player.style/commit/dc01aa4985dfa782527f5533698e029efeb2dc8a))
* vimeonova issues ([48fa5ff](https://github.com/muxinc/player.style/commit/48fa5ffe4f922468a6fc3518a9fbbb2b2b322084))
* yt theme media caption button underline ([#128](https://github.com/muxinc/player.style/issues/128)) ([6902420](https://github.com/muxinc/player.style/commit/6902420b78d4178aa35a627add1692e728d3cf7d))
### Dependencies
* The following workspace dependencies were updated
* devDependencies
* @player.style/demuxed-2022 bumped from 0.0.12 to 0.1.0
* @player.style/halloween bumped from 0.0.2 to 0.1.0
* @player.style/x-mas bumped from 0.0.3 to 0.1.0
* @player.style/instaplay bumped from 0.0.7 to 0.1.0
* @player.style/microvideo bumped from 0.0.11 to 0.1.0
* @player.style/minimal bumped from 0.0.11 to 0.1.0
* @player.style/notflix bumped from 0.0.8 to 0.1.0
* @player.style/reelplay bumped from 0.0.5 to 0.1.0
* @player.style/sutro bumped from 0.0.8 to 0.1.0
* @player.style/vimeonova bumped from 0.0.11 to 0.1.0
* @player.style/yt bumped from 0.0.12 to 0.1.0
## [0.0.14](https://github.com/muxinc/player.style/compare/player.style@0.0.13...player.style@0.0.14) (2024-12-02)
### Features
* Add Christmas theme ([#138](https://github.com/muxinc/player.style/issues/138)) ([8203d90](https://github.com/muxinc/player.style/commit/8203d904e485c122f012b368ec11a625db0d6e97))
### Bug Fixes
* add airplay icon and button ([#131](https://github.com/muxinc/player.style/issues/131)) ([548247e](https://github.com/muxinc/player.style/commit/548247ef50c27ca4c3175be2e4cd8dc423e882f7))
### Dependencies
* The following workspace dependencies were updated
* devDependencies
* @player.style/x-mas bumped from 0.0.1 to 0.0.3
* @player.style/sutro bumped from 0.0.7 to 0.0.8
## [0.0.13](https://github.com/muxinc/player.style/compare/player.style@0.0.12...player.style@0.0.13) (2024-11-11)
### Bug Fixes
* exclude build-theme ([#129](https://github.com/muxinc/player.style/issues/129)) ([656409b](https://github.com/muxinc/player.style/commit/656409bb39b6224beebef7dd3c3300666082a55a))
* yt theme media caption button underline ([#128](https://github.com/muxinc/player.style/issues/128)) ([6902420](https://github.com/muxinc/player.style/commit/6902420b78d4178aa35a627add1692e728d3cf7d))
### Dependencies
* The following workspace dependencies were updated
* devDependencies
* @player.style/yt bumped from 0.0.11 to 0.0.12
## [0.0.12](https://github.com/muxinc/player.style/compare/player.style@0.0.11...player.style@0.0.12) (2024-10-29)
### Features
* add Halloween theme ([#125](https://github.com/muxinc/player.style/issues/125)) ([445cc74](https://github.com/muxinc/player.style/commit/445cc74bc2e84765ae03d9c35aad80e92f1774e6))
### Dependencies
* The following workspace dependencies were updated
* devDependencies
* @player.style/demuxed-2022 bumped from 0.0.11 to 0.0.12
* @player.style/halloween bumped from 0.0.1 to 0.0.2
* @player.style/instaplay bumped from 0.0.6 to 0.0.7
* @player.style/microvideo bumped from 0.0.10 to 0.0.11
* @player.style/minimal bumped from 0.0.10 to 0.0.11
* @player.style/notflix bumped from 0.0.7 to 0.0.8
* @player.style/reelplay bumped from 0.0.4 to 0.0.5
* @player.style/sutro bumped from 0.0.6 to 0.0.7
* @player.style/sutro-audio bumped from 0.0.5 to 0.0.6
* @player.style/tailwind-audio bumped from 0.0.10 to 0.0.11
* @player.style/vimeonova bumped from 0.0.10 to 0.0.11
* @player.style/winamp bumped from 0.0.10 to 0.0.11
* @player.style/yt bumped from 0.0.10 to 0.0.11
## [0.0.11](https://github.com/muxinc/player.style/compare/player.style@0.0.10...player.style@0.0.11) (2024-10-21)
### Features
* add typesVersions and CJS support ([#122](https://github.com/muxinc/player.style/issues/122)) ([8811309](https://github.com/muxinc/player.style/commit/8811309ef34a9af3f8796069fe85abcf82325eb7))
### Bug Fixes
* upgrade Media Chrome 4.2.1 ([7363898](https://github.com/muxinc/player.style/commit/736389836227d207685d8a28a4bce8ee5786d37c))
### Dependencies
* The following workspace dependencies were updated
* devDependencies
* @player.style/demuxed-2022 bumped from 0.0.10 to 0.0.11
* @player.style/instaplay bumped from 0.0.5 to 0.0.6
* @player.style/microvideo bumped from 0.0.9 to 0.0.10
* @player.style/minimal bumped from 0.0.9 to 0.0.10
* @player.style/notflix bumped from 0.0.6 to 0.0.7
* @player.style/reelplay bumped from 0.0.3 to 0.0.4
* @player.style/sutro bumped from 0.0.5 to 0.0.6
* @player.style/sutro-audio bumped from 0.0.4 to 0.0.5
* @player.style/tailwind-audio bumped from 0.0.9 to 0.0.10
* @player.style/vimeonova bumped from 0.0.9 to 0.0.10
* @player.style/winamp bumped from 0.0.9 to 0.0.10
* @player.style/yt bumped from 0.0.9 to 0.0.10
## [0.0.10](https://github.com/muxinc/player.style/compare/player.style@0.0.9...player.style@0.0.10) (2024-10-08)
### Features
* add Notflix theme ([#21](https://github.com/muxinc/player.style/issues/21)) ([ed8c33c](https://github.com/muxinc/player.style/commit/ed8c33c61aadb47e897638dce8ec3a77cf774b71))
* new promo video + features ([#109](https://github.com/muxinc/player.style/issues/109)) ([0049a24](https://github.com/muxinc/player.style/commit/0049a2411f90fd3c2971533b6fa3419b8c994e29))
### Bug Fixes
* empty YT settings menus ([#100](https://github.com/muxinc/player.style/issues/100)) ([bbc3349](https://github.com/muxinc/player.style/commit/bbc33498110921f248ad62b920214ff7aff7ed15))
* Safari Vimeonova play button height ([487c6b1](https://github.com/muxinc/player.style/commit/487c6b131f9ce225f826e80f8c42d83b8932a808)), closes [#103](https://github.com/muxinc/player.style/issues/103)
* upgrade Media Chrome 4.1.4 ([6673f13](https://github.com/muxinc/player.style/commit/6673f13dc2165fb59b90f660f8b2ee602704f0d1))
* upgrade Media Chrome 4.2.0 ([8797cf0](https://github.com/muxinc/player.style/commit/8797cf0a0abfe965563eb36e9c1d2a7d933b7526))
### Dependencies
* The following workspace dependencies were updated
* devDependencies
* @player.style/demuxed-2022 bumped from 0.0.9 to 0.0.10
* @player.style/instaplay bumped from 0.0.4 to 0.0.5
* @player.style/microvideo bumped from 0.0.8 to 0.0.9
* @player.style/minimal bumped from 0.0.8 to 0.0.9
* @player.style/notflix bumped from 0.0.5 to 0.0.6
* @player.style/reelplay bumped from 0.0.2 to 0.0.3
* @player.style/sutro bumped from 0.0.4 to 0.0.5
* @player.style/sutro-audio bumped from 0.0.3 to 0.0.4
* @player.style/tailwind-audio bumped from 0.0.8 to 0.0.9
* @player.style/vimeonova bumped from 0.0.8 to 0.0.9
* @player.style/winamp bumped from 0.0.8 to 0.0.9
* @player.style/yt bumped from 0.0.8 to 0.0.9
## [0.0.9](https://github.com/muxinc/player.style/compare/player.style@0.0.8...player.style@0.0.9) (2024-09-25)
### Features
* add Reelplay theme ([#94](https://github.com/muxinc/player.style/issues/94)) ([872d05a](https://github.com/muxinc/player.style/commit/872d05a192a0bda926774eff9d4c2c3be7240f8f))
### Bug Fixes
* Safari menu position bug ([554d69d](https://github.com/muxinc/player.style/commit/554d69dfd21ad7f90799db46f50a4f12ac6b7aed))
* upgrade media-chrome 4.1.1 ([4e231a3](https://github.com/muxinc/player.style/commit/4e231a3d9eecde095446f60578e172ed660c6f2e))
* upgrade media-chrome v4.1.3 ([9588e41](https://github.com/muxinc/player.style/commit/9588e41239485ae00eeac0d587c0d46ed744ed27))
### Dependencies
* The following workspace dependencies were updated
* devDependencies
* @player.style/demuxed-2022 bumped from 0.0.8 to 0.0.9
* @player.style/instaplay bumped from 0.0.3 to 0.0.4
* @player.style/microvideo bumped from 0.0.7 to 0.0.8
* @player.style/minimal bumped from 0.0.7 to 0.0.8
* @player.style/reelplay bumped from 0.0.1 to 0.0.2
* @player.style/sutro bumped from 0.0.3 to 0.0.4
* @player.style/sutro-audio bumped from 0.0.2 to 0.0.3
* @player.style/tailwind-audio bumped from 0.0.7 to 0.0.8
* @player.style/vimeonova bumped from 0.0.7 to 0.0.8
* @player.style/winamp bumped from 0.0.7 to 0.0.8
* @player.style/yt bumped from 0.0.7 to 0.0.8
## [0.0.8](https://github.com/muxinc/player.style/compare/player.style@0.0.7...player.style@0.0.8) (2024-09-10)
### Features
* add Sutro audio theme ([#65](https://github.com/muxinc/player.style/issues/65)) ([1ec5d61](https://github.com/muxinc/player.style/commit/1ec5d61b223138b1f668ec1d593189e2717a7279))
### Bug Fixes
* custom colors + hide empty settings menu item ([#85](https://github.com/muxinc/player.style/issues/85)) ([d2815b3](https://github.com/muxinc/player.style/commit/d2815b34b023e7e5829326528fc51c895f42fca7))
* make themes dev deps, prevent dup deps ([#82](https://github.com/muxinc/player.style/issues/82)) ([bd0e705](https://github.com/muxinc/player.style/commit/bd0e705b3e7cd4042b70d3a9d423f778d1f74185)), closes [#80](https://github.com/muxinc/player.style/issues/80)
* mobile overflow. hide duration on mobile ([#87](https://github.com/muxinc/player.style/issues/87)) ([47cf00c](https://github.com/muxinc/player.style/commit/47cf00c0c11e08a2e90098ef43d29ed6cf1e8fbc)), closes [#78](https://github.com/muxinc/player.style/issues/78)
### Dependencies
* The following workspace dependencies were updated
* devDependencies
* @player.style/demuxed-2022 bumped from 0.0.7 to 0.0.8
* @player.style/instaplay bumped from 0.0.2 to 0.0.3
* @player.style/microvideo bumped from 0.0.6 to 0.0.7
* @player.style/minimal bumped from 0.0.6 to 0.0.7
* @player.style/sutro bumped from 0.0.2 to 0.0.3
* @player.style/sutro-audio bumped from 0.0.1 to 0.0.2
* @player.style/tailwind-audio bumped from 0.0.6 to 0.0.7
* @player.style/vimeonova bumped from 0.0.6 to 0.0.7
* @player.style/winamp bumped from 0.0.6 to 0.0.7
* @player.style/yt bumped from 0.0.6 to 0.0.7
## [0.0.7](https://github.com/muxinc/player.style/compare/player.style@0.0.6...player.style@0.0.7) (2024-08-15)
### Features
* add Instaplay theme ([#58](https://github.com/muxinc/player.style/issues/58)) ([fb84b90](https://github.com/muxinc/player.style/commit/fb84b909f9c7dce6b8cd15ce3cc6af9ef6f21c1f))
* add tailwind-audio theme ([#40](https://github.com/muxinc/player.style/issues/40)) ([c80e967](https://github.com/muxinc/player.style/commit/c80e9670548ff1db8e241e0b8dc90084004ebd5f))
* add Vimeonova theme ([#44](https://github.com/muxinc/player.style/issues/44)) ([e421c28](https://github.com/muxinc/player.style/commit/e421c28ae88a16fce65c6beca0e778d01fc1a353))
* add Winamp theme ([#53](https://github.com/muxinc/player.style/issues/53)) ([e258398](https://github.com/muxinc/player.style/commit/e258398d75eab19cf1656e5a597f518344d5f5b3))
### Bug Fixes
* add tailwind-audio to release pkgs ([9448055](https://github.com/muxinc/player.style/commit/9448055ed3ef1e8ea5087a558686d10e3d5bd745))
* add Vimeonova color support ([#54](https://github.com/muxinc/player.style/issues/54)) ([e954611](https://github.com/muxinc/player.style/commit/e9546111a87a1974da018fe95d1f50c5fed25720))
* 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))
* no render on preload none ([#38](https://github.com/muxinc/player.style/issues/38)) ([64dda58](https://github.com/muxinc/player.style/commit/64dda5825562da846edb33ddc7d4ba2548c08e00))
* remove unneeded package.json extra ([f869248](https://github.com/muxinc/player.style/commit/f86924841e9c04e68ac96c3c091eaf192f446772))
* responsive fullscreen ([#61](https://github.com/muxinc/player.style/issues/61)) ([05343b8](https://github.com/muxinc/player.style/commit/05343b8ddfe6eafec255384d8ab40b63b1a724f0)), closes [#59](https://github.com/muxinc/player.style/issues/59)
* Stop the YT play button from transitioning on load ([#42](https://github.com/muxinc/player.style/issues/42)) ([ebf45cd](https://github.com/muxinc/player.style/commit/ebf45cdc41e23d123667cda1bcd1d5191791356c))
* upgrade to Media Chrome v4 ([#64](https://github.com/muxinc/player.style/issues/64)) ([be68af2](https://github.com/muxinc/player.style/commit/be68af2f9c3a6ff6674b9951f0b34f2bfdb042aa))
* vimeonova issues ([48fa5ff](https://github.com/muxinc/player.style/commit/48fa5ffe4f922468a6fc3518a9fbbb2b2b322084))
### Dependencies
* The following workspace dependencies were updated
* dependencies
* @player.style/sutro bumped from 0.0.1 to 0.0.2
* @player.style/demuxed-2022 bumped from 0.0.6 to 0.0.7
* @player.style/instaplay bumped from 0.0.1 to 0.0.2
* @player.style/microvideo bumped from 0.0.5 to 0.0.6
* @player.style/minimal bumped from 0.0.5 to 0.0.6
* @player.style/tailwind-audio bumped from 0.0.5 to 0.0.6
* @player.style/vimeonova bumped from 0.0.5 to 0.0.6
* @player.style/winamp bumped from 0.0.5 to 0.0.6
* @player.style/yt bumped from 0.0.5 to 0.0.6
## [0.0.6](https://github.com/muxinc/player.style/compare/player.style@0.0.5...player.style@0.0.6) (2024-06-21)
### Features
* add Demuxed 2022 theme ([#20](https://github.com/muxinc/player.style/issues/20)) ([f61ba1c](https://github.com/muxinc/player.style/commit/f61ba1cb1dc39e1f2f3d503c1fb4b26aa25f0759))
### Dependencies
* The following workspace dependencies were updated
* dependencies
* @player.style/demuxed-2022 bumped from ^0.0.5 to ^0.0.6
## [0.0.5](https://github.com/muxinc/player.style/compare/player.style@0.0.4...player.style@0.0.5) (2024-06-17)
### Bug Fixes
* media theme types bug ([8dd42da](https://github.com/muxinc/player.style/commit/8dd42dab7f0536a49f2df5109f27c7285ad9ff48))
### Dependencies
* The following workspace dependencies were updated
* dependencies
* @player.style/microvideo bumped from 0.0.4 to 0.0.5
* @player.style/minimal bumped from 0.0.4 to 0.0.5
* @player.style/yt bumped from 0.0.4 to 0.0.5
## [0.0.4](https://github.com/muxinc/player.style/compare/player.style@0.0.3...player.style@0.0.4) (2024-06-17)
### Bug Fixes
* Changed Youtube theme name to YT ([#12](https://github.com/muxinc/player.style/issues/12)) ([e981669](https://github.com/muxinc/player.style/commit/e981669b170502e692eae355e904681b26b9552f))
### Dependencies
* The following workspace dependencies were updated
* dependencies
* @player.style/microvideo bumped from 0.0.3 to 0.0.4
* @player.style/minimal bumped from 0.0.3 to 0.0.4
* @player.style/yt bumped from 0.0.3 to 0.0.4
## [0.0.3](https://github.com/muxinc/player.style/compare/player.style@0.0.2...player.style@0.0.3) (2024-06-14)
### Bug Fixes
* make subpackages publish-able ([f4208e8](https://github.com/muxinc/player.style/commit/f4208e89396241f64cce826a661bee9a6d45e76c))
### Dependencies
* The following workspace dependencies were updated
* dependencies
* @player.style/microvideo bumped from 0.0.2 to 0.0.3
* @player.style/minimal bumped from 0.0.2 to 0.0.3
* @player.style/youtube bumped from 0.0.2 to 0.0.3
## [0.0.2](https://github.com/muxinc/player.style/compare/player.style-v0.0.1...player.style@0.0.2) (2024-06-14)
### Features
* add basics of theme picker ([61152dc](https://github.com/muxinc/player.style/commit/61152dcec3fb6f68a7dccbb581628ea9469dcfa4))
* add collection, theme and about base pages ([8d96835](https://github.com/muxinc/player.style/commit/8d968357b5e1097fb75e925e6b0437da0df292b1))
* add packages restructure ([#2](https://github.com/muxinc/player.style/issues/2)) ([b23ddb0](https://github.com/muxinc/player.style/commit/b23ddb0fba3682b19b7d8e2912045ccbfbce6cb0))
* add resize slider and light/dark mode toggle ([57d0b91](https://github.com/muxinc/player.style/commit/57d0b9120fc16dfb2533a46b4652a41396862e93))
* make theme work on entry page ([#1](https://github.com/muxinc/player.style/issues/1)) ([3f766ce](https://github.com/muxinc/player.style/commit/3f766ce271bbf6128e7fc8ef0475fa5c9eb895ae))
### Bug Fixes
* fix imports and exports ([08ca9c0](https://github.com/muxinc/player.style/commit/08ca9c0a2d8d6634baffb18e49b007d0fceaf796))
* player.style dependency ([bb2a628](https://github.com/muxinc/player.style/commit/bb2a62895db48cd89b6af38d6a550136626f0ade))
* player.style dependency ([a62612b](https://github.com/muxinc/player.style/commit/a62612b43f1b7269e41cfeec499c49dd29babf95))
* types and cleanup theme build ([#8](https://github.com/muxinc/player.style/issues/8)) ([21b9916](https://github.com/muxinc/player.style/commit/21b991621accfecba421f3cf1d2dbb0b98509d95))
* vanilla pkg, add vanilla example ([dc01aa4](https://github.com/muxinc/player.style/commit/dc01aa4985dfa782527f5533698e029efeb2dc8a))
### Dependencies
* The following workspace dependencies were updated
* dependencies
* @player.style/microvideo bumped from 0.0.1 to 0.0.2
* @player.style/minimal bumped from 0.0.1 to 0.0.2
* @player.style/youtube bumped from 0.0.1 to 0.0.2
================================================
FILE: LICENSE
================================================
Copyright (c) 2024 Mux, Inc.
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
================================================
FILE: README.md
================================================
# player.style
Video and audio player themes built with [Media Chrome](https://media-chrome.org), for every web player and framework.
Visit [player.style](https://player.style).
# Local Development
This is a monorepo that uses NPM workspaces and Turbo. The root package is also a published package, which currently prevents having identically named NPM scripts in both the root and workspace packages.
For this reason we use the `turbo` CLI directly in the root directory.
1. Install Turbo globally: `npm install -g turbo`
1. Clone the repository
1. Run `npm install`
1. Run `turbo build`
### Handling Dependency Conflicts with `media-chrome`
If your project already includes `media-chrome` and you encounter dependency conflicts, you can override the resolution to ensure compatibility.
#### Solution: Using `overrides` in `package.json` (for npm 8+)
If you're using **npm** 8 or later, you can enforce a specific version of `media-chrome` in your `package.json` by adding an `overrides` field:
```json
{
"overrides": {
"media-chrome": "<your-desired-version>"
}
}
```
If you’re using **Yarn**, you can enforce a specific version with the resolutions field:
```json
{
"resolutions": {
"media-chrome": "<your-desired-version>"
}
}
```
================================================
FILE: examples/remix/.eslintrc.cjs
================================================
/**
* This is intended to be a basic starting point for linting in your app.
* It relies on recommended configs out of the box for simplicity, but you can
* and should modify this configuration to best suit your team's needs.
*/
/** @type {import('eslint').Linter.Config} */
module.exports = {
root: true,
parserOptions: {
ecmaVersion: "latest",
sourceType: "module",
ecmaFeatures: {
jsx: true,
},
},
env: {
browser: true,
commonjs: true,
es6: true,
},
ignorePatterns: ["!**/.server", "!**/.client"],
// Base config
extends: ["eslint:recommended"],
overrides: [
// React
{
files: ["**/*.{js,jsx,ts,tsx}"],
plugins: ["react", "jsx-a11y"],
extends: [
"plugin:react/recommended",
"plugin:react/jsx-runtime",
"plugin:react-hooks/recommended",
"plugin:jsx-a11y/recommended",
],
settings: {
react: {
version: "detect",
},
formComponents: ["Form"],
linkComponents: [
{ name: "Link", linkAttribute: "to" },
{ name: "NavLink", linkAttribute: "to" },
],
"import/resolver": {
typescript: {},
},
},
},
// Typescript
{
files: ["**/*.{ts,tsx}"],
plugins: ["@typescript-eslint", "import"],
parser: "@typescript-eslint/parser",
settings: {
"import/internal-regex": "^~/",
"import/resolver": {
node: {
extensions: [".ts", ".tsx"],
},
typescript: {
alwaysTryTypes: true,
},
},
},
extends: [
"plugin:@typescript-eslint/recommended",
"plugin:import/recommended",
"plugin:import/typescript",
],
},
// Node
{
files: [".eslintrc.cjs"],
env: {
node: true,
},
},
],
};
================================================
FILE: examples/remix/.gitignore
================================================
node_modules
/.cache
/build
.env
================================================
FILE: examples/remix/CHANGELOG.md
================================================
# Changelog
## [1.0.6](https://github.com/muxinc/player.style/compare/test-mux-player-style-remix@1.0.5...test-mux-player-style-remix@1.0.6) (2026-04-15)
### Dependencies
* The following workspace dependencies were updated
* dependencies
* player.style bumped from ^0.3.3 to ^0.3.4
## [1.0.5](https://github.com/muxinc/player.style/compare/test-mux-player-style-remix@1.0.4...test-mux-player-style-remix@1.0.5) (2026-04-15)
### Bug Fixes
* **deps:** Bump media-chrome ([f1a9d2c](https://github.com/muxinc/player.style/commit/f1a9d2c2319cdd2206e0e25f0326a55599afb39d))
### Dependencies
* The following workspace dependencies were updated
* dependencies
* player.style bumped from ^0.3.2 to ^0.3.3
## [1.0.4](https://github.com/muxinc/player.style/compare/test-mux-player-style-remix@1.0.3...test-mux-player-style-remix@1.0.4) (2026-03-25)
### Dependencies
* The following workspace dependencies were updated
* dependencies
* player.style bumped from ^0.3.1 to ^0.3.2
## [1.0.3](https://github.com/muxinc/player.style/compare/test-mux-player-style-remix@1.0.2...test-mux-player-style-remix@1.0.3) (2025-12-04)
### Bug Fixes
* Updated ce-la-react ([8bb95a9](https://github.com/muxinc/player.style/commit/8bb95a957120f747824c3f7ce1e8bce161407a99))
### Dependencies
* The following workspace dependencies were updated
* dependencies
* player.style bumped from ^0.3.0 to ^0.3.1
## [1.0.2](https://github.com/muxinc/player.style/compare/test-mux-player-style-remix@1.0.1...test-mux-player-style-remix@1.0.2) (2025-10-01)
### Dependencies
* The following workspace dependencies were updated
* dependencies
* player.style bumped from ^0.2.0 to ^0.3.0
## [1.0.1](https://github.com/muxinc/player.style/compare/test-mux-player-style-remix-v1.0.0...test-mux-player-style-remix@1.0.1) (2025-08-22)
### Bug Fixes
* use ce-la-react, fix React 19+ wrappers ([#146](https://github.com/muxinc/player.style/issues/146)) ([10f29b3](https://github.com/muxinc/player.style/commit/10f29b3f20b1a359300aaa0cd5c1f93a9e0a59dc))
### Dependencies
* The following workspace dependencies were updated
* dependencies
* player.style bumped from ^0.1.0 to ^0.2.0
================================================
FILE: examples/remix/README.md
================================================
# Welcome to Remix!
- 📖 [Remix docs](https://remix.run/docs)
## Development
Run the dev server:
```shellscript
npm run dev
```
## Deployment
First, build your app for production:
```sh
npm run build
```
Then run the app in production mode:
```sh
npm start
```
Now you'll need to pick a host to deploy it to.
### DIY
If you're familiar with deploying Node applications, the built-in Remix app server is production-ready.
Make sure to deploy the output of `npm run build`
- `build/server`
- `build/client`
## Styling
This template comes with [Tailwind CSS](https://tailwindcss.com/) already configured for a simple default starting experience. You can use whatever css framework you prefer. See the [Vite docs on css](https://vitejs.dev/guide/features.html#css) for more information.
================================================
FILE: examples/remix/app/entry.client.tsx
================================================
/**
* By default, Remix will handle hydrating your app on the client for you.
* You are free to delete this file if you'd like to, but if you ever want it revealed again, you can run `npx remix reveal` ✨
* For more information, see https://remix.run/file-conventions/entry.client
*/
import { RemixBrowser } from "@remix-run/react";
import { startTransition, StrictMode } from "react";
import { hydrateRoot } from "react-dom/client";
startTransition(() => {
hydrateRoot(
document,
<StrictMode>
<RemixBrowser />
</StrictMode>
);
});
================================================
FILE: examples/remix/app/entry.server.tsx
================================================
/**
* By default, Remix will handle generating the HTTP Response for you.
* You are free to delete this file if you'd like to, but if you ever want it revealed again, you can run `npx remix reveal` ✨
* For more information, see https://remix.run/file-conventions/entry.server
*/
import { PassThrough } from "node:stream";
import type { AppLoadContext, EntryContext } from "@remix-run/node";
import { createReadableStreamFromReadable } from "@remix-run/node";
import { RemixServer } from "@remix-run/react";
import { isbot } from "isbot";
import { renderToPipeableStream } from "react-dom/server";
const ABORT_DELAY = 5_000;
export default function handleRequest(
request: Request,
responseStatusCode: number,
responseHeaders: Headers,
remixContext: EntryContext,
// This is ignored so we can keep it in the template for visibility. Feel
// free to delete this parameter in your app if you're not using it!
// eslint-disable-next-line @typescript-eslint/no-unused-vars
loadContext: AppLoadContext
) {
return isbot(request.headers.get("user-agent") || "")
? handleBotRequest(
request,
responseStatusCode,
responseHeaders,
remixContext
)
: handleBrowserRequest(
request,
responseStatusCode,
responseHeaders,
remixContext
);
}
function handleBotRequest(
request: Request,
responseStatusCode: number,
responseHeaders: Headers,
remixContext: EntryContext
) {
return new Promise((resolve, reject) => {
let shellRendered = false;
const { pipe, abort } = renderToPipeableStream(
<RemixServer
context={remixContext}
url={request.url}
abortDelay={ABORT_DELAY}
/>,
{
onAllReady() {
shellRendered = true;
const body = new PassThrough();
const stream = createReadableStreamFromReadable(body);
responseHeaders.set("Content-Type", "text/html");
resolve(
new Response(stream, {
headers: responseHeaders,
status: responseStatusCode,
})
);
pipe(body);
},
onShellError(error: unknown) {
reject(error);
},
onError(error: unknown) {
responseStatusCode = 500;
// Log streaming rendering errors from inside the shell. Don't log
// errors encountered during initial shell rendering since they'll
// reject and get logged in handleDocumentRequest.
if (shellRendered) {
console.error(error);
}
},
}
);
setTimeout(abort, ABORT_DELAY);
});
}
function handleBrowserRequest(
request: Request,
responseStatusCode: number,
responseHeaders: Headers,
remixContext: EntryContext
) {
return new Promise((resolve, reject) => {
let shellRendered = false;
const { pipe, abort } = renderToPipeableStream(
<RemixServer
context={remixContext}
url={request.url}
abortDelay={ABORT_DELAY}
/>,
{
onShellReady() {
shellRendered = true;
const body = new PassThrough();
const stream = createReadableStreamFromReadable(body);
responseHeaders.set("Content-Type", "text/html");
resolve(
new Response(stream, {
headers: responseHeaders,
status: responseStatusCode,
})
);
pipe(body);
},
onShellError(error: unknown) {
reject(error);
},
onError(error: unknown) {
responseStatusCode = 500;
// Log streaming rendering errors from inside the shell. Don't log
// errors encountered during initial shell rendering since they'll
// reject and get logged in handleDocumentRequest.
if (shellRendered) {
console.error(error);
}
},
}
);
setTimeout(abort, ABORT_DELAY);
});
}
================================================
FILE: examples/remix/app/root.tsx
================================================
import {
Links,
Meta,
Outlet,
Scripts,
ScrollRestoration,
} from "@remix-run/react";
import type { LinksFunction } from "@remix-run/node";
import "./tailwind.css";
export const links: LinksFunction = () => [
{ rel: "preconnect", href: "https://fonts.googleapis.com" },
{
rel: "preconnect",
href: "https://fonts.gstatic.com",
crossOrigin: "anonymous",
},
{
rel: "stylesheet",
href: "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap",
},
];
export function Layout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<head>
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<Meta />
<Links />
</head>
<body>
{children}
<ScrollRestoration />
<Scripts />
</body>
</html>
);
}
export default function App() {
return <Outlet />;
}
================================================
FILE: examples/remix/app/routes/_index.tsx
================================================
import type { MetaFunction } from "@remix-run/node";
import MuxPlayer from "@mux/mux-video-react";
import MuxTheme from "player.style/yt/react";
const PLAYBACK_ID = "4XN6dqxPTZJPU021TuSGIHPaOuKQkrxHF";
export const meta: MetaFunction = () => {
return [{ title: "Test Mux player.style" }];
};
export default function Index() {
return (
<main className="flex flex-col gap-8 items-center justify-center h-screen container mx-auto">
<h1 className="text-4xl font-bold text-center">
Mux Video player.style test (Remix)
</h1>
<MuxTheme
style={{
width: "100%",
}}
>
<MuxPlayer
poster={`https://image.mux.com/${PLAYBACK_ID}/thumbnail.jpg`}
slot="media"
className="overflow-hidden"
playbackId={PLAYBACK_ID}
streamType="on-demand"
playsInline
disablePictureInPicture={true}
disableCookies={true}
disableTracking={true}
/>
</MuxTheme>
</main>
);
}
================================================
FILE: examples/remix/app/tailwind.css
================================================
@tailwind base;
@tailwind components;
@tailwind utilities;
html,
body {
@apply bg-white dark:bg-gray-950;
@media (prefers-color-scheme: dark) {
color-scheme: dark;
}
}
================================================
FILE: examples/remix/package.json
================================================
{
"name": "test-mux-player-style-remix",
"version": "1.0.6",
"private": true,
"sideEffects": false,
"type": "module",
"scripts": {
"build": "remix vite:build",
"dev": "remix vite:dev",
"start": "remix-serve ./build/server/index.js",
"typecheck": "tsc"
},
"dependencies": {
"@mux/mux-video-react": "^0.13.1",
"@remix-run/node": "^2.15.1",
"@remix-run/react": "^2.15.1",
"@remix-run/serve": "^2.15.1",
"isbot": "^5.1.18",
"media-chrome": "^4.19.0",
"player.style": "^0.3.4",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@remix-run/dev": "^2.15.1",
"@types/react": "^18.2.20",
"@types/react-dom": "^18.2.7",
"@typescript-eslint/eslint-plugin": "^6.7.4",
"@typescript-eslint/parser": "^6.7.4",
"autoprefixer": "^10.4.20",
"eslint": "^8.38.0",
"eslint-import-resolver-typescript": "^3.6.1",
"eslint-plugin-import": "^2.28.1",
"eslint-plugin-jsx-a11y": "^6.7.1",
"eslint-plugin-react": "^7.33.2",
"eslint-plugin-react-hooks": "^4.6.0",
"postcss": "^8.4.49",
"tailwindcss": "^3.4.17",
"typescript": "^5.7.2",
"vite": "^6.0.4",
"vite-tsconfig-paths": "^5.1.4"
},
"engines": {
"node": ">=20.0.0"
}
}
================================================
FILE: examples/remix/postcss.config.js
================================================
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};
================================================
FILE: examples/remix/tailwind.config.ts
================================================
import type { Config } from "tailwindcss";
export default {
content: ["./app/**/{**,.client,.server}/**/*.{js,jsx,ts,tsx}"],
theme: {
extend: {
fontFamily: {
sans: [
"Inter",
"ui-sans-serif",
"system-ui",
"sans-serif",
"Apple Color Emoji",
"Segoe UI Emoji",
"Segoe UI Symbol",
"Noto Color Emoji",
],
},
},
},
plugins: [],
} satisfies Config;
================================================
FILE: examples/remix/tsconfig.json
================================================
{
"include": [
"**/*.ts",
"**/*.tsx",
"**/.server/**/*.ts",
"**/.server/**/*.tsx",
"**/.client/**/*.ts",
"**/.client/**/*.tsx"
],
"compilerOptions": {
"lib": ["DOM", "DOM.Iterable", "ES2022"],
"types": ["@remix-run/node", "vite/client"],
"isolatedModules": true,
"esModuleInterop": true,
"jsx": "react-jsx",
"module": "ESNext",
"moduleResolution": "Bundler",
"resolveJsonModule": true,
"target": "ES2022",
"strict": true,
"allowJs": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true,
"baseUrl": ".",
"paths": {
"~/*": ["./app/*"]
},
// Vite takes care of building everything, not tsc.
"noEmit": true
}
}
================================================
FILE: examples/remix/vite.config.ts
================================================
import { vitePlugin as remix } from "@remix-run/dev";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";
declare module "@remix-run/node" {
interface Future {
v3_singleFetch: true;
}
}
export default defineConfig({
plugins: [
remix({
future: {
v3_fetcherPersist: true,
v3_relativeSplatPath: true,
v3_throwAbortReason: true,
v3_singleFetch: true,
v3_lazyRouteDiscovery: true,
},
}),
tsconfigPaths(),
],
});
================================================
FILE: examples/vanilla/CHANGELOG.md
================================================
# Changelog
## [1.11.15](https://github.com/muxinc/player.style/compare/vanilla@1.11.14...vanilla@1.11.15) (2026-04-15)
### Dependencies
* The following workspace dependencies were updated
* dependencies
* player.style bumped from 0.3.3 to 0.3.4
## [1.11.14](https://github.com/muxinc/player.style/compare/vanilla@1.11.13...vanilla@1.11.14) (2026-04-15)
### Dependencies
* The following workspace dependencies were updated
* dependencies
* player.style bumped from 0.3.2 to 0.3.3
## [1.11.13](https://github.com/muxinc/player.style/compare/vanilla@1.11.12...vanilla@1.11.13) (2026-03-25)
### Dependencies
* The following workspace dependencies were updated
* dependencies
* player.style bumped from 0.3.1 to 0.3.2
## [1.11.12](https://github.com/muxinc/player.style/compare/vanilla@1.11.11...vanilla@1.11.12) (2025-12-04)
### Dependencies
* The following workspace dependencies were updated
* dependencies
* player.style bumped from 0.3.0 to 0.3.1
## [1.11.11](https://github.com/muxinc/player.style/compare/vanilla@1.11.10...vanilla@1.11.11) (2025-10-01)
### Dependencies
* The following workspace dependencies were updated
* dependencies
* player.style bumped from 0.2.0 to 0.3.0
## [1.11.10](https://github.com/muxinc/player.style/compare/vanilla@1.11.9...vanilla@1.11.10) (2025-08-22)
### Dependencies
* The following workspace dependencies were updated
* dependencies
* player.style bumped from 0.1.10 to 0.2.0
## [1.11.9](https://github.com/muxinc/player.style/compare/vanilla@1.11.8...vanilla@1.11.9) (2025-08-01)
### Dependencies
* The following workspace dependencies were updated
* dependencies
* player.style bumped from 0.1.9 to 0.1.10
## [1.11.8](https://github.com/muxinc/player.style/compare/vanilla@1.11.7...vanilla@1.11.8) (2025-06-12)
### Dependencies
* The following workspace dependencies were updated
* dependencies
* player.style bumped from 0.1.8 to 0.1.9
## [1.11.7](https://github.com/muxinc/player.style/compare/vanilla@1.11.6...vanilla@1.11.7) (2025-05-01)
### Dependencies
* The following workspace dependencies were updated
* dependencies
* player.style bumped from 0.1.7 to 0.1.8
## [1.11.6](https://github.com/muxinc/player.style/compare/vanilla@1.11.5...vanilla@1.11.6) (2025-03-31)
### Dependencies
* The following workspace dependencies were updated
* dependencies
* player.style bumped from 0.1.6 to 0.1.7
## [1.11.5](https://github.com/muxinc/player.style/compare/vanilla@1.11.4...vanilla@1.11.5) (2025-03-14)
### Dependencies
* The following workspace dependencies were updated
* dependencies
* player.style bumped from 0.1.5 to 0.1.6
## [1.11.4](https://github.com/muxinc/player.style/compare/vanilla@1.11.3...vanilla@1.11.4) (2025-03-05)
### Dependencies
* The following workspace dependencies were updated
* dependencies
* player.style bumped from 0.1.4 to 0.1.5
## [1.11.3](https://github.com/muxinc/player.style/compare/vanilla@1.11.2...vanilla@1.11.3) (2025-02-13)
### Dependencies
* The following workspace dependencies were updated
* dependencies
* player.style bumped from 0.1.3 to 0.1.4
## [1.11.2](https://github.com/muxinc/player.style/compare/vanilla@1.11.1...vanilla@1.11.2) (2025-01-29)
### Dependencies
* The following workspace dependencies were updated
* dependencies
* player.style bumped from 0.1.2 to 0.1.3
## [1.11.1](https://github.com/muxinc/player.style/compare/vanilla@1.11.0...vanilla@1.11.1) (2025-01-23)
### Dependencies
* The following workspace dependencies were updated
* dependencies
* player.style bumped from 0.1.1 to 0.1.2
## [1.11.0](https://github.com/muxinc/player.style/compare/vanilla-v1.10.0...vanilla@1.11.0) (2024-12-19)
### Features
* add Vimeonova theme ([#44](https://github.com/muxinc/player.style/issues/44)) ([e421c28](https://github.com/muxinc/player.style/commit/e421c28ae88a16fce65c6beca0e778d01fc1a353))
### Bug Fixes
* player.style dependency ([bb2a628](https://github.com/muxinc/player.style/commit/bb2a62895db48cd89b6af38d6a550136626f0ade))
* vanilla pkg, add vanilla example ([dc01aa4](https://github.com/muxinc/player.style/commit/dc01aa4985dfa782527f5533698e029efeb2dc8a))
## [1.10.0](https://github.com/muxinc/player.style/compare/vanilla-v1.9.0...vanilla@1.10.0) (2024-12-19)
### Features
* add Vimeonova theme ([#44](https://github.com/muxinc/player.style/issues/44)) ([e421c28](https://github.com/muxinc/player.style/commit/e421c28ae88a16fce65c6beca0e778d01fc1a353))
### Bug Fixes
* player.style dependency ([bb2a628](https://github.com/muxinc/player.style/commit/bb2a62895db48cd89b6af38d6a550136626f0ade))
* vanilla pkg, add vanilla example ([dc01aa4](https://github.com/muxinc/player.style/commit/dc01aa4985dfa782527f5533698e029efeb2dc8a))
### Dependencies
* The following workspace dependencies were updated
* dependencies
* player.style bumped from 0.1.0 to 0.1.1
## [1.9.0](https://github.com/muxinc/player.style/compare/vanilla-v1.8.0...vanilla@1.9.0) (2024-12-09)
### Features
* add Vimeonova theme ([#44](https://github.com/muxinc/player.style/issues/44)) ([e421c28](https://github.com/muxinc/player.style/commit/e421c28ae88a16fce65c6beca0e778d01fc1a353))
### Bug Fixes
* player.style dependency ([bb2a628](https://github.com/muxinc/player.style/commit/bb2a62895db48cd89b6af38d6a550136626f0ade))
* vanilla pkg, add vanilla example ([dc01aa4](https://github.com/muxinc/player.style/commit/dc01aa4985dfa782527f5533698e029efeb2dc8a))
### Dependencies
* The following workspace dependencies were updated
* dependencies
* player.style bumped from 0.0.14 to 0.1.0
## [1.8.0](https://github.com/muxinc/player.style/compare/vanilla-v1.7.0...vanilla@1.8.0) (2024-12-02)
### Features
* add Vimeonova theme ([#44](https://github.com/muxinc/player.style/issues/44)) ([e421c28](https://github.com/muxinc/player.style/commit/e421c28ae88a16fce65c6beca0e778d01fc1a353))
### Bug Fixes
* player.style dependency ([bb2a628](https://github.com/muxinc/player.style/commit/bb2a62895db48cd89b6af38d6a550136626f0ade))
* vanilla pkg, add vanilla example ([dc01aa4](https://github.com/muxinc/player.style/commit/dc01aa4985dfa782527f5533698e029efeb2dc8a))
### Dependencies
* The following workspace dependencies were updated
* dependencies
* player.style bumped from 0.0.13 to 0.0.14
## [1.7.0](https://github.com/muxinc/player.style/compare/vanilla-v1.6.0...vanilla@1.7.0) (2024-11-11)
### Features
* add Vimeonova theme ([#44](https://github.com/muxinc/player.style/issues/44)) ([e421c28](https://github.com/muxinc/player.style/commit/e421c28ae88a16fce65c6beca0e778d01fc1a353))
### Bug Fixes
* player.style dependency ([bb2a628](https://github.com/muxinc/player.style/commit/bb2a62895db48cd89b6af38d6a550136626f0ade))
* vanilla pkg, add vanilla example ([dc01aa4](https://github.com/muxinc/player.style/commit/dc01aa4985dfa782527f5533698e029efeb2dc8a))
### Dependencies
* The following workspace dependencies were updated
* dependencies
* player.style bumped from 0.0.12 to 0.0.13
## [1.6.0](https://github.com/muxinc/player.style/compare/vanilla-v1.5.0...vanilla@1.6.0) (2024-10-29)
### Features
* add Vimeonova theme ([#44](https://github.com/muxinc/player.style/issues/44)) ([e421c28](https://github.com/muxinc/player.style/commit/e421c28ae88a16fce65c6beca0e778d01fc1a353))
### Bug Fixes
* player.style dependency ([bb2a628](https://github.com/muxinc/player.style/commit/bb2a62895db48cd89b6af38d6a550136626f0ade))
* vanilla pkg, add vanilla example ([dc01aa4](https://github.com/muxinc/player.style/commit/dc01aa4985dfa782527f5533698e029efeb2dc8a))
### Dependencies
* The following workspace dependencies were updated
* dependencies
* player.style bumped from 0.0.11 to 0.0.12
## [1.5.0](https://github.com/muxinc/player.style/compare/vanilla-v1.4.0...vanilla@1.5.0) (2024-10-21)
### Features
* add Vimeonova theme ([#44](https://github.com/muxinc/player.style/issues/44)) ([e421c28](https://github.com/muxinc/player.style/commit/e421c28ae88a16fce65c6beca0e778d01fc1a353))
### Bug Fixes
* player.style dependency ([bb2a628](https://github.com/muxinc/player.style/commit/bb2a62895db48cd89b6af38d6a550136626f0ade))
* vanilla pkg, add vanilla example ([dc01aa4](https://github.com/muxinc/player.style/commit/dc01aa4985dfa782527f5533698e029efeb2dc8a))
### Dependencies
* The following workspace dependencies were updated
* dependencies
* player.style bumped from 0.0.10 to 0.0.11
## [1.4.0](https://github.com/muxinc/player.style/compare/vanilla-v1.3.0...vanilla@1.4.0) (2024-10-08)
### Features
* add Vimeonova theme ([#44](https://github.com/muxinc/player.style/issues/44)) ([e421c28](https://github.com/muxinc/player.style/commit/e421c28ae88a16fce65c6beca0e778d01fc1a353))
### Bug Fixes
* player.style dependency ([bb2a628](https://github.com/muxinc/player.style/commit/bb2a62895db48cd89b6af38d6a550136626f0ade))
* vanilla pkg, add vanilla example ([dc01aa4](https://github.com/muxinc/player.style/commit/dc01aa4985dfa782527f5533698e029efeb2dc8a))
### Dependencies
* The following workspace dependencies were updated
* dependencies
* player.style bumped from 0.0.9 to 0.0.10
## [1.3.0](https://github.com/muxinc/player.style/compare/vanilla-v1.2.0...vanilla@1.3.0) (2024-09-25)
### Features
* add Vimeonova theme ([#44](https://github.com/muxinc/player.style/issues/44)) ([e421c28](https://github.com/muxinc/player.style/commit/e421c28ae88a16fce65c6beca0e778d01fc1a353))
### Bug Fixes
* player.style dependency ([bb2a628](https://github.com/muxinc/player.style/commit/bb2a62895db48cd89b6af38d6a550136626f0ade))
* vanilla pkg, add vanilla example ([dc01aa4](https://github.com/muxinc/player.style/commit/dc01aa4985dfa782527f5533698e029efeb2dc8a))
### Dependencies
* The following workspace dependencies were updated
* dependencies
* player.style bumped from 0.0.8 to 0.0.9
## [1.2.0](https://github.com/muxinc/player.style/compare/vanilla-v1.1.0...vanilla@1.2.0) (2024-09-10)
### Features
* add Vimeonova theme ([#44](https://github.com/muxinc/player.style/issues/44)) ([e421c28](https://github.com/muxinc/player.style/commit/e421c28ae88a16fce65c6beca0e778d01fc1a353))
### Bug Fixes
* player.style dependency ([bb2a628](https://github.com/muxinc/player.style/commit/bb2a62895db48cd89b6af38d6a550136626f0ade))
* vanilla pkg, add vanilla example ([dc01aa4](https://github.com/muxinc/player.style/commit/dc01aa4985dfa782527f5533698e029efeb2dc8a))
### Dependencies
* The following workspace dependencies were updated
* dependencies
* player.style bumped from 0.0.7 to 0.0.8
## [1.1.0](https://github.com/muxinc/player.style/compare/vanilla@1.0.4...vanilla@1.1.0) (2024-08-15)
### Features
* add Vimeonova theme ([#44](https://github.com/muxinc/player.style/issues/44)) ([e421c28](https://github.com/muxinc/player.style/commit/e421c28ae88a16fce65c6beca0e778d01fc1a353))
### Dependencies
* The following workspace dependencies were updated
* dependencies
* player.style bumped from 0.0.6 to 0.0.7
## [1.0.4](https://github.com/muxinc/player.style/compare/vanilla@1.0.3...vanilla@1.0.4) (2024-06-21)
### Dependencies
* The following workspace dependencies were updated
* dependencies
* player.style bumped from 0.0.5 to 0.0.6
## [1.0.3](https://github.com/muxinc/player.style/compare/vanilla@1.0.2...vanilla@1.0.3) (2024-06-17)
### Dependencies
* The following workspace dependencies were updated
* dependencies
* player.style bumped from 0.0.4 to 0.0.5
## [1.0.2](https://github.com/muxinc/player.style/compare/vanilla@1.0.1...vanilla@1.0.2) (2024-06-17)
### Dependencies
* The following workspace dependencies were updated
* dependencies
* player.style bumped from 0.0.3 to 0.0.4
## [1.0.1](https://github.com/muxinc/player.style/compare/vanilla@1.0.0...vanilla@1.0.1) (2024-06-14)
### Dependencies
* The following workspace dependencies were updated
* dependencies
* player.style bumped from 0.0.2 to 0.0.3
## 1.0.0 (2024-06-14)
### Bug Fixes
* player.style dependency ([bb2a628](https://github.com/muxinc/player.style/commit/bb2a62895db48cd89b6af38d6a550136626f0ade))
* vanilla pkg, add vanilla example ([dc01aa4](https://github.com/muxinc/player.style/commit/dc01aa4985dfa782527f5533698e029efeb2dc8a))
### Dependencies
* The following workspace dependencies were updated
* dependencies
* player.style bumped from 0.0.1 to 0.0.2
================================================
FILE: examples/vanilla/index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>player.style demo</title>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<style>
/* latin-ext */
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/jetbrainsmono/v18/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPx7cwgknk-6nFg.woff2)
format('woff2');
unicode-range: U+0100-02AF, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1E00-1EFF, U+2020,
U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/jetbrainsmono/v18/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPxDcwgknk-4.woff2)
format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304,
U+0308-0309, U+0323, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
U+FFFD;
}
</style>
<style>
@import 'https://cdn.jsdelivr.net/npm/open-props/open-props.min.css';
@import 'https://cdn.jsdelivr.net/npm/open-props/normalize.min.css';
@import 'https://cdn.jsdelivr.net/npm/open-props/normalize.light.min.css';
html {
--font-size-0: 0.85rem;
}
body {
display: grid;
grid-template-rows: auto auto 1fr;
}
header,
main,
footer {
padding-inline: 0.5rem;
}
.inner {
max-width: var(--size-lg);
height: 100%;
margin: 0 auto;
border: 1px solid var(--gray-2);
border-width: 0 1px;
}
header {
border-bottom: 1px solid var(--gray-2);
}
header nav {
height: 5rem;
display: flex;
justify-content: end;
}
header nav a {
display: inline-flex;
align-items: center;
margin: 0;
font-family: 'JetBrains Mono', monospace;
font-size: 0.875rem;
text-transform: uppercase;
padding: 1.3rem 2rem;
color: #242628;
background: var(--gray-0);
border-left: 1px solid var(--gray-2);
}
header nav a:hover {
text-decoration: none;
background: var(--gray-1);
}
main > .inner {
display: grid;
grid-template-columns: 1fr;
}
@media (width >= 768px) {
header,
main,
footer {
padding-inline: 1.5rem;
}
main > .inner {
grid-template-columns: 1fr 3fr;
}
section {
border-left: 1px solid var(--gray-2);
}
}
footer {
border-top: 1px solid var(--gray-2);
}
aside,
section {
background: white;
padding: 2rem;
}
h1 {
font-size: var(--font-size-3);
font-weight: var(--font-weight-7);
margin-bottom: 0.25rem;
}
p {
font-size: var(--font-size-0);
color: var(--gray-6);
}
.row {
display: flex;
gap: 1rem;
}
.row > * {
flex-grow: 1;
flex-basis: 0;
}
label {
font-size: var(--font-size-0);
font-weight: var(--font-weight-6);
display: block;
margin-top: 1rem;
white-space: nowrap;
}
input,
select {
font-family: 'JetBrains Mono', monospace;
font-size: var(--font-size-0);
border-radius: 0;
background: #fafaf9;
margin-top: 0.5rem;
padding: 0.5rem 0.7rem;
display: block;
width: 100%;
}
input {
cursor: text;
}
button {
font-family: 'JetBrains Mono', monospace;
font-size: var(--font-size-0);
margin-top: 1rem;
background: #e2e4dd;
border: 1px solid #00802d;
border-radius: var(--radius-round);
padding: 0;
}
button > span {
display: block;
padding: 0.4rem 2rem;
border-radius: var(--radius-round);
background: #4ca74b;
outline: 1px solid #00802d;
color: white;
text-transform: uppercase;
transform: translateY(0);
transition: transform 0.12s cubic-bezier(0.7, 0, 0.3, 1);
}
button:focus:not(:focus-visible) {
outline: none;
}
button:hover:not(:active) > span {
transform: translateY(-3px);
}
/* Right side */
#blurup-image {
width: 100%;
aspect-ratio: 16 / 9;
}
#blurup-code {
display: block;
font-family: 'JetBrains Mono', monospace;
font-size: 0.75rem;
border-radius: 0;
background: #fafaf9;
width: 100%;
height: 12.5rem;
margin-top: 1rem;
padding: 0.5rem 0.7rem;
}
.code-group {
margin-top: 1rem;
display: flex;
justify-content: space-between;
align-items: center;
}
#copy-button {
margin-top: 0;
}
#code-size {
font-size: var(--font-size-0);
color: var(--gray-6);
}
media-theme-vimeonova {
display: block;
aspect-ratio: 16 / 9;
}
footer .inner {
display: flex;
align-items: end;
justify-content: center;
padding-block: 3rem 2rem;
fill: #242628;
}
.mux-svg {
width: 2.5rem;
}
</style>
<script type="module" src="dist/script.js"></script>
</head>
<body>
<header>
<div class="inner">
<nav>
<a href="https://github.com/muxinc/player.style" target="_blank">GitHub</a>
</nav>
</div>
</header>
<main>
<div class="inner">
<aside>
<h1>player.style demo</h1>
<p>A fresh collection of media player themes for every use case!</p>
</aside>
<section>
<media-theme-vimeonova>
<hls-video
slot="media"
src="https://stream.mux.com/fXNzVtmtWuyz00xnSrJg4OJH6PyNo6D02UzmgeKGkP5YQ.m3u8"
poster="https://image.mux.com/fXNzVtmtWuyz00xnSrJg4OJH6PyNo6D02UzmgeKGkP5YQ/thumbnail.webp"
></hls-video>
</media-theme-vimeonova>
</section>
</div>
</main>
<footer>
<div class="inner">
<a class="mux-link" href="https://www.mux.com/" target="_blank">
<span hidden>Made by Mux</span>
<svg class="mux-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 77 24">
<path
d="M47.73 0c-1.64 0-2.97 1.34-2.97 3v9c0 3.31-2.67 6-5.94 6-3.28 0-5.94-2.69-5.94-6V3c0-1.66-1.33-3-2.97-3s-2.97 1.34-2.97 3v9c0 6.62 5.33 12 11.88 12S50.7 18.62 50.7 12V3c.01-1.66-1.32-3-2.97-3M60.92 12l-6.81 6.88a3.02 3.02 0 0 0 0 4.24 2.95 2.95 0 0 0 4.2 0l6.81-6.88 6.81 6.88a2.95 2.95 0 0 0 4.2 0 3.02 3.02 0 0 0 0-4.24L69.32 12l6.81-6.88a3.02 3.02 0 0 0 0-4.24 2.95 2.95 0 0 0-4.2 0l-6.81 6.88L58.3.88a2.95 2.95 0 0 0-4.2 0 3.02 3.02 0 0 0 0 4.24zM21.93.23a2.96 2.96 0 0 0-3.24.65l-6.81 6.88L5.07.88A2.94 2.94 0 0 0 1.83.23 2.99 2.99 0 0 0 0 3v18c0 1.66 1.33 3 2.97 3s2.97-1.34 2.97-3V10.24l3.84 3.88a2.95 2.95 0 0 0 4.2 0l3.84-3.88V21c0 1.66 1.33 3 2.97 3s2.97-1.34 2.97-3V3c.01-1.21-.72-2.31-1.83-2.77"
/>
</svg>
</a>
</div>
</footer>
<script type="module"></script>
</body>
</html>
================================================
FILE: examples/vanilla/package.json
================================================
{
"private": true,
"name": "vanilla",
"version": "1.11.15",
"description": "",
"main": "index.html",
"scripts": {
"clean": "rimraf dist",
"start": "esbuild --bundle script.js --outfile=dist/script.js --servedir=.",
"build": "esbuild --bundle script.js --outfile=dist/script.js"
},
"dependencies": {
"hls-video-element": "^1.3.0",
"player.style": "0.3.4"
},
"devDependencies": {
"esbuild": "^0.24.0"
}
}
================================================
FILE: examples/vanilla/script.js
================================================
import 'hls-video-element';
import 'player.style/vimeonova';
================================================
FILE: index.js
================================================
console.warn(
'⚠️ Warning: "player.style" does not export anything by default.\n' +
'Please import a specific theme, like:\n' +
' import "player.style/[theme-id]";\n'
);
================================================
FILE: package.json
================================================
{
"name": "player.style",
"version": "0.3.4",
"description": "A fresh collection of media player themes for every use case!",
"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"
},
"files": [
"index.js",
"themes/*",
"!.*"
],
"type": "module",
"main": "index.js",
"exports": {
"./*/react": {
"types": "./themes/*/dist/react.d.ts",
"import": "./themes/*/dist/react.js",
"require": "./themes/*/dist/cjs/react.js",
"default": "./themes/*/dist/react.js"
},
"./*.js": {
"types": "./themes/*/dist/media-theme.d.ts",
"import": "./themes/*/dist/media-theme.js",
"require": "./themes/*/dist/cjs/media-theme.js",
"default": "./themes/*/dist/media-theme.js"
},
"./*": {
"types": "./themes/*/dist/media-theme.d.ts",
"import": "./themes/*/dist/media-theme.js",
"require": "./themes/*/dist/cjs/media-theme.js",
"default": "./themes/*/dist/media-theme.js"
},
".": {
"default": "./index.js"
}
},
"typesVersions": {
"*": {
"*/react": [
"./themes/*/dist/react.d.ts"
],
"*": [
"./themes/*/dist/media-theme.d.ts"
]
}
},
"workspaces": [
".",
"site",
"examples/*",
"scripts/*",
"themes/*"
],
"scripts": {
"dev": "chokidar --debounce 50 './themes/*/!(dist|.turbo)' -c 'turbo build --force --filter=./$(dirname {path}) && touch ./site/$(dirname {path}).md'"
},
"dependencies": {
"media-chrome": "~4.19.0"
},
"devDependencies": {
"@player.style/demuxed-2022": "0.1.2",
"@player.style/halloween": "0.1.2",
"@player.style/x-mas": "0.1.2",
"@player.style/instaplay": "0.1.2",
"@player.style/microvideo": "0.2.0",
"@player.style/minimal": "0.2.1",
"@player.style/notflix": "0.1.2",
"@player.style/reelplay": "0.1.2",
"@player.style/sutro": "0.2.1",
"@player.style/sutro-audio": "0.0.8",
"@player.style/tailwind-audio": "0.0.13",
"@player.style/vimeonova": "0.1.2",
"@player.style/winamp": "0.0.13",
"@player.style/yt": "0.2.1",
"chokidar-cli": "^3.0.0",
"eslint": "^8.57.0",
"npm-run-all": "^4.1.5",
"prettier": "^3.4.2",
"rimraf": "^6.0.1",
"turbo": "^2.3.3",
"typescript": "^5"
},
"prettier": {
"printWidth": 120,
"singleQuote": true,
"tabWidth": 2,
"useTabs": false,
"semi": true,
"quoteProps": "as-needed",
"jsxSingleQuote": false,
"trailingComma": "es5",
"bracketSpacing": true,
"arrowParens": "always"
},
"packageManager": "npm@11.0.0"
}
================================================
FILE: scripts/build-theme/CHANGELOG.md
================================================
# Changelog
## [0.1.1](https://github.com/muxinc/player.style/compare/build-theme@0.1.0...build-theme@0.1.1) (2025-12-04)
### Bug Fixes
* Tailwind Audio Theme responsive on packaged version ([2793775](https://github.com/muxinc/player.style/commit/27937752623339f5d2cec01fad67cf6ce49d1f72))
* Updated ce-la-react ([8bb95a9](https://github.com/muxinc/player.style/commit/8bb95a957120f747824c3f7ce1e8bce161407a99))
## [0.1.0](https://github.com/muxinc/player.style/compare/build-theme-v0.0.8...build-theme@0.1.0) (2024-12-19)
### Features
* add tailwind-audio theme ([#40](https://github.com/muxinc/player.style/issues/40)) ([c80e967](https://github.com/muxinc/player.style/commit/c80e9670548ff1db8e241e0b8dc90084004ebd5f))
* add typesVersions and CJS support ([#122](https://github.com/muxinc/player.style/issues/122)) ([8811309](https://github.com/muxinc/player.style/commit/8811309ef34a9af3f8796069fe85abcf82325eb7))
### Bug Fixes
* escape backtick in template HTML ([4cae721](https://github.com/muxinc/player.style/commit/4cae7212ac4d2ec1f408ef1f9ae3ac5c684efc7d)), closes [#98](https://github.com/muxinc/player.style/issues/98)
* media theme types bug ([8dd42da](https://github.com/muxinc/player.style/commit/8dd42dab7f0536a49f2df5109f27c7285ad9ff48))
* types and cleanup theme build ([#8](https://github.com/muxinc/player.style/issues/8)) ([21b9916](https://github.com/muxinc/player.style/commit/21b991621accfecba421f3cf1d2dbb0b98509d95))
* upgrade to Media Chrome v4 ([#64](https://github.com/muxinc/player.style/issues/64)) ([be68af2](https://github.com/muxinc/player.style/commit/be68af2f9c3a6ff6674b9951f0b34f2bfdb042aa))
* use ce-la-react, fix React 19+ wrappers ([#146](https://github.com/muxinc/player.style/issues/146)) ([10f29b3](https://github.com/muxinc/player.style/commit/10f29b3f20b1a359300aaa0cd5c1f93a9e0a59dc))
## [0.0.8](https://github.com/muxinc/player.style/compare/player.style@0.0.7...build-theme@0.0.8) (2024-10-29)
### Features
* add typesVersions and CJS support ([#122](https://github.com/muxinc/player.style/issues/122)) ([8811309](https://github.com/muxinc/player.style/commit/8811309ef34a9af3f8796069fe85abcf82325eb7))
### Bug Fixes
* escape backtick in template HTML ([4cae721](https://github.com/muxinc/player.style/commit/4cae7212ac4d2ec1f408ef1f9ae3ac5c684efc7d)), closes [#98](https://github.com/muxinc/player.style/issues/98)
## [0.0.7](https://github.com/muxinc/player.style/compare/build-theme-v0.0.6...build-theme@0.0.7) (2024-10-21)
### Features
* add tailwind-audio theme ([#40](https://github.com/muxinc/player.style/issues/40)) ([c80e967](https://github.com/muxinc/player.style/commit/c80e9670548ff1db8e241e0b8dc90084004ebd5f))
* add typesVersions and CJS support ([#122](https://github.com/muxinc/player.style/issues/122)) ([8811309](https://github.com/muxinc/player.style/commit/8811309ef34a9af3f8796069fe85abcf82325eb7))
### Bug Fixes
* escape backtick in template HTML ([4cae721](https://github.com/muxinc/player.style/commit/4cae7212ac4d2ec1f408ef1f9ae3ac5c684efc7d)), closes [#98](https://github.com/muxinc/player.style/issues/98)
* media theme types bug ([8dd42da](https://github.com/muxinc/player.style/commit/8dd42dab7f0536a49f2df5109f27c7285ad9ff48))
* types and cleanup theme build ([#8](https://github.com/muxinc/player.style/issues/8)) ([21b9916](https://github.com/muxinc/player.style/commit/21b991621accfecba421f3cf1d2dbb0b98509d95))
* upgrade to Media Chrome v4 ([#64](https://github.com/muxinc/player.style/issues/64)) ([be68af2](https://github.com/muxinc/player.style/commit/be68af2f9c3a6ff6674b9951f0b34f2bfdb042aa))
## [0.0.6](https://github.com/muxinc/player.style/compare/build-theme-v0.0.5...build-theme@0.0.6) (2024-10-08)
### 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
* escape backtick in template HTML ([4cae721](https://github.com/muxinc/player.style/commit/4cae7212ac4d2ec1f408ef1f9ae3ac5c684efc7d)), closes [#98](https://github.com/muxinc/player.style/issues/98)
* media theme types bug ([8dd42da](https://github.com/muxinc/player.style/commit/8dd42dab7f0536a49f2df5109f27c7285ad9ff48))
* types and cleanup theme build ([#8](https://github.com/muxinc/player.style/issues/8)) ([21b9916](https://github.com/muxinc/player.style/commit/21b991621accfecba421f3cf1d2dbb0b98509d95))
* upgrade to Media Chrome v4 ([#64](https://github.com/muxinc/player.style/issues/64)) ([be68af2](https://github.com/muxinc/player.style/commit/be68af2f9c3a6ff6674b9951f0b34f2bfdb042aa))
## [0.0.5](https://github.com/muxinc/player.style/compare/build-theme-v0.0.4...build-theme@0.0.5) (2024-09-25)
### 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
* escape backtick in template HTML ([4cae721](https://github.com/muxinc/player.style/commit/4cae7212ac4d2ec1f408ef1f9ae3ac5c684efc7d)), closes [#98](https://github.com/muxinc/player.style/issues/98)
* media theme types bug ([8dd42da](https://github.com/muxinc/player.style/commit/8dd42dab7f0536a49f2df5109f27c7285ad9ff48))
* types and cleanup theme build ([#8](https://github.com/muxinc/player.style/issues/8)) ([21b9916](https://github.com/muxinc/player.style/commit/21b991621accfecba421f3cf1d2dbb0b98509d95))
* upgrade to Media Chrome v4 ([#64](https://github.com/muxinc/player.style/issues/64)) ([be68af2](https://github.com/muxinc/player.style/commit/be68af2f9c3a6ff6674b9951f0b34f2bfdb042aa))
## [0.0.4](https://github.com/muxinc/player.style/compare/build-theme-v0.0.3...build-theme@0.0.4) (2024-09-10)
### 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
* media theme types bug ([8dd42da](https://github.com/muxinc/player.style/commit/8dd42dab7f0536a49f2df5109f27c7285ad9ff48))
* types and cleanup theme build ([#8](https://github.com/muxinc/player.style/issues/8)) ([21b9916](https://github.com/muxinc/player.style/commit/21b991621accfecba421f3cf1d2dbb0b98509d95))
* upgrade to Media Chrome v4 ([#64](https://github.com/muxinc/player.style/issues/64)) ([be68af2](https://github.com/muxinc/player.style/commit/be68af2f9c3a6ff6674b9951f0b34f2bfdb042aa))
## [0.0.3](https://github.com/muxinc/player.style/compare/build-theme@0.0.2...build-theme@0.0.3) (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
* upgrade to Media Chrome v4 ([#64](https://github.com/muxinc/player.style/issues/64)) ([be68af2](https://github.com/muxinc/player.style/commit/be68af2f9c3a6ff6674b9951f0b34f2bfdb042aa))
## [0.0.2](https://github.com/muxinc/player.style/compare/build-theme-v0.0.1...build-theme@0.0.2) (2024-06-17)
### Bug Fixes
* media theme types bug ([8dd42da](https://github.com/muxinc/player.style/commit/8dd42dab7f0536a49f2df5109f27c7285ad9ff48))
* types and cleanup theme build ([#8](https://github.com/muxinc/player.style/issues/8)) ([21b9916](https://github.com/muxinc/player.style/commit/21b991621accfecba421f3cf1d2dbb0b98509d95))
================================================
FILE: scripts/build-theme/build.js
================================================
#!/usr/bin/env node
import { parseArgs } from 'node:util';
import process from 'node:process';
import { join, dirname } from 'node:path';
import { realpath, mkdir, readFile, writeFile } from 'node:fs/promises';
import { fileURLToPath } from 'node:url';
import ejs from 'ejs';
import * as esbuild from 'esbuild';
const nodePath = await realpath(process.argv[1]);
const modulePath = await realpath(fileURLToPath(import.meta.url));
const isCLI = nodePath === modulePath;
if (isCLI) cliBuild();
export async function cliBuild() {
const { values, positionals } = parseArgs({
options: {},
strict: false,
allowPositionals: true,
});
await build(positionals, values);
}
export async function build() {
// read name from package.json
const { name } = JSON.parse(await readFile('./package.json', 'utf8'));
if (name.startsWith('@player.style/')) {
const themeName = name.replace('@player.style/', '');
await mkdir('./dist', { recursive: true });
// Copy declaration file to dist folder
const declaration = await readFile(
join(dirname(modulePath), '/templates/media-theme.d.ts'),
'utf8'
);
await writeFile(`./dist/media-theme.d.ts`, populate(declaration, themeName));
const themeTemplate = await readFile('./template.html', 'utf8');
const outThemeTemplate = await ejs.render(
themeTemplate,
{ themeName, base64 },
{
root: join(process.cwd(), 'dist'),
async: true,
}
);
await writeFile(`./dist/media-theme.html`, outThemeTemplate);
// Copy code file to dist folder and replace vars.
const themeCode = await readFile(
join(dirname(modulePath), '/templates/media-theme.js'),
'utf8'
);
const indentedThemeTemplate = outThemeTemplate.replace(/^(.)/gm, ' $1').replace(/`/g, '\\`');
const outThemeCode = themeCode.replace(/{{{theme_template}}}/g, indentedThemeTemplate);
await writeFile(`./dist/media-theme.js`, populate(outThemeCode, themeName));
// React component
// Copy declaration file to dist folder.
const reactDeclaration = await readFile(
join(dirname(modulePath), '/templates/react.d.ts'),
'utf8'
);
await writeFile(`./dist/react.d.ts`, populate(reactDeclaration, themeName));
// Copy code file to dist folder and replace vars.
const reactCode = await readFile(join(dirname(modulePath), '/templates/react.js'), 'utf8');
await writeFile(`./dist/react.js`, populate(reactCode, themeName));
// Bundle up ce-la-react dependency.
await esbuild.build({
entryPoints: ['./dist/react.js'],
bundle: true,
format: 'esm',
external: ['react', './media-theme.js'],
outdir: './dist',
allowOverwrite: true,
});
// Build CJS files
await mkdir('./dist/cjs', { recursive: true });
await writeFile(`./dist/cjs/package.json`, JSON.stringify({ type: 'commonjs' }));
await esbuild.build({
entryPoints: ['./dist/media-theme.js', './dist/react.js'],
bundle: true,
format: 'cjs',
external: ['react', 'media-chrome', './media-theme.js'],
outdir: './dist/cjs',
});
}
}
function populate(template, themeName) {
return template
.replace(/{{{element_name}}}/g, `media-theme-${themeName}`)
.replace(/___ClassName___/g, `MediaTheme${pascalCase(themeName)}Element`)
.replace(/___ComponentName___/g, `MediaTheme${pascalCase(themeName)}`);
}
function pascalCase(str) {
return `-${str}`.replace(/-(\w)/g, (g) => g[1].toUpperCase());
}
async function base64(imageUrl) {
const image = await readFile(imageUrl);
const ext = imageUrl.split('.').pop().toLowerCase();
return `data:image/${ext};base64,${image.toString('base64')}`;
}
================================================
FILE: scripts/build-theme/package.json
================================================
{
"private": true,
"name": "build-theme",
"version": "0.1.1",
"type": "module",
"main": "./build.js",
"bin": {
"build-theme": "./build.js"
},
"dependencies": {
"ce-la-react": "^0.3.2",
"ejs": "^3.1.10",
"esbuild": "^0.24.0"
}
}
================================================
FILE: scripts/build-theme/templates/media-theme.d.ts
================================================
import { MediaThemeElement } from 'media-chrome/dist/media-theme-element.js';
declare global {
interface HTMLElementTagNameMap {
'{{{element_name}}}': ___ClassName___;
}
}
declare class ___ClassName___ extends MediaThemeElement {
static template: HTMLTemplateElement;
}
export default ___ClassName___;
================================================
FILE: scripts/build-theme/templates/media-theme.js
================================================
/*
<{{{element_name}}}>
<video
slot="media"
src="https://stream.mux.com/fXNzVtmtWuyz00xnSrJg4OJH6PyNo6D02UzmgeKGkP5YQ/high.mp4"
></video>
</{{{element_name}}}>
*/
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 = String.raw/*html*/`
{{{theme_template}}}
`;
}
class ___ClassName___ extends MediaThemeElement {
static template = template;
}
if (globalThis.customElements && !globalThis.customElements.get('{{{element_name}}}')) {
globalThis.customElements.define('{{{element_name}}}', ___ClassName___);
}
export default ___ClassName___;
================================================
FILE: scripts/build-theme/templates/react.d.ts
================================================
import ___ClassName___ from './media-theme.js';
declare const ___ComponentName___: React.ForwardRefExoticComponent<
React.DetailedHTMLProps<React.HTMLAttributes<___ClassName___>, ___ClassName___>
>;
export default ___ComponentName___;
================================================
FILE: scripts/build-theme/templates/react.js
================================================
'use client';
import React from 'react';
import ThemeElement from './media-theme.js';
// keep as last import, ce-la-react is bundled.
import { createComponent } from 'ce-la-react';
export default createComponent({
react: React,
tagName: '{{{element_name}}}',
elementClass: ThemeElement,
});
================================================
FILE: scripts/publish-packages/package.json
================================================
{
"private": true,
"name": "publish-packages",
"version": "0.0.0",
"type": "module",
"main": "./publish-packages.js",
"bin": {
"publish-packages": "./publish-packages.js"
}
}
================================================
FILE: scripts/publish-packages/publish-packages.js
================================================
#!/usr/bin/env node
import { parseArgs } from 'node:util';
import { argv } from 'node:process';
import { realpath } from 'node:fs/promises';
import { fileURLToPath } from 'node:url';
import { exec } from 'node:child_process';
import { promisify } from 'node:util';
const execAsync = promisify(exec);
const nodePath = await realpath(argv[1]);
const modulePath = await realpath(fileURLToPath(import.meta.url));
const isCLI = nodePath === modulePath;
if (isCLI) cliPublish();
export async function cliPublish() {
const { values } = parseArgs({
options: {},
strict: false,
allowPositionals: true,
});
await publish(values);
}
export async function publish() {
let remoteVersionsResult;
try {
remoteVersionsResult = await execAsync(`npm view . version -w . -w themes --json`);
} catch (error) {
// If the package is not published yet, npm view will fail with something like below on error.stdout:
// {
// 'player.style': '0.0.3',
// '@player.style/microvideo': '0.0.4',
// '@player.style/minimal': '0.0.4',
// error: {
// '@player.style/ytttt': {
// code: 'E404',
// summary: 'Not Found - GET https://registry.npmjs.org/@player.style%2fytttt - Not found',
// detail: "'@player.style/ytttt@*' is not in this registry.\n" +
// '\n' +
// 'Note that you can also install from a\n' +
// 'tarball, folder, http url, or git url.'
// }
// }
// }
remoteVersionsResult = error;
}
let newVersionsResult;
try {
newVersionsResult = await execAsync(`npm pkg get version -w . -w themes --json`);
} catch (error) {
newVersionsResult = error;
}
const remoteVersions = JSON.parse(remoteVersionsResult.stdout);
const newVersions = JSON.parse(newVersionsResult.stdout);
for (const [pkg, version] of Object.entries(newVersions)) {
if (remoteVersions[pkg] === version) {
console.log(`Skipping ${pkg}@${version} because it's already published`);
continue;
}
console.log(`Publishing ${pkg}@${version}`);
await execAsync(`npm publish -w ${pkg} --access public --provenance`);
}
}
================================================
FILE: site/.eslintrc.json
================================================
{
"root": true,
"extends": "next/core-web-vitals"
}
================================================
FILE: site/.gitignore
================================================
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/.pnp
.pnp.js
.yarn/install-state.gz
# testing
/coverage
# next.js
/.next/
/out/
# production
/build
# misc
.DS_Store
*.pem
# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# local env files
.env*.local
# vercel
.vercel
# typescript
*.tsbuildinfo
next-env.d.ts
.turbo/
dist/
================================================
FILE: site/CHANGELOG.md
================================================
# Changelog
## [1.11.15](https://github.com/muxinc/player.style/compare/site@1.11.14...site@1.11.15) (2026-04-15)
### Dependencies
* The following workspace dependencies were updated
* dependencies
* player.style bumped from 0.3.3 to 0.3.4
## [1.11.14](https://github.com/muxinc/player.style/compare/site@1.11.13...site@1.11.14) (2026-04-15)
### Bug Fixes
* **deps:** Bump media-chrome ([f1a9d2c](https://github.com/muxinc/player.style/commit/f1a9d2c2319cdd2206e0e25f0326a55599afb39d))
### Dependencies
* The following workspace dependencies were updated
* dependencies
* player.style bumped from 0.3.2 to 0.3.3
## [1.11.13](https://github.com/muxinc/player.style/compare/site@1.11.12...site@1.11.13) (2026-03-25)
### Dependencies
* The following workspace dependencies were updated
* dependencies
* player.style bumped from 0.3.1 to 0.3.2
## [1.11.12](https://github.com/muxinc/player.style/compare/site@1.11.11...site@1.11.12) (2025-12-04)
### Bug Fixes
* Updated ce-la-react ([8bb95a9](https://github.com/muxinc/player.style/commit/8bb95a957120f747824c3f7ce1e8bce161407a99))
### Dependencies
* The following workspace dependencies were updated
* dependencies
* player.style bumped from 0.3.0 to 0.3.1
## [1.11.11](https://github.com/muxinc/player.style/compare/site@1.11.10...site@1.11.11) (2025-10-01)
### Dependencies
* The following workspace dependencies were updated
* dependencies
* player.style bumped from 0.2.0 to 0.3.0
## [1.11.10](https://github.com/muxinc/player.style/compare/site@1.11.9...site@1.11.10) (2025-08-22)
### Dependencies
* The following workspace dependencies were updated
* dependencies
* player.style bumped from 0.1.10 to 0.2.0
## [1.11.9](https://github.com/muxinc/player.style/compare/site@1.11.8...site@1.11.9) (2025-08-01)
### Dependencies
* The following workspace dependencies were updated
* dependencies
* player.style bumped from 0.1.9 to 0.1.10
## [1.11.8](https://github.com/muxinc/player.style/compare/site@1.11.7...site@1.11.8) (2025-06-12)
### Dependencies
* The following workspace dependencies were updated
* dependencies
* player.style bumped from 0.1.8 to 0.1.9
## [1.11.7](https://github.com/muxinc/player.style/compare/site@1.11.6...site@1.11.7) (2025-05-01)
### Dependencies
* The following workspace dependencies were updated
* dependencies
* player.style bumped from 0.1.7 to 0.1.8
## [1.11.6](https://github.com/muxinc/player.style/compare/site@1.11.5...site@1.11.6) (2025-03-31)
### Dependencies
* The following workspace dependencies were updated
* dependencies
* player.style bumped from 0.1.6 to 0.1.7
## [1.11.5](https://github.com/muxinc/player.style/compare/site@1.11.4...site@1.11.5) (2025-03-14)
### Dependencies
* The following workspace dependencies were updated
* dependencies
* player.style bumped from 0.1.5 to 0.1.6
## [1.11.4](https://github.com/muxinc/player.style/compare/site@1.11.3...site@1.11.4) (2025-03-05)
### Dependencies
* The following workspace dependencies were updated
* dependencies
* player.style bumped from 0.1.4 to 0.1.5
## [1.11.3](https://github.com/muxinc/player.style/compare/site@1.11.2...site@1.11.3) (2025-02-13)
### Dependencies
* The following workspace dependencies were updated
* dependencies
* player.style bumped from 0.1.3 to 0.1.4
## [1.11.2](https://github.com/muxinc/player.style/compare/site@1.11.1...site@1.11.2) (2025-01-29)
### Dependencies
* The following workspace dependencies were updated
* dependencies
* player.style bumped from 0.1.2 to 0.1.3
## [1.11.1](https://github.com/muxinc/player.style/compare/site@1.11.0...site@1.11.1) (2025-01-23)
### Bug Fixes
* upgrade MC ([#149](https://github.com/muxinc/player.style/issues/149)) ([4ecfd39](https://github.com/muxinc/player.style/commit/4ecfd391b7695ae3bf0daa3d7118dc9c58c0b0a8))
### Dependencies
* The following workspace dependencies were updated
* dependencies
* player.style bumped from 0.1.1 to 0.1.2
## [1.11.0](https://github.com/muxinc/player.style/compare/site-v1.10.0...site@1.11.0) (2024-12-19)
### Features
* Add Christmas theme ([#138](https://github.com/muxinc/player.style/issues/138)) ([8203d90](https://github.com/muxinc/player.style/commit/8203d904e485c122f012b368ec11a625db0d6e97))
* add error dialog ([#143](https://github.com/muxinc/player.style/issues/143)) ([2edd3fe](https://github.com/muxinc/player.style/commit/2edd3fec8b54d187c45dd88d13ac73a3b616c373))
* add Halloween theme ([#125](https://github.com/muxinc/player.style/issues/125)) ([445cc74](https://github.com/muxinc/player.style/commit/445cc74bc2e84765ae03d9c35aad80e92f1774e6))
* add Instaplay theme ([#58](https://github.com/muxinc/player.style/issues/58)) ([fb84b90](https://github.com/muxinc/player.style/commit/fb84b909f9c7dce6b8cd15ce3cc6af9ef6f21c1f))
* add Notflix theme ([#21](https://github.com/muxinc/player.style/issues/21)) ([ed8c33c](https://github.com/muxinc/player.style/commit/ed8c33c61aadb47e897638dce8ec3a77cf774b71))
* add packages restructure ([#2](https://github.com/muxinc/player.style/issues/2)) ([b23ddb0](https://github.com/muxinc/player.style/commit/b23ddb0fba3682b19b7d8e2912045ccbfbce6cb0))
* add Reelplay theme ([#94](https://github.com/muxinc/player.style/issues/94)) ([872d05a](https://github.com/muxinc/player.style/commit/872d05a192a0bda926774eff9d4c2c3be7240f8f))
* add Sutro audio theme ([#65](https://github.com/muxinc/player.style/issues/65)) ([1ec5d61](https://github.com/muxinc/player.style/commit/1ec5d61b223138b1f668ec1d593189e2717a7279))
* add tailwind-audio theme ([#40](https://github.com/muxinc/player.style/issues/40)) ([c80e967](https://github.com/muxinc/player.style/commit/c80e9670548ff1db8e241e0b8dc90084004ebd5f))
* add Vimeonova theme ([#44](https://github.com/muxinc/player.style/issues/44)) ([e421c28](https://github.com/muxinc/player.style/commit/e421c28ae88a16fce65c6beca0e778d01fc1a353))
* add Winamp theme ([#53](https://github.com/muxinc/player.style/issues/53)) ([e258398](https://github.com/muxinc/player.style/commit/e258398d75eab19cf1656e5a597f518344d5f5b3))
* new promo video + features ([#109](https://github.com/muxinc/player.style/issues/109)) ([0049a24](https://github.com/muxinc/player.style/commit/0049a2411f90fd3c2971533b6fa3419b8c994e29))
### Bug Fixes
* add airplay icon and button ([#131](https://github.com/muxinc/player.style/issues/131)) ([548247e](https://github.com/muxinc/player.style/commit/548247ef50c27ca4c3175be2e4cd8dc423e882f7))
* fix imports and exports ([08ca9c0](https://github.com/muxinc/player.style/commit/08ca9c0a2d8d6634baffb18e49b007d0fceaf796))
* 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))
* no render on preload none ([#38](https://github.com/muxinc/player.style/issues/38)) ([64dda58](https://github.com/muxinc/player.style/commit/64dda5825562da846edb33ddc7d4ba2548c08e00))
* player resize input bug ([#86](https://github.com/muxinc/player.style/issues/86)) ([70c91f2](https://github.com/muxinc/player.style/commit/70c91f262cb7b46698ff5f11d38331d9ee85830a))
* player.style dependency ([bb2a628](https://github.com/muxinc/player.style/commit/bb2a62895db48cd89b6af38d6a550136626f0ade))
* player.style dependency ([a62612b](https://github.com/muxinc/player.style/commit/a62612b43f1b7269e41cfeec499c49dd29babf95))
* Safari color picker border ([f1b1203](https://github.com/muxinc/player.style/commit/f1b1203338e428ce8ab61cf042822c5c20f0939a)), closes [#104](https://github.com/muxinc/player.style/issues/104)
* Safari CSS aspect-ratio height bug workaround ([7d6014a](https://github.com/muxinc/player.style/commit/7d6014aa529c7ceb6741f73e2972f10be2d100ca))
* Safari portrait asset height bug ([34dbc22](https://github.com/muxinc/player.style/commit/34dbc22d45935a706c1d1ed4235af5d6db34268e)), closes [#106](https://github.com/muxinc/player.style/issues/106)
* upgrade to Media Chrome v4 ([#64](https://github.com/muxinc/player.style/issues/64)) ([be68af2](https://github.com/muxinc/player.style/commit/be68af2f9c3a6ff6674b9951f0b34f2bfdb042aa))
* vanilla pkg, add vanilla example ([dc01aa4](https://github.com/muxinc/player.style/commit/dc01aa4985dfa782527f5533698e029efeb2dc8a))
## [1.10.0](https://github.com/muxinc/player.style/compare/site-v1.9.0...site@1.10.0) (2024-12-19)
### Features
* Add Christmas theme ([#138](https://github.com/muxinc/player.style/issues/138)) ([8203d90](https://github.com/muxinc/player.style/commit/8203d904e485c122f012b368ec11a625db0d6e97))
* add error dialog ([#143](https://github.com/muxinc/player.style/issues/143)) ([2edd3fe](https://github.com/muxinc/player.style/commit/2edd3fec8b54d187c45dd88d13ac73a3b616c373))
* add Halloween theme ([#125](https://github.com/muxinc/player.style/issues/125)) ([445cc74](https://github.com/muxinc/player.style/commit/445cc74bc2e84765ae03d9c35aad80e92f1774e6))
* add Instaplay theme ([#58](https://github.com/muxinc/player.style/issues/58)) ([fb84b90](https://github.com/muxinc/player.style/commit/fb84b909f9c7dce6b8cd15ce3cc6af9ef6f21c1f))
* add Notflix theme ([#21](https://github.com/muxinc/player.style/issues/21)) ([ed8c33c](https://github.com/muxinc/player.style/commit/ed8c33c61aadb47e897638dce8ec3a77cf774b71))
* add packages restructure ([#2](https://github.com/muxinc/player.style/issues/2)) ([b23ddb0](https://github.com/muxinc/player.style/commit/b23ddb0fba3682b19b7d8e2912045ccbfbce6cb0))
* add Reelplay theme ([#94](https://github.com/muxinc/player.style/issues/94)) ([872d05a](https://github.com/muxinc/player.style/commit/872d05a192a0bda926774eff9d4c2c3be7240f8f))
* add Sutro audio theme ([#65](https://github.com/muxinc/player.style/issues/65)) ([1ec5d61](https://github.com/muxinc/player.style/commit/1ec5d61b223138b1f668ec1d593189e2717a7279))
* add tailwind-audio theme ([#40](https://github.com/muxinc/player.style/issues/40)) ([c80e967](https://github.com/muxinc/player.style/commit/c80e9670548ff1db8e241e0b8dc90084004ebd5f))
* add Vimeonova theme ([#44](https://github.com/muxinc/player.style/issues/44)) ([e421c28](https://github.com/muxinc/player.style/commit/e421c28ae88a16fce65c6beca0e778d01fc1a353))
* add Winamp theme ([#53](https://github.com/muxinc/player.style/issues/53)) ([e258398](https://github.com/muxinc/player.style/commit/e258398d75eab19cf1656e5a597f518344d5f5b3))
* new promo video + features ([#109](https://github.com/muxinc/player.style/issues/109)) ([0049a24](https://github.com/muxinc/player.style/commit/0049a2411f90fd3c2971533b6fa3419b8c994e29))
### Bug Fixes
* add airplay icon and button ([#131](https://github.com/muxinc/player.style/issues/131)) ([548247e](https://github.com/muxinc/player.style/commit/548247ef50c27ca4c3175be2e4cd8dc423e882f7))
* fix imports and exports ([08ca9c0](https://github.com/muxinc/player.style/commit/08ca9c0a2d8d6634baffb18e49b007d0fceaf796))
* 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))
* no render on preload none ([#38](https://github.com/muxinc/player.style/issues/38)) ([64dda58](https://github.com/muxinc/player.style/commit/64dda5825562da846edb33ddc7d4ba2548c08e00))
* player resize input bug ([#86](https://github.com/muxinc/player.style/issues/86)) ([70c91f2](https://github.com/muxinc/player.style/commit/70c91f262cb7b46698ff5f11d38331d9ee85830a))
* player.style dependency ([bb2a628](https://github.com/muxinc/player.style/commit/bb2a62895db48cd89b6af38d6a550136626f0ade))
* player.style dependency ([a62612b](https://github.com/muxinc/player.style/commit/a62612b43f1b7269e41cfeec499c49dd29babf95))
* Safari color picker border ([f1b1203](https://github.com/muxinc/player.style/commit/f1b1203338e428ce8ab61cf042822c5c20f0939a)), closes [#104](https://github.com/muxinc/player.style/issues/104)
* Safari CSS aspect-ratio height bug workaround ([7d6014a](https://github.com/muxinc/player.style/commit/7d6014aa529c7ceb6741f73e2972f10be2d100ca))
* Safari portrait asset height bug ([34dbc22](https://github.com/muxinc/player.style/commit/34dbc22d45935a706c1d1ed4235af5d6db34268e)), closes [#106](https://github.com/muxinc/player.style/issues/106)
* upgrade to Media Chrome v4 ([#64](https://github.com/muxinc/player.style/issues/64)) ([be68af2](https://github.com/muxinc/player.style/commit/be68af2f9c3a6ff6674b9951f0b34f2bfdb042aa))
* vanilla pkg, add vanilla example ([dc01aa4](https://github.com/muxinc/player.style/commit/dc01aa4985dfa782527f5533698e029efeb2dc8a))
### Dependencies
* The following workspace dependencies were updated
* dependencies
* player.style bumped from 0.1.0 to 0.1.1
## [1.9.0](https://github.com/muxinc/player.style/compare/site-v1.8.0...site@1.9.0) (2024-12-09)
### Features
* Add Christmas theme ([#138](https://github.com/muxinc/player.style/issues/138)) ([8203d90](https://github.com/muxinc/player.style/commit/8203d904e485c122f012b368ec11a625db0d6e97))
* add error dialog ([#143](https://github.com/muxinc/player.style/issues/143)) ([2edd3fe](https://github.com/muxinc/player.style/commit/2edd3fec8b54d187c45dd88d13ac73a3b616c373))
* add Halloween theme ([#125](https://github.com/muxinc/player.style/issues/125)) ([445cc74](https://github.com/muxinc/player.style/commit/445cc74bc2e84765ae03d9c35aad80e92f1774e6))
* add Instaplay theme ([#58](https://github.com/muxinc/player.style/issues/58)) ([fb84b90](https://github.com/muxinc/player.style/commit/fb84b909f9c7dce6b8cd15ce3cc6af9ef6f21c1f))
* add Notflix theme ([#21](https://github.com/muxinc/player.style/issues/21)) ([ed8c33c](https://github.com/muxinc/player.style/commit/ed8c33c61aadb47e897638dce8ec3a77cf774b71))
* add packages restructure ([#2](https://github.com/muxinc/player.style/issues/2)) ([b23ddb0](https://github.com/muxinc/player.style/commit/b23ddb0fba3682b19b7d8e2912045ccbfbce6cb0))
* add Reelplay theme ([#94](https://github.com/muxinc/player.style/issues/94)) ([872d05a](https://github.com/muxinc/player.style/commit/872d05a192a0bda926774eff9d4c2c3be7240f8f))
* add Sutro audio theme ([#65](https://github.com/muxinc/player.style/issues/65)) ([1ec5d61](https://github.com/muxinc/player.style/commit/1ec5d61b223138b1f668ec1d593189e2717a7279))
* add tailwind-audio theme ([#40](https://github.com/muxinc/player.style/issues/40)) ([c80e967](https://github.com/muxinc/player.style/commit/c80e9670548ff1db8e241e0b8dc90084004ebd5f))
* add Vimeonova theme ([#44](https://github.com/muxinc/player.style/issues/44)) ([e421c28](https://github.com/muxinc/player.style/commit/e421c28ae88a16fce65c6beca0e778d01fc1a353))
* add Winamp theme ([#53](https://github.com/muxinc/player.style/issues/53)) ([e258398](https://github.com/muxinc/player.style/commit/e258398d75eab19cf1656e5a597f518344d5f5b3))
* new promo video + features ([#109](https://github.com/muxinc/player.style/issues/109)) ([0049a24](https://github.com/muxinc/player.style/commit/0049a2411f90fd3c2971533b6fa3419b8c994e29))
### Bug Fixes
* add airplay icon and button ([#131](https://github.com/muxinc/player.style/issues/131)) ([548247e](https://github.com/muxinc/player.style/commit/548247ef50c27ca4c3175be2e4cd8dc423e882f7))
* fix imports and exports ([08ca9c0](https://github.com/muxinc/player.style/commit/08ca9c0a2d8d6634baffb18e49b007d0fceaf796))
* 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))
* no render on preload none ([#38](https://github.com/muxinc/player.style/issues/38)) ([64dda58](https://github.com/muxinc/player.style/commit/64dda5825562da846edb33ddc7d4ba2548c08e00))
* player resize input bug ([#86](https://github.com/muxinc/player.style/issues/86)) ([70c91f2](https://github.com/muxinc/player.style/commit/70c91f262cb7b46698ff5f11d38331d9ee85830a))
* player.style dependency ([bb2a628](https://github.com/muxinc/player.style/commit/bb2a62895db48cd89b6af38d6a550136626f0ade))
* player.style dependency ([a62612b](https://github.com/muxinc/player.style/commit/a62612b43f1b7269e41cfeec499c49dd29babf95))
* Safari color picker border ([f1b1203](https://github.com/muxinc/player.style/commit/f1b1203338e428ce8ab61cf042822c5c20f0939a)), closes [#104](https://github.com/muxinc/player.style/issues/104)
* Safari CSS aspect-ratio height bug workaround ([7d6014a](https://github.com/muxinc/player.style/commit/7d6014aa529c7ceb6741f73e2972f10be2d100ca))
* Safari portrait asset height bug ([34dbc22](https://github.com/muxinc/player.style/commit/34dbc22d45935a706c1d1ed4235af5d6db34268e)), closes [#106](https://github.com/muxinc/player.style/issues/106)
* upgrade to Media Chrome v4 ([#64](https://github.com/muxinc/player.style/issues/64)) ([be68af2](https://github.com/muxinc/player.style/commit/be68af2f9c3a6ff6674b9951f0b34f2bfdb042aa))
* vanilla pkg, add vanilla example ([dc01aa4](https://github.com/muxinc/player.style/commit/dc01aa4985dfa782527f5533698e029efeb2dc8a))
### Dependencies
* The following workspace dependencies were updated
* dependencies
* player.style bumped from 0.0.14 to 0.1.0
## [1.8.0](https://github.com/muxinc/player.style/compare/site-v1.7.0...site@1.8.0) (2024-12-02)
### Features
* Add Christmas theme ([#138](https://github.com/muxinc/player.style/issues/138)) ([8203d90](https://github.com/muxinc/player.style/commit/8203d904e485c122f012b368ec11a625db0d6e97))
* add Halloween theme ([#125](https://github.com/muxinc/player.style/issues/125)) ([445cc74](https://github.com/muxinc/player.style/commit/445cc74bc2e84765ae03d9c35aad80e92f1774e6))
* add Instaplay theme ([#58](https://github.com/muxinc/player.style/issues/58)) ([fb84b90](https://github.com/muxinc/player.style/commit/fb84b909f9c7dce6b8cd15ce3cc6af9ef6f21c1f))
* add Notflix theme ([#21](https://github.com/muxinc/player.style/issues/21)) ([ed8c33c](https://github.com/muxinc/player.style/commit/ed8c33c61aadb47e897638dce8ec3a77cf774b71))
* add packages restructure ([#2](https://github.com/muxinc/player.style/issues/2)) ([b23ddb0](https://github.com/muxinc/player.style/commit/b23ddb0fba3682b19b7d8e2912045ccbfbce6cb0))
* add Reelplay theme ([#94](https://github.com/muxinc/player.style/issues/94)) ([872d05a](https://github.com/muxinc/player.style/commit/872d05a192a0bda926774eff9d4c2c3be7240f8f))
* add Sutro audio theme ([#65](https://github.com/muxinc/player.style/issues/65)) ([1ec5d61](https://github.com/muxinc/player.style/commit/1ec5d61b223138b1f668ec1d593189e2717a7279))
* add tailwind-audio theme ([#40](https://github.com/muxinc/player.style/issues/40)) ([c80e967](https://github.com/muxinc/player.style/commit/c80e9670548ff1db8e241e0b8dc90084004ebd5f))
* add Vimeonova theme ([#44](https://github.com/muxinc/player.style/issues/44)) ([e421c28](https://github.com/muxinc/player.style/commit/e421c28ae88a16fce65c6beca0e778d01fc1a353))
* add Winamp theme ([#53](https://github.com/muxinc/player.style/issues/53)) ([e258398](https://github.com/muxinc/player.style/commit/e258398d75eab19cf1656e5a597f518344d5f5b3))
* new promo video + features ([#109](https://github.com/muxinc/player.style/issues/109)) ([0049a24](https://github.com/muxinc/player.style/commit/0049a2411f90fd3c2971533b6fa3419b8c994e29))
### Bug Fixes
* add airplay icon and button ([#131](https://github.com/muxinc/player.style/issues/131)) ([548247e](https://github.com/muxinc/player.style/commit/548247ef50c27ca4c3175be2e4cd8dc423e882f7))
* fix imports and exports ([08ca9c0](https://github.com/muxinc/player.style/commit/08ca9c0a2d8d6634baffb18e49b007d0fceaf796))
* 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))
* no render on preload none ([#38](https://github.com/muxinc/player.style/issues/38)) ([64dda58](https://github.com/muxinc/player.style/commit/64dda5825562da846edb33ddc7d4ba2548c08e00))
* player resize input bug ([#86](https://github.com/muxinc/player.style/issues/86)) ([70c91f2](https://github.com/muxinc/player.style/commit/70c91f262cb7b46698ff5f11d38331d9ee85830a))
* player.style dependency ([bb2a628](https://github.com/muxinc/player.style/commit/bb2a62895db48cd89b6af38d6a550136626f0ade))
* player.style dependency ([a62612b](https://github.com/muxinc/player.style/commit/a62612b43f1b7269e41cfeec499c49dd29babf95))
* Safari color picker border ([f1b1203](https://github.com/muxinc/player.style/commit/f1b1203338e428ce8ab61cf042822c5c20f0939a)), closes [#104](https://github.com/muxinc/player.style/issues/104)
* Safari CSS aspect-ratio height bug workaround ([7d6014a](https://github.com/muxinc/player.style/commit/7d6014aa529c7ceb6741f73e2972f10be2d100ca))
* Safari portrait asset height bug ([34dbc22](https://github.com/muxinc/player.style/commit/34dbc22d45935a706c1d1ed4235af5d6db34268e)), closes [#106](https://github.com/muxinc/player.style/issues/106)
* upgrade to Media Chrome v4 ([#64](https://github.com/muxinc/player.style/issues/64)) ([be68af2](https://github.com/muxinc/player.style/commit/be68af2f9c3a6ff6674b9951f0b34f2bfdb042aa))
* vanilla pkg, add vanilla example ([dc01aa4](https://github.com/muxinc/player.style/commit/dc01aa4985dfa782527f5533698e029efeb2dc8a))
### Dependencies
* The following workspace dependencies were updated
* dependencies
* player.style bumped from 0.0.13 to 0.0.14
## [1.7.0](https://github.com/muxinc/player.style/compare/site-v1.6.0...site@1.7.0) (2024-11-11)
### Features
* add Halloween theme ([#125](https://github.com/muxinc/player.style/issues/125)) ([445cc74](https://github.com/muxinc/player.style/commit/445cc74bc2e84765ae03d9c35aad80e92f1774e6))
* add Instaplay theme ([#58](https://github.com/muxinc/player.style/issues/58)) ([fb84b90](https://github.com/muxinc/player.style/commit/fb84b909f9c7dce6b8cd15ce3cc6af9ef6f21c1f))
* add Notflix theme ([#21](https://github.com/muxinc/player.style/issues/21)) ([ed8c33c](https://github.com/muxinc/player.style/commit/ed8c33c61aadb47e897638dce8ec3a77cf774b71))
* add packages restructure ([#2](https://github.com/muxinc/player.style/issues/2)) ([b23ddb0](https://github.com/muxinc/player.style/commit/b23ddb0fba3682b19b7d8e2912045ccbfbce6cb0))
* add Reelplay theme ([#94](https://github.com/muxinc/player.style/issues/94)) ([872d05a](https://github.com/muxinc/player.style/commit/872d05a192a0bda926774eff9d4c2c3be7240f8f))
* add Sutro audio theme ([#65](https://github.com/muxinc/player.style/issues/65)) ([1ec5d61](https://github.com/muxinc/player.style/commit/1ec5d61b223138b1f668ec1d593189e2717a7279))
* add tailwind-audio theme ([#40](https://github.com/muxinc/player.style/issues/40)) ([c80e967](https://github.com/muxinc/player.style/commit/c80e9670548ff1db8e241e0b8dc90084004ebd5f))
* add Vimeonova theme ([#44](https://github.com/muxinc/player.style/issues/44)) ([e421c28](https://github.com/muxinc/player.style/commit/e421c28ae88a16fce65c6beca0e778d01fc1a353))
* add Winamp theme ([#53](https://github.com/muxinc/player.style/issues/53)) ([e258398](https://github.com/muxinc/player.style/commit/e258398d75eab19cf1656e5a597f518344d5f5b3))
* new promo video + features ([#109](https://github.com/muxinc/player.style/issues/109)) ([0049a24](https://github.com/muxinc/player.style/commit/0049a2411f90fd3c2971533b6fa3419b8c994e29))
### Bug Fixes
* fix imports and exports ([08ca9c0](https://github.com/muxinc/player.style/commit/08ca9c0a2d8d6634baffb18e49b007d0fceaf796))
* 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))
* no render on preload none ([#38](https://github.com/muxinc/player.style/issues/38)) ([64dda58](https://github.com/muxinc/player.style/commit/64dda5825562da846edb33ddc7d4ba2548c08e00))
* player resize input bug ([#86](https://github.com/muxinc/player.style/issues/86)) ([70c91f2](https://github.com/muxinc/player.style/commit/70c91f262cb7b46698ff5f11d38331d9ee85830a))
* player.style dependency ([bb2a628](https://github.com/muxinc/player.style/commit/bb2a62895db48cd89b6af38d6a550136626f0ade))
* player.style dependency ([a62612b](https://github.com/muxinc/player.style/commit/a62612b43f1b7269e41cfeec499c49dd29babf95))
* Safari color picker border ([f1b1203](https://github.com/muxinc/player.style/commit/f1b1203338e428ce8ab61cf042822c5c20f0939a)), closes [#104](https://github.com/muxinc/player.style/issues/104)
* Safari CSS aspect-ratio height bug workaround ([7d6014a](https://github.com/muxinc/player.style/commit/7d6014aa529c7ceb6741f73e2972f10be2d100ca))
* Safari portrait asset height bug ([34dbc22](https://github.com/muxinc/player.style/commit/34dbc22d45935a706c1d1ed4235af5d6db34268e)), closes [#106](https://github.com/muxinc/player.style/issues/106)
* upgrade to Media Chrome v4 ([#64](https://github.com/muxinc/player.style/issues/64)) ([be68af2](https://github.com/muxinc/player.style/commit/be68af2f9c3a6ff6674b9951f0b34f2bfdb042aa))
* vanilla pkg, add vanilla example ([dc01aa4](https://github.com/muxinc/player.style/commit/dc01aa4985dfa782527f5533698e029efeb2dc8a))
### Dependencies
* The following workspace dependencies were updated
* dependencies
* player.style bumped from 0.0.12 to 0.0.13
## [1.6.0](https://github.com/muxinc/player.style/compare/site-v1.5.0...site@1.6.0) (2024-10-29)
### Features
* add Halloween theme ([#125](https://github.com/muxinc/player.style/issues/125)) ([445cc74](https://github.com/muxinc/player.style/commit/445cc74bc2e84765ae03d9c35aad80e92f1774e6))
* add Instaplay theme ([#58](https://github.com/muxinc/player.style/issues/58)) ([fb84b90](https://github.com/muxinc/player.style/commit/fb84b909f9c7dce6b8cd15ce3cc6af9ef6f21c1f))
* add Notflix theme ([#21](https://github.com/muxinc/player.style/issues/21)) ([ed8c33c](https://github.com/muxinc/player.style/commit/ed8c33c61aadb47e897638dce8ec3a77cf774b71))
* add packages restructure ([#2](https://github.com/muxinc/player.style/issues/2)) ([b23ddb0](https://github.com/muxinc/player.style/commit/b23ddb0fba3682b19b7d8e2912045ccbfbce6cb0))
* add Reelplay theme ([#94](https://github.com/muxinc/player.style/issues/94)) ([872d05a](https://github.com/muxinc/player.style/commit/872d05a192a0bda926774eff9d4c2c3be7240f8f))
* add Sutro audio theme ([#65](https://github.com/muxinc/player.style/issues/65)) ([1ec5d61](https://github.com/muxinc/player.style/commit/1ec5d61b223138b1f668ec1d593189e2717a7279))
* add tailwind-audio theme ([#40](https://github.com/muxinc/player.style/issues/40)) ([c80e967](https://github.com/muxinc/player.style/commit/c80e9670548ff1db8e241e0b8dc90084004ebd5f))
* add Vimeonova theme ([#44](https://github.com/muxinc/player.style/issues/44)) ([e421c28](https://github.com/muxinc/player.style/commit/e421c28ae88a16fce65c6beca0e778d01fc1a353))
* add Winamp theme ([#53](https://github.com/muxinc/player.style/issues/53)) ([e258398](https://github.com/muxinc/player.style/commit/e258398d75eab19cf1656e5a597f518344d5f5b3))
* new promo video + features ([#109](https://github.com/muxinc/player.style/issues/109)) ([0049a24](https://github.com/muxinc/player.style/commit/0049a2411f90fd3c2971533b6fa3419b8c994e29))
### Bug Fixes
* fix imports and exports ([08ca9c0](https://github.com/muxinc/player.style/commit/08ca9c0a2d8d6634baffb18e49b007d0fceaf796))
* 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))
* no render on preload none ([#38](https://github.com/muxinc/player.style/issues/38)) ([64dda58](https://github.com/muxinc/player.style/commit/64dda5825562da846edb33ddc7d4ba2548c08e00))
* player resize input bug ([#86](https://github.com/muxinc/player.style/issues/86)) ([70c91f2](https://github.com/muxinc/player.style/commit/70c91f262cb7b46698ff5f11d38331d9ee85830a))
* player.style dependency ([bb2a628](https://github.com/muxinc/player.style/commit/bb2a62895db48cd89b6af38d6a550136626f0ade))
* player.style dependency ([a62612b](https://github.com/muxinc/player.style/commit/a62612b43f1b7269e41cfeec499c49dd29babf95))
* Safari color picker border ([f1b1203](https://github.com/muxinc/player.style/commit/f1b1203338e428ce8ab61cf042822c5c20f0939a)), closes [#104](https://github.com/muxinc/player.style/issues/104)
* Safari CSS aspect-ratio height bug workaround ([7d6014a](https://github.com/muxinc/player.style/commit/7d6014aa529c7ceb6741f73e2972f10be2d100ca))
* Safari portrait asset height bug ([34dbc22](https://github.com/muxinc/player.style/commit/34dbc22d45935a706c1d1ed4235af5d6db34268e)), closes [#106](https://github.com/muxinc/player.style/issues/106)
* upgrade to Media Chrome v4 ([#64](https://github.com/muxinc/player.style/issues/64)) ([be68af2](https://github.com/muxinc/player.style/commit/be68af2f9c3a6ff6674b9951f0b34f2bfdb042aa))
* vanilla pkg, add vanilla example ([dc01aa4](https://github.com/muxinc/player.style/commit/dc01aa4985dfa782527f5533698e029efeb2dc8a))
### Dependencies
* The following workspace dependencies were updated
* dependencies
* player.style bumped from 0.0.11 to 0.0.12
## [1.5.0](https://github.com/muxinc/player.style/compare/site-v1.4.0...site@1.5.0) (2024-10-21)
### Features
* add Instaplay theme ([#58](https://github.com/muxinc/player.style/issues/58)) ([fb84b90](https://github.com/muxinc/player.style/commit/fb84b909f9c7dce6b8cd15ce3cc6af9ef6f21c1f))
* add Notflix theme ([#21](https://github.com/muxinc/player.style/issues/21)) ([ed8c33c](https://github.com/muxinc/player.style/commit/ed8c33c61aadb47e897638dce8ec3a77cf774b71))
* add packages restructure ([#2](https://github.com/muxinc/player.style/issues/2)) ([b23ddb0](https://github.com/muxinc/player.style/commit/b23ddb0fba3682b19b7d8e2912045ccbfbce6cb0))
* add Reelplay theme ([#94](https://github.com/muxinc/player.style/issues/94)) ([872d05a](https://github.com/muxinc/player.style/commit/872d05a192a0bda926774eff9d4c2c3be7240f8f))
* add Sutro audio theme ([#65](https://github.com/muxinc/player.style/issues/65)) ([1ec5d61](https://github.com/muxinc/player.style/commit/1ec5d61b223138b1f668ec1d593189e2717a7279))
* add tailwind-audio theme ([#40](https://github.com/muxinc/player.style/issues/40)) ([c80e967](https://github.com/muxinc/player.style/commit/c80e9670548ff1db8e241e0b8dc90084004ebd5f))
* add Vimeonova theme ([#44](https://github.com/muxinc/player.style/issues/44)) ([e421c28](https://github.com/muxinc/player.style/commit/e421c28ae88a16fce65c6beca0e778d01fc1a353))
* add Winamp theme ([#53](https://github.com/muxinc/player.style/issues/53)) ([e258398](https://github.com/muxinc/player.style/commit/e258398d75eab19cf1656e5a597f518344d5f5b3))
* new promo video + features ([#109](https://github.com/muxinc/player.style/issues/109)) ([0049a24](https://github.com/muxinc/player.style/commit/0049a2411f90fd3c2971533b6fa3419b8c994e29))
### Bug Fixes
* fix imports and exports ([08ca9c0](https://github.com/muxinc/player.style/commit/08ca9c0a2d8d6634baffb18e49b007d0fceaf796))
* 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))
* no render on preload none ([#38](https://github.com/muxinc/player.style/issues/38)) ([64dda58](https://github.com/muxinc/player.style/commit/64dda5825562da846edb33ddc7d4ba2548c08e00))
* player resize input bug ([#86](https://github.com/muxinc/player.style/issues/86)) ([70c91f2](https://github.com/muxinc/player.style/commit/70c91f262cb7b46698ff5f11d38331d9ee85830a))
* player.style dependency ([bb2a628](https://github.com/muxinc/player.style/commit/bb2a62895db48cd89b6af38d6a550136626f0ade))
* player.style dependency ([a62612b](https://github.com/muxinc/player.style/commit/a62612b43f1b7269e41cfeec499c49dd29babf95))
* Safari color picker border ([f1b1203](https://github.com/muxinc/player.style/commit/f1b1203338e428ce8ab61cf042822c5c20f0939a)), closes [#104](https://github.com/muxinc/player.style/issues/104)
* Safari CSS aspect-ratio height bug workaround ([7d6014a](https://github.com/muxinc/player.style/commit/7d6014aa529c7ceb6741f73e2972f10be2d100ca))
* Safari portrait asset height bug ([34dbc22](https://github.com/muxinc/player.style/commit/34dbc22d45935a706c1d1ed4235af5d6db34268e)), closes [#106](https://github.com/muxinc/player.style/issues/106)
* upgrade to Media Chrome v4 ([#64](https://github.com/muxinc/player.style/issues/64)) ([be68af2](https://github.com/muxinc/player.style/commit/be68af2f9c3a6ff6674b9951f0b34f2bfdb042aa))
* vanilla pkg, add vanilla example ([dc01aa4](https://github.com/muxinc/player.style/commit/dc01aa4985dfa782527f5533698e029efeb2dc8a))
### Dependencies
* The following workspace dependencies were updated
* dependencies
* player.style bumped from 0.0.10 to 0.0.11
## [1.4.0](https://github.com/muxinc/player.style/compare/site-v1.3.0...site@1.4.0) (2024-10-08)
### Features
* add Instaplay theme ([#58](https://github.com/muxinc/player.style/issues/58)) ([fb84b90](https://github.com/muxinc/player.style/commit/fb84b909f9c7dce6b8cd15ce3cc6af9ef6f21c1f))
* add Notflix theme ([#21](https://github.com/muxinc/player.style/issues/21)) ([ed8c33c](https://github.com/muxinc/player.style/commit/ed8c33c61aadb47e897638dce8ec3a77cf774b71))
* add packages restructure ([#2](https://github.com/muxinc/player.style/issues/2)) ([b23ddb0](https://github.com/muxinc/player.style/commit/b23ddb0fba3682b19b7d8e2912045ccbfbce6cb0))
* add Reelplay theme ([#94](https://github.com/muxinc/player.style/issues/94)) ([872d05a](https://github.com/muxinc/player.style/commit/872d05a192a0bda926774eff9d4c2c3be7240f8f))
* add Sutro audio theme ([#65](https://github.com/muxinc/player.style/issues/65)) ([1ec5d61](https://github.com/muxinc/player.style/commit/1ec5d61b223138b1f668ec1d593189e2717a7279))
* add tailwind-audio theme ([#40](https://github.com/muxinc/player.style/issues/40)) ([c80e967](https://github.com/muxinc/player.style/commit/c80e9670548ff1db8e241e0b8dc90084004ebd5f))
* add Vimeonova theme ([#44](https://github.com/muxinc/player.style/issues/44)) ([e421c28](https://github.com/muxinc/player.style/commit/e421c28ae88a16fce65c6beca0e778d01fc1a353))
* add Winamp theme ([#53](https://github.com/muxinc/player.style/issues/53)) ([e258398](https://github.com/muxinc/player.style/commit/e258398d75eab19cf1656e5a597f518344d5f5b3))
* new promo video + features ([#109](https://github.com/muxinc/player.style/issues/109)) ([0049a24](https://github.com/muxinc/player.style/commit/0049a2411f90fd3c2971533b6fa3419b8c994e29))
### Bug Fixes
* fix imports and exports ([08ca9c0](https://github.com/muxinc/player.style/commit/08ca9c0a2d8d6634baffb18e49b007d0fceaf796))
* 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))
* no render on preload none ([#38](https://github.com/muxinc/player.style/issues/38)) ([64dda58](https://github.com/muxinc/player.style/commit/64dda5825562da846edb33ddc7d4ba2548c08e00))
* player resize input bug ([#86](https://github.com/muxinc/player.style/issues/86)) ([70c91f2](https://github.com/muxinc/player.style/commit/70c91f262cb7b46698ff5f11d38331d9ee85830a))
* player.style dependency ([bb2a628](https://github.com/muxinc/player.style/commit/bb2a62895db48cd89b6af38d6a550136626f0ade))
* player.style dependency ([a62612b](https://github.com/muxinc/player.style/commit/a62612b43f1b7269e41cfeec499c49dd29babf95))
* Safari color picker border ([f1b1203](https://github.com/muxinc/player.style/commit/f1b1203338e428ce8ab61cf042822c5c20f0939a)), closes [#104](https://github.com/muxinc/player.style/issues/104)
* Safari CSS aspect-ratio height bug workaround ([7d6014a](https://github.com/muxinc/player.style/commit/7d6014aa529c7ceb6741f73e2972f10be2d100ca))
* Safari portrait asset height bug ([34dbc22](https://github.com/muxinc/player.style/commit/34dbc22d45935a706c1d1ed4235af5d6db34268e)), closes [#106](https://github.com/muxinc/player.style/issues/106)
* upgrade to Media Chrome v4 ([#64](https://github.com/muxinc/player.style/issues/64)) ([be68af2](https://github.com/muxinc/player.style/commit/be68af2f9c3a6ff6674b9951f0b34f2bfdb042aa))
* vanilla pkg, add vanilla example ([dc01aa4](https://github.com/muxinc/player.style/commit/dc01aa4985dfa782527f5533698e029efeb2dc8a))
### Dependencies
* The following workspace dependencies were updated
* dependencies
* player.style bumped from 0.0.9 to 0.0.10
## [1.3.0](https://github.com/muxinc/player.style/compare/site-v1.2.0...site@1.3.0) (2024-09-25)
### Features
* add Instaplay theme ([#58](https://github.com/muxinc/player.style/issues/58)) ([fb84b90](https://github.com/muxinc/player.style/commit/fb84b909f9c7dce6b8cd15ce3cc6af9ef6f21c1f))
* add packages restructure ([#2](https://github.com/muxinc/player.style/issues/2)) ([b23ddb0](https://github.com/muxinc/player.style/commit/b23ddb0fba3682b19b7d8e2912045ccbfbce6cb0))
* add Reelplay theme ([#94](https://github.com/muxinc/player.style/issues/94)) ([872d05a](https://github.com/muxinc/player.style/commit/872d05a192a0bda926774eff9d4c2c3be7240f8f))
* add Sutro audio theme ([#65](https://github.com/muxinc/player.style/issues/65)) ([1ec5d61](https://github.com/muxinc/player.style/commit/1ec5d61b223138b1f668ec1d593189e2717a7279))
* add tailwind-audio theme ([#40](https://github.com/muxinc/player.style/issues/40)) ([c80e967](https://github.com/muxinc/player.style/commit/c80e9670548ff1db8e241e0b8dc90084004ebd5f))
* add Vimeonova theme ([#44](https://github.com/muxinc/player.style/issues/44)) ([e421c28](https://github.com/muxinc/player.style/commit/e421c28ae88a16fce65c6beca0e778d01fc1a353))
* add Winamp theme ([#53](https://github.com/muxinc/player.style/issues/53)) ([e258398](https://github.com/muxinc/player.style/commit/e258398d75eab19cf1656e5a597f518344d5f5b3))
### Bug Fixes
* fix imports and exports ([08ca9c0](https://github.com/muxinc/player.style/commit/08ca9c0a2d8d6634baffb18e49b007d0fceaf796))
* 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))
* no render on preload none ([#38](https://github.com/muxinc/player.style/issues/38)) ([64dda58](https://github.com/muxinc/player.style/commit/64dda5825562da846edb33ddc7d4ba2548c08e00))
* player resize input bug ([#86](https://github.com/muxinc/player.style/issues/86)) ([70c91f2](https://github.com/muxinc/player.style/commit/70c91f262cb7b46698ff5f11d38331d9ee85830a))
* player.style dependency ([bb2a628](https://github.com/muxinc/player.style/commit/bb2a62895db48cd89b6af38d6a550136626f0ade))
* player.style dependency ([a62612b](https://github.com/muxinc/player.style/commit/a62612b43f1b7269e41cfeec499c49dd29babf95))
* upgrade to Media Chrome v4 ([#64](https://github.com/muxinc/player.style/issues/64)) ([be68af2](https://github.com/muxinc/player.style/commit/be68af2f9c3a6ff6674b9951f0b34f2bfdb042aa))
* vanilla pkg, add vanilla example ([dc01aa4](https://github.com/muxinc/player.style/commit/dc01aa4985dfa782527f5533698e029efeb2dc8a))
### Dependencies
* The following workspace dependencies were updated
* dependencies
* player.style bumped from 0.0.8 to 0.0.9
## [1.2.0](https://github.com/muxinc/player.style/compare/site-v1.1.0...site@1.2.0) (2024-09-10)
### Features
* add Instaplay theme ([#58](https://github.com/muxinc/player.style/issues/58)) ([fb84b90](https://github.com/muxinc/player.style/commit/fb84b909f9c7dce6b8cd15ce3cc6af9ef6f21c1f))
* add packages restructure ([#2](https://github.com/muxinc/player.style/issues/2)) ([b23ddb0](https://github.com/muxinc/player.style/commit/b23ddb0fba3682b19b7d8e2912045ccbfbce6cb0))
* add Sutro audio theme ([#65](https://github.com/muxinc/player.style/issues/65)) ([1ec5d61](https://github.com/muxinc/player.style/commit/1ec5d61b223138b1f668ec1d593189e2717a7279))
* add tailwind-audio theme ([#40](https://github.com/muxinc/player.style/issues/40)) ([c80e967](https://github.com/muxinc/player.style/commit/c80e9670548ff1db8e241e0b8dc90084004ebd5f))
* add Vimeonova theme ([#44](https://github.com/muxinc/player.style/issues/44)) ([e421c28](https://github.com/muxinc/player.style/commit/e421c28ae88a16fce65c6beca0e778d01fc1a353))
* add Winamp theme ([#53](https://github.com/muxinc/player.style/issues/53)) ([e258398](https://github.com/muxinc/player.style/commit/e258398d75eab19cf1656e5a597f518344d5f5b3))
### Bug Fixes
* fix imports and exports ([08ca9c0](https://github.com/muxinc/player.style/commit/08ca9c0a2d8d6634baffb18e49b007d0fceaf796))
* 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))
* no render on preload none ([#38](https://github.com/muxinc/player.style/issues/38)) ([64dda58](https://github.com/muxinc/player.style/commit/64dda5825562da846edb33ddc7d4ba2548c08e00))
* player resize input bug ([#86](https://github.com/muxinc/player.style/issues/86)) ([70c91f2](https://github.com/muxinc/player.style/commit/70c91f262cb7b46698ff5f11d38331d9ee85830a))
* player.style dependency ([bb2a628](https://github.com/muxinc/player.style/commit/bb2a62895db48cd89b6af38d6a550136626f0ade))
* player.style dependency ([a62612b](https://github.com/muxinc/player.style/commit/a62612b43f1b7269e41cfeec499c49dd29babf95))
* upgrade to Media Chrome v4 ([#64](https://github.com/muxinc/player.style/issues/64)) ([be68af2](https://github.com/muxinc/player.style/commit/be68af2f9c3a6ff6674b9951f0b34f2bfdb042aa))
* vanilla pkg, add vanilla example ([dc01aa4](https://github.com/muxinc/player.style/commit/dc01aa4985dfa782527f5533698e029efeb2dc8a))
### Dependencies
* The following workspace dependencies were updated
* dependencies
* player.style bumped from 0.0.7 to 0.0.8
## [1.1.0](https://github.com/muxinc/player.style/compare/site@1.0.4...site@1.1.0) (2024-08-15)
### Features
* add Instaplay theme ([#58](https://github.com/muxinc/player.style/issues/58)) ([fb84b90](https://github.com/muxinc/player.style/commit/fb84b909f9c7dce6b8cd15ce3cc6af9ef6f21c1f))
* add tailwind-audio theme ([#40](https://github.com/muxinc/player.style/issues/40)) ([c80e967](https://github.com/muxinc/player.style/commit/c80e9670548ff1db8e241e0b8dc90084004ebd5f))
* add Vimeonova theme ([#44](https://github.com/muxinc/player.style/issues/44)) ([e421c28](https://github.com/muxinc/player.style/commit/e421c28ae88a16fce65c6beca0e778d01fc1a353))
* add Winamp theme ([#53](https://github.com/muxinc/player.style/issues/53)) ([e258398](https://github.com/muxinc/player.style/commit/e258398d75eab19cf1656e5a597f518344d5f5b3))
### 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))
* no render on preload none ([#38](https://github.com/muxinc/player.style/issues/38)) ([64dda58](https://github.com/muxinc/player.style/commit/64dda5825562da846edb33ddc7d4ba2548c08e00))
* 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
* dependencies
* player.style bumped from 0.0.6 to 0.0.7
## [1.0.4](https://github.com/muxinc/player.style/compare/site@1.0.3...site@1.0.4) (2024-06-21)
### Dependencies
* The following workspace dependencies were updated
* dependencies
* player.style bumped from 0.0.5 to 0.0.6
## [1.0.3](https://github.com/muxinc/player.style/compare/site@1.0.2...site@1.0.3) (2024-06-17)
### Dependencies
* The following workspace dependencies were updated
* dependencies
* player.style bumped from 0.0.4 to 0.0.5
## [1.0.2](https://github.com/muxinc/player.style/compare/site@1.0.1...site@1.0.2) (2024-06-17)
### Dependencies
* The following workspace dependencies were updated
* dependencies
* player.style bumped from 0.0.3 to 0.0.4
## [1.0.1](https://github.com/muxinc/player.style/compare/site@1.0.0...site@1.0.1) (2024-06-14)
### Dependencies
* The following workspace dependencies were updated
* dependencies
* player.style bumped from 0.0.2 to 0.0.3
## 1.0.0 (2024-06-14)
### Features
* add packages restructure ([#2](https://github.com/muxinc/player.style/issues/2)) ([b23ddb0](https://github.com/muxinc/player.style/commit/b23ddb0fba3682b19b7d8e2912045ccbfbce6cb0))
### Bug Fixes
* fix imports and exports ([08ca9c0](https://github.com/muxinc/player.style/commit/08ca9c0a2d8d6634baffb18e49b007d0fceaf796))
* player.style dependency ([bb2a628](https://github.com/muxinc/player.style/commit/bb2a62895db48cd89b6af38d6a550136626f0ade))
* player.style dependency ([a62612b](https://github.com/muxinc/player.style/commit/a62612b43f1b7269e41cfeec499c49dd29babf95))
* vanilla pkg, add vanilla example ([dc01aa4](https://github.com/muxinc/player.style/commit/dc01aa4985dfa782527f5533698e029efeb2dc8a))
### Dependencies
* The following workspace dependencies were updated
* dependencies
* player.style bumped from 0.0.1 to 0.0.2
================================================
FILE: site/README.md
================================================
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
## Getting Started
First, run the development server:
```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
## Learn More
To learn more about Next.js, take a look at the following resources:
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
## Deploy on Vercel
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
================================================
FILE: site/app/(home)/page.tsx
================================================
import { getCollection, getCollectionTagGroups } from '../_utils/content';
import Search from '../_components/Search';
import ThemePreview from '../_components/ThemePreview';
import TagCheckbox from '../_components/TagCheckbox';
import ColorPicker from '../_components/ColorPicker';
import ThemeColorPopover from '../_components/ThemeColorPopover';
import Grid from '../_components/Grid';
import LinkWithUnderline from '../_components/LinkWithUnderline';
const title = 'player.style - Video & audio player themes for every web player & framework';
export const metadata = {
title,
description: 'Video and audio player themes that work for any web player (Video.js, Youtube embeds, and more), and with every web app framework (HTML, React, and more). Open source and built with Media Chrome so they’re fully customizable using just HTML and CSS.',
openGraph: {
title,
url: '/',
locale: 'en-US',
type: 'website',
images: {
url: `/player.style@2x.png`,
alt: 'player.style logo',
},
},
twitter: {
title,
site: '@muxhq',
images: {
url: `/player.style@2x.png`,
alt: 'player.style logo',
}
},
};
type HomeProps = {
searchParams: Record<string, string | string[]>;
};
const steps = [
{ number: '1', text: 'Find a player theme you love' },
{ number: '2', text: 'Pick your player and app framework' },
{ number: '3', text: "Copy, paste, and you're done" },
{ number: '+', text: 'Customize any detail of the player UI using just HTML and CSS' },
];
export default async function Home({ searchParams }: HomeProps) {
const themes = await getCollection('themes', {
searchParams,
});
const tagGroups = await getCollectionTagGroups('themes');
return (
<>
<Grid withPadding={false} className="text-center">
<div className="px-1 py-1.5 sm:p-2 md:p-3">
<h1 className="font-display text-3xl sm:text-5xl md:text-6xl tracking-wide leading-heading font-normal uppercase whitespace-pre-line mx-auto max-w-32 mb-0.5 sm:mb-1">
Find your Player
</h1>
<h2 className="font-body text-balance text-md tracking-wide leading-normal font-normal normal-case max-w-24 mx-auto">
Video and audio player themes built with{' '}
<LinkWithUnderline href="https://media-chrome.org" target="_blank">
Media Chrome
</LinkWithUnderline>
, for <strong>every web player</strong> and <strong>every web app framework</strong>.
</h2>
</div>
<div className="p-1 md:py-1.5 lg:px-3 xl:px-4 bg-white border-ctx-gray border-t">
<div className="grid md:grid-cols-4 items-start md:items-center gap-0.5 lg:gap-1">
{steps.map((step, index) => (
<div key={index} className="flex items-center space-x-0.5 lg:space-x-1">
<div className="relative">
<div className="w-1.5 h-1.5 lg:w-2 lg:h-2 border border-blue rounded-1"></div>
<div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 font-display text-md md:text-lg lg:text-2xl text-blue">
{step.number}
</div>
</div>
<p className="text-balance text-left text-sm font-medium">{step.text}</p>
</div>
))}
</div>
</div>
</Grid>
<div className="relative border-y -my-1px grid grid-cols-xs sm:grid-cols-sm lg:grid-cols-lg xl:grid-cols-xl bg-putty-light border-ctx-gray text-black set-bg-ctx-putty-light set-border-ctx-gray">
<div className="col-start-2 col-end-3 border-x border-ctx-gray">
<div className="gap-2 lg:gap-3 items-center py-0.75">
<div className="block border-ctx-gray bg-putty-light [&>*]:set-border-ctx-gray [&>*]:set-bg-ctx-putty-light text-black"></div>
</div>
</div>
</div>
<div className="relative flex-1 border-y -my-1px grid grid-cols-xs sm:grid-cols-sm lg:grid-cols-lg xl:grid-cols-xl bg-putty-light border-ctx-gray text-black set-bg-ctx-putty-light set-border-ctx-gray">
<div className="col-start-2 col-end-3 border-x border-ctx-gray">
<div className="-m-0.5px grid grid-cols-1 lg:grid-cols-3 h-full">
<div className="border-ctx border border-b-0 -m-0.5px flex flex-col">
<div className="border-ctx bg-charcoal text-putty-light border -m-0.5px font-mono text-sm leading-mono font-normal uppercase -mx-1px -mt-1px h-2 px-1 flex items-center justify-center text-center">
Filter themes
</div>
<div className="border-ctx lg:border-b">
<Search />
</div>
<div className="border-ctx">
{Object.entries(tagGroups)
.filter(([, tags]) => tags.length)
.map(([tagGroup, tags], index) => (
<details key={`details-${index}`} className="border-ctx open:border-b -m-0.5px" open={true}>
<summary className="select-none text-sm font-mono uppercase h-2 cursor-pointer border-ctx border-b px-[2.4rem] py-[1.1rem]">
<span className="px-0.75">{tagGroup}</span>
</summary>
<div className="p-1">
{tags.map((name: string, index: number) => (
<TagCheckbox key={`tagcheckbox-${index}`} name={name} group={tagGroup} />
))}
</div>
</details>
))}
</div>
<div className="border-ctx bg-charcoal text-putty-light border -m-0.5px font-mono text-sm leading-mono font-normal uppercase -mx-1px -mt-1px h-2 px-1 flex gap-0.25 items-center justify-center text-center">
Set theme colors <ThemeColorPopover />
</div>
<div className="border-ctx lg:border-b p-1 flex flex-col sm:flex-row justify-center gap-0.5">
<div className="flex items-center gap-0.25">
<ColorPicker id="primary-color" defaultValue="#ffffff" />
<label htmlFor="primary-color" className="uppercase text-sm font-mono">
Primary
</label>
</div>
<div className="flex items-center gap-0.25">
<ColorPicker id="secondary-color" defaultValue="#ffffff" />
<label htmlFor="secondary-color" className="uppercase text-sm font-mono">
Secondary
</label>
</div>
<div className="flex items-center gap-0.25">
<ColorPicker id="accent-color" defaultValue="#ffffff" />
<label htmlFor="accent-color" className="uppercase text-sm font-mono">
Accent
</label>
</div>
</div>
</div>
<div className="lg:col-span-2 grid h-min">
{themes.length ? (
themes.map((theme, index) => (
<ThemePreview priority={index === 0} key={`theme-${theme._meta.path}`} theme={theme} />
))
) : (
<div className="-m-0.5px grid flex flex-col items-center">
<div className="p-1 md:p-2 lg:p-4 text-balance">
<h3 className="font-body text-xl md:text-3xl leading-heading font-bold normal-case pb-1 text-center lg:text-left">
<p>Aw snap! No search results were found.</p>
</h3>
</div>
</div>
)}
</div>
</div>
</div>
</div>
</>
);
}
================================================
FILE: site/app/(home)/page.tsx.orig
================================================
import { getCollection, getCollectionTagGroups } from '../_utils/content';
import Search from '../_components/Search';
import ThemePreview from '../_components/ThemePreview';
import TagCheckbox from '../_components/TagCheckbox';
import ColorPicker from '../_components/ColorPicker';
import ThemeColorPopover from '../_components/ThemeColorPopover';
import Grid from '../_components/Grid';
type HomeProps = {
searchParams: Record<string, string | string[]>;
};
const steps = [
{ number: '1', text: 'Find a player theme you love' },
{ number: '2', text: 'Pick your player and app framework' },
{ number: '3', text: "Copy, paste, and you're done" },
{ number: '+', text: 'Customize any detail of the player UI using just HTML and CSS' },
];
export default async function Home({ searchParams }: HomeProps) {
const themes = await getCollection('themes', {
searchParams,
});
const tagGroups = await getCollectionTagGroups('themes');
return (
<>
<<<<<<< HEAD
<Hero title="Find your Player" className="md:min-h-[253px] lg:min-h-[328px]">
<h2 className="mb-1">Player.style is the home of <strong>video and audio player themes</strong> built with <a className="underline" href="https://media-chrome.org">Media Chrome</a> (by <a className="underline" href="https://mux.com">Mux</a>). They work for <strong><em>any web player</em></strong> (Video.js, Youtube embeds, and more), and with <strong><em>every web app framework</em></strong> (HTML, React, and more).</h2>
<p className="mb-1 text-lg">
<b style={{ color: 'rgb(0, 103, 223)', fontSize: '16px' }}>1.</b> Find a player theme you love.{' '}<br />
<b style={{ color: 'rgb(0, 103, 223)', fontSize: '16px' }}>2.</b> Pick your player and app framework. {' '}<br />
<b style={{ color: 'rgb(0, 103, 223)', fontSize: '16px' }}>3.</b> Copy, paste, you’re done.
</p>
<p><b>PLUS</b> Customize any detail of the player UI using just HTML and CSS.{' '}<Link href="/about">Learn more about the project.</Link></p>
</Hero>
=======
<Grid withPadding={false} className="text-center">
<div className="px-1 py-1.5 md:p-2">
<h1 className="font-display text-2xl sm:text-3xl md:text-4xl lg:text-5xl tracking-wide leading-heading font-normal uppercase whitespace-pre-line mx-auto max-w-32 mb-0.5">
Find your Player
</h1>
<h2 className="font-body text-balance text-md tracking-wide leading-normal font-normal normal-case max-w-28 mx-auto">
Player.style is the home of video and audio player themes built with{' '}
<a className="underline" href="https://media-chrome.org">
Media Chrome
</a>{' '}
by{' '}
<a className="underline" href="https://mux.com">
Mux
</a>
. They work for any web player, and with every web app framework.
</h2>
</div>
<div className="p-1 md:py-1.5 lg:px-2 bg-white border-ctx-gray border-t">
<div className="flex flex-col md:flex-row justify-between items-start md:items-center space-y-0.5 md:space-y-0 md:space-x-0.5 lg:space-x-2">
{steps.map((step, index) => (
<div key={index} className="flex items-center space-x-0.5 lg:space-x-1">
<div className="relative">
<div className="w-1.5 h-1.5 lg:w-2 lg:h-2 border border-blue rounded-1"></div>
<div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 font-display text-md md:text-2xl text-blue">
{step.number}
</div>
</div>
<p className="text-balance text-left text-sm font-medium">{step.text}</p>
</div>
))}
</div>
</div>
</Grid>
<div className="relative border-y -my-1px grid grid-cols-xs sm:grid-cols-sm lg:grid-cols-lg xl:grid-cols-xl bg-putty-light border-ctx-gray text-black set-bg-ctx-putty-light set-border-ctx-gray">
<div className="col-start-2 col-end-3 border-x border-ctx-gray">
<div className="gap-2 lg:gap-3 items-center py-0.75">
<div className="block border-ctx-gray bg-putty-light [&>*]:set-border-ctx-gray [&>*]:set-bg-ctx-putty-light text-black"></div>
</div>
</div>
</div>
>>>>>>> main
<div className="relative flex-1 border-y -my-1px grid grid-cols-xs sm:grid-cols-sm lg:grid-cols-lg xl:grid-cols-xl bg-putty-light border-ctx-gray text-black set-bg-ctx-putty-light set-border-ctx-gray">
<div className="col-start-2 col-end-3 border-x border-ctx-gray">
<div className="-m-0.5px grid grid-cols-1 lg:grid-cols-3 h-full">
<div className="border-ctx border border-b-0 -m-0.5px flex flex-col">
<div className="border-ctx bg-charcoal text-putty-light border -m-0.5px font-mono text-sm leading-mono font-normal uppercase -mx-1px -mt-1px h-2 px-1 flex items-center justify-center text-center">
Filter themes
</div>
<div className="border-ctx lg:border-b">
<Search />
</div>
<div className="border-ctx">
{Object.entries(tagGroups)
.filter(([, tags]) => tags.length)
.map(([tagGroup, tags], index) => (
<details
key={`details-${index}`}
className="border-ctx open:border-b -m-0.5px"
open={true}
>
<summary className="select-none text-sm font-mono uppercase h-2 cursor-pointer border-ctx border-b px-[2.4rem] py-[1.1rem]">
<span className="px-0.75">{tagGroup}</span>
</summary>
<div className="p-1">
{tags.map((name: string, index: number) => (
<TagCheckbox key={`tagcheckbox-${index}`} name={name} group={tagGroup} />
))}
</div>
</details>
))}
</div>
<div className="border-ctx bg-charcoal text-putty-light border -m-0.5px font-mono text-sm leading-mono font-normal uppercase -mx-1px -mt-1px h-2 px-1 flex gap-0.25 items-center justify-center text-center">
Set theme colors <ThemeColorPopover />
</div>
<div className="border-ctx lg:border-b p-1 flex flex-col sm:flex-row justify-center gap-0.5">
<div className="flex items-center gap-0.25">
<ColorPicker id="primary-color" defaultValue="#ffffff" />
<label htmlFor="primary-color" className="uppercase text-sm font-mono">
Primary
</label>
</div>
<div className="flex items-center gap-0.25">
<ColorPicker id="secondary-color" defaultValue="#ffffff" />
<label htmlFor="secondary-color" className="uppercase text-sm font-mono">
Secondary
</label>
</div>
<div className="flex items-center gap-0.25">
<ColorPicker id="accent-color" defaultValue="#ffffff" />
<label htmlFor="accent-color" className="uppercase text-sm font-mono">
Accent
</label>
</div>
</div>
</div>
<div className="lg:col-span-2 grid h-min">
{themes.length ? (
themes.map((theme, index) => (
<ThemePreview
priority={index === 0}
key={`theme-${theme._meta.path}`}
theme={theme}
/>
))
) : (
<div className="-m-0.5px grid flex flex-col items-center">
<div className="p-1 md:p-2 lg:p-4 text-balance">
<h3 className="font-body text-xl md:text-3xl leading-heading font-bold normal-case pb-1 text-center lg:text-left">
<p>Aw snap! No search results were found.</p>
</h3>
</div>
</div>
)}
</div>
</div>
</div>
</div>
</>
);
}
================================================
FILE: site/app/_components/AnalyticsProvider.tsx
================================================
'use client';
import posthog from 'posthog-js';
import { PostHogProvider } from 'posthog-js/react';
if (typeof window !== 'undefined') {
posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY!, {
api_host: process.env.NEXT_PUBLIC_POSTHOG_HOST,
person_profiles: 'always', // 'always' to create profiles for anonymous users
capture_pageview: false, // Disable automatic pageview capture, as we capture manually
capture_pageleave: true, // Enable pageleave capture
});
}
export function AnalyticsProvider({ children }: { children: React.ReactNode }) {
return <PostHogProvider client={posthog}>{children}</PostHogProvider>;
}
================================================
FILE: site/app/_components/AuthorLink.tsx
================================================
import clsx from 'clsx';
import React from 'react';
interface AuthorImageProps {
handle: string;
className?: string;
}
const AuthorImage: React.FC<AuthorImageProps> = ({ handle, className }) => {
const username = handle.replace('@', '');
const githubUrl = `https://github.com/${username}`;
// eslint-disable-next-line @next/next/no-img-element
return <img src={`${githubUrl}.png?size=100`} alt={`Avatar for ${handle}`} className={className} />;
};
interface AuthorLinkProps {
handle: string;
className?: string;
}
const AuthorLink: React.FC<AuthorLinkProps> = ({ handle, className }) => {
const username = handle.replace('@', '');
const githubUrl = `https://github.com/${username}`;
return (
<a
href={githubUrl}
className={clsx('inline-flex gap-0.5 flex-row items-center mb-1 group', className)}
target="_blank"
rel="noopener noreferrer"
>
<span className="rounded-1 overflow-clip">
<AuthorImage handle={handle} className="w-2 h-2" />
</span>
<span className="font-mono leading-mono font-normal">
By{' '}
<span className="underline-offset-mono decoration-link group-hover:underline group-focus-visible:underline">
{handle}
</span>
</span>
</a>
);
};
export default AuthorLink;
================================================
FILE: site/app/_components/ButtonPicker.tsx
================================================
'use client';
import { Children, ReactNode, cloneElement } from 'react';
type ButtonPickerProps = {
type: string;
children?: ReactNode;
};
export default function ButtonPicker(props: ButtonPickerProps) {
const { type, children } = props;
return (
<>
<div className="grid grid-cols-[repeat(auto-fill,5.4rem)] sm:grid-cols-[repeat(auto-fill,max(6rem,100%/10))] gap-0.5 mb-2">
{Children.map(children, (child: any) =>
cloneElement(child, {
type,
})
)}
</div>
</>
);
}
================================================
FILE: site/app/_components/ButtonPickerOption.tsx
================================================
'use client';
import clsx from 'clsx';
import { useSearchParams, usePathname, useRouter } from 'next/navigation';
type ButtonPickerOptionProps = {
selected?: boolean;
title: string;
value: string;
className?: string;
};
type ButtonPickerOptionPropsInternal = ButtonPickerOptionProps & {
type: string;
};
export default function ButtonPickerOption(props: ButtonPickerOptionProps) {
const { type, selected, title, value, className } = props as ButtonPickerOptionPropsInternal;
const searchParams = useSearchParams();
const pathname = usePathname();
const { replace } = useRouter();
const activeType = searchParams.get(type)?.toString();
const selectMedia = (term: string) => {
const params = new URLSearchParams(searchParams);
if (term) {
params.set(type, term);
} else {
// This is a workaround for a bug where the page without a search query
// would not trigger a RSC update.
// params.delete(type);
params.set(type, term);
}
replace(`${pathname}?${params.toString()}`, { scroll: false });
};
return (
<>
<button
className={clsx(
'font-mono text-xs md:text-sm leading-mono font-normal uppercase p-0.25 aspect-video items-center justify-center bg-white border border-gray text-balance',
className,
(activeType === value || (!activeType && selected)) && 'active'
)}
onClick={() => selectMedia(value)}
>
{title}
</button>
</>
);
}
================================================
FILE: site/app/_components/Code.tsx
================================================
import { codeToHtml } from 'shiki';
import clsx from 'clsx';
import CopyButton from './CopyButton';
type CodeProps = {
code: string;
lang: string;
className?: string;
};
export default async function Code({ code, lang = 'html', className }: CodeProps) {
const html = await codeToHtml(code, {
lang,
themes: {
light: 'github-light',
dark: 'github-dark',
},
transformers: [
{
pre(node: any) {
this.addClassToHast(node, ['p-1', 'font-mono', 'text-sm', 'overflow-x-auto']);
},
},
],
});
return (
<div className={clsx('relative', className)}>
<div dangerouslySetInnerHTML={{ __html: html }} />
<CopyButton code={code} />
</div>
);
}
================================================
FILE: site/app/_components/ColorPicker.tsx
================================================
'use client';
import { useSearchParams, usePathname, useRouter } from 'next/navigation';
import clsx from 'clsx';
export default function ColorPicker({ ...props }) {
const searchParams = useSearchParams();
const pathname = usePathname();
const { replace } = useRouter();
const params = new URLSearchParams(searchParams);
let color = searchParams.get(props.id)?.toString();
const onChange = (color: string) => {
color = color.replace('#', '');
if (color) {
params.set(props.id, color);
} else {
// This is a workaround for a bug where the page without a search query
// would not trigger a RSC update.
// params.delete(props.id);
params.set(props.id, color);
}
replace(`${pathname}?${params.toString()}`, { scroll: false });
};
const resetPicker = () => {
params.delete(props.id);
replace(`${pathname}?${params.toString()}`, { scroll: false });
};
return (
<div className="relative w-auto h-auto bg-transparent">
<input
type="color"
className={clsx('w-1.5 h-1.5 border border-gray rounded-[50%]', props.className)}
{...props}
value={color ? `#${color}` : props.defaultValue}
defaultValue={color}
onChange={(e) => onChange(e.target.value)}
/>
{color && (
<button
aria-label="Clear"
className={
'w-0.75 h-0.75 text-[0.75rem] font-bold bg-white border border-gray rounded-[50%] absolute top-0 right-0 text-gray-500 hover:text-gray-800 focus:outline-none'
}
onClick={resetPicker}
>
<svg className={'w-0.5 h-0.5 scale-50 m-auto'} viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
<path
d="M4.9999 6.40005L2.0829 9.32505C1.89824 9.50838 1.66357 9.60005 1.3789 9.60005C1.09424 9.60005 0.859569 9.50838 0.674902 9.32505C0.491569 9.14172 0.399902 8.90838 0.399902 8.62505C0.399902 8.34172 0.491569 8.10838 0.674902 7.92505L3.5999 5.00005L0.674902 2.10805C0.491569 1.92338 0.399902 1.68872 0.399902 1.40405C0.399902 1.11938 0.491569 0.884715 0.674902 0.700048C0.858236 0.516715 1.09157 0.425049 1.3749 0.425049C1.65824 0.425049 1.89157 0.516715 2.0749 0.700048L4.9999 3.62505L7.8919 0.700048C8.07657 0.516715 8.31123 0.425049 8.5959 0.425049C8.88057 0.425049 9.11524 0.516715 9.2999 0.700048C9.4999 0.900048 9.5999 1.13772 9.5999 1.41305C9.5999 1.68838 9.4999 1.91738 9.2999 2.10005L6.3749 5.00005L9.2999 7.91705C9.48324 8.10172 9.5749 8.33638 9.5749 8.62105C9.5749 8.90572 9.48324 9.14038 9.2999 9.32505C9.0999 9.52505 8.86257 9.62505 8.5879 9.62505C8.31324 9.62505 8.0839 9.52505 7.8999 9.32505L4.9999 6.40005Z"
fill="black"
/>
</svg>
</button>
)}
</div>
);
}
================================================
FILE: site/app/_components/CopyButton.tsx
================================================
'use client';
import clsx from 'clsx';
import { ReactNode, useRef, useState } from 'react';
type CopyButtonProps = {
code: string;
children?: ReactNode;
};
export default function CopyButton(props: CopyButtonProps) {
const { code } = props;
const [copied, setCopied] = useState(false);
const copiedTimeoutRef = useRef<NodeJS.Timeout>();
return (
<>
<button
type="button"
className="absolute top-0 right-0 p-1 grid place-items-center"
onClick={() => {
navigator.clipboard.writeText(code);
setCopied(true);
clearTimeout(copiedTimeoutRef.current);
copiedTimeoutRef.current = setTimeout(() => setCopied(false), 1000);
}}
>
<svg
className={clsx(
'size-0.75 transition duration-short ease-in-out',
copied ? 'scale-0 opacity-0' : 'scale-100 opacity-100'
)}
style={{ gridArea: '1 / 1' }}
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth={1.5}
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 0 1-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 0 1 1.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 0 0-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 0 1-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 0 0-3.375-3.375h-1.5a1.125 1.125 0 0 1-1.125-1.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H9.75"
/>
</svg>
<svg
className={clsx(
'size-0.75 transition duration-short ease-in-out',
copied ? 'scale-100 opacity-100' : 'scale-0 opacity-0'
)}
style={{ gridArea: '1 / 1' }}
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth={1.5}
stroke="currentColor"
>
<path strokeLinecap="round" strokeLinejoin="round" d="m4.5 12.75 6 6 9-13.5" />
</svg>
</button>
</>
);
}
================================================
FILE: site/app/_components/DocsEmbed.tsx
================================================
import Code from './Code';
import mediaElements from '@/media-elements';
import { findParam } from '@/app/_utils/utils';
type DocsInstallProps = {
searchParams: Record<string, string | string[]>;
name: string;
theme: any;
};
export default async function DocsEmbed(props: DocsInstallProps) {
const { searchParams, name, theme } = props;
const media = findParam(searchParams, 'media') || 'video';
const mediaElement = mediaElements[media as keyof typeof mediaElements];
const framework = findParam(searchParams, 'framework') || 'html';
const mediaPackage =
mediaElement.package?.[framework as keyof typeof mediaElement.package] ??
(mediaElement.package?.default as string);
const customProperties: CustomProperties = {
'--media-primary-color': findParam(searchParams, 'primary-color'),
'--media-secondary-color': findParam(searchParams, 'secondary-color'),
'--media-accent-color': findParam(searchParams, 'accent-color'),
};
const embed = findParam(searchParams, 'embed') ?? 'packaged';
let blocks: any[] = [];
switch (framework) {
case 'js':
blocks = jsCode(name, mediaElement, mediaPackage, customProperties, embed, theme);
break;
case 'react':
blocks = reactCode(name, mediaElement, mediaPackage, customProperties, embed, theme);
break;
case 'vue':
blocks = vueCode(name, mediaElement, mediaPackage, customProperties, embed, theme);
break;
case 'lit':
blocks = litCode(name, mediaElement, mediaPackage, customProperties, embed, theme);
break;
case 'svelte':
blocks = svelteCode(name, mediaElement, mediaPackage, customProperties, embed, theme);
break;
default:
blocks = htmlCode(name, mediaElement, mediaPackage, customProperties, embed, theme);
}
return (
<>
<h4 className="text-lg font-medium mb-0">Embed your player</h4>
<p className="mb-1" style={{color: "#777"}}>Copy and paste the code below into a page in your project.</p>
{blocks.map((block, index) => (
<Code
key={`code-${index}`}
className="mb-1"
lang={block.lang}
code={[].concat(block.code).join('\n')}
/>
))}
</>
);
}
function htmlCode(
name: string,
mediaElement: any,
mediaPackage: string,
customProperties: CustomProperties,
embed: string,
theme: any
) {
let pkgs = [];
let templateHtml = '';
let themeTag = `media-theme-${name}`;
let themeAttrs: Record<string, any> = {};
const mediaTag: string = mediaElement.tag;
const mediaAttrs = getMediaAttributes(mediaElement);
if (mediaElement.tag.includes('-')) {
pkgs.push(mediaPackage);
}
if (embed === 'template') {
themeAttrs.template = `media-theme-${name}`;
themeTag = 'media-theme';
pkgs.push(`media-chrome`);
pkgs.push(`media-chrome/menu`);
pkgs.push(`media-chrome/media-theme-element`);
templateHtml = `\n<template id="media-theme-${name}">
${theme.templates.html.content.replace(/^(.)/gm, ' $1')}</template>\n `;
} else {
pkgs.push(`player.style/${name}`);
}
themeAttrs.style = getCustomPropertiesStyle(customProperties);
return [
{
lang: 'js',
code: [
...pkgs.map(
(pkg) => `<script type="module" src="https://cdn.jsdelivr.net/npm/${pkg}/+esm"></script>`
),
templateHtml,
`<${themeTag}${getIndentedAttributes(themeAttrs)} style="width:100%">
<${mediaTag}${getIndentedAttributes(mediaAttrs, 2)}></${mediaTag}>
</${themeTag}>`,
],
},
];
}
function jsCode(
name: string,
mediaElement: any,
mediaPackage: string,
customProperties: CustomProperties,
embed: string,
theme: any
) {
let imports = [];
let templateHtml = '';
let themeTag = `media-theme-${name}`;
let themeAttrs: Record<string, any> = {};
const mediaTag: string = mediaElement.tag;
const mediaAttrs = getMediaAttributes(mediaElement);
if (mediaElement.tag.includes('-')) {
imports.push(`import '${mediaPackage}';`);
}
if (embed === 'template') {
themeAttrs.template = `media-theme-${name}`;
themeTag = 'media-theme';
imports.push(`import 'media-chrome';`);
imports.push(`import 'media-chrome/menu';`);
imports.push(`import 'media-chrome/media-theme-element';`);
templateHtml = `<template id="media-theme-${name}">
${theme.templates.html.content.replace(/^(.)/gm, ' $1')} </template>\n\n `;
} else {
imports.push(`import 'player.style/${name}';`);
}
themeAttrs.style = getCustomPropertiesStyle(customProperties);
return [
{
lang: 'js',
code: [
...imports,
'',
`const template = document.createElement('template');
template.innerHTML = \`
${templateHtml}<${themeTag}${getIndentedAttributes(themeAttrs, 2)} style="width: 100%">
<${mediaTag}${getIndentedAttributes(mediaAttrs, 4)}></${mediaTag}>
</${themeTag}>\`;
document.body.append(template.content);`,
],
},
];
}
function reactCode(
name: string,
mediaElement: any,
mediaPackage: string,
customProperties: CustomProperties,
embed: string,
theme: any
) {
let imports = [];
let templateHtml = '';
let themeTag = `media-theme-${name}`;
let themeAttrs = '';
let mediaTag: string = mediaElement.tag;
const mediaAttrs = attrsToJSXProps(getMediaAttributes(mediaElement));
if (mediaElement.tag.includes('-')) {
mediaTag = pascalCase(mediaElement.tag);
imports.push(`import ${mediaTag} from '${mediaPackage}';`);
}
if (embed === 'template') {
themeAttrs += `\n template="media-theme-${name}"`;
themeTag = 'media-theme';
imports.push(`import 'media-chrome/react';`);
imports.push(`import 'media-chrome/react/menu';`);
imports.push(`import { MediaTheme } from 'media-chrome/react/media-theme';`);
templateHtml = `<template
id="media-theme-${name}"
dangerouslySetInnerHTML={{ __html: \`
${theme.templates.html.content.trim().replace(/^(.)/gm, ' $1')}\` }}
/>\n\n `;
}
themeTag = pascalCase(themeTag);
if (embed !== 'template') {
imports.push(`import ${themeTag} from 'player.style/${name}/react';`);
}
let customPropertiesStyleReact = '';
let filteredCustomProperties = Object.entries(customProperties).filter(([_, value]) =>
Boolean(value)
);
filteredCustomProperties.forEach(([property, value], index) => {
if (value) {
const trailingComma = index < filteredCustomProperties.length - 1 ? ', ' : ' ';
customPropertiesStyleReact += `"${property}": "#${value}"${trailingComma}`;
}
});
if (customPropertiesStyleReact.length) {
themeAttrs += `\n style={{ ${customPropertiesStyleReact.trim()} }}`;
}
if (themeAttrs.length) themeAttrs += '\n ';
return [
{
lang: 'jsx',
code: [
...imports,
'',
`export default function Page() {
return (
<>
${templateHtml}<${themeTag}${themeAttrs} style={{width: "100%"}}>
<${mediaTag}${getIndentedAttributes(mediaAttrs, 8)}></${mediaTag}>
</${themeTag}>
</>
);
}`,
],
},
];
}
function vueCode(
name: string,
mediaElement: any,
mediaPackage: string,
customProperties: CustomProperties,
embed: string,
theme: any
) {
let imports = [];
let templateHtml = '';
let themeTag = `media-theme-${name}`;
let themeAttrs: Record<string, any> = {};
const mediaTag: string = mediaElement.tag;
const mediaAttrs = getMediaAttributes(mediaElement);
if (mediaElement.tag.includes('-')) {
imports.push(`import '${mediaPackage}';`);
}
if (embed === 'template') {
themeAttrs.id = `media-theme-${name}`;
themeTag = 'media-theme';
imports.push(`import { onMounted } from 'vue';`);
imports.push(`import 'media-chrome';`);
imports.push(`import 'media-chrome/menu';`);
imports.push(`import 'media-chrome/media-theme-element';`);
templateHtml = `\n
onMounted(() => {
const template = document.createElement('template');
template.innerHTML = \`
${theme.templates.html.content.replace(/^(.)/gm, ' $1')} \`;
document.querySelector('#media-theme-${name}').template = template;
});`;
} else {
imports.push(`import 'player.style/${name}';`);
}
themeAttrs.style = getCustomPropertiesStyle(customProperties);
return [
{
lang: 'vue',
code: [
`<script setup>
${imports.join('\n').replace(/^(.)/gm, ' $1')}${templateHtml}
</script>`,
'',
`<template>
<${themeTag}${getIndentedAttributes(themeAttrs, 2)} :style="{ width: '100%' }">
<${mediaTag}${getIndentedAttributes(mediaAttrs, 4)}></${mediaTag}>
</${themeTag}>
</template>`,
],
},
];
}
function litCode(
name: string,
mediaElement: any,
mediaPackage: string,
customProperties: CustomProperties,
embed: string,
theme: any
) {
let imports = [];
let templateHtml = '';
let themeTag = `media-theme-${name}`;
let themeAttrs: Record<string, any> = {};
const mediaTag: string = mediaElement.tag;
const mediaAttrs = getMediaAttributes(mediaElement);
if (mediaElement.tag.includes('-')) {
imports.push(`import '${mediaPackage}';`);
}
imports.push(`import { LitElement, html } from 'lit';`);
if (embed === 'template') {
themeAttrs.template = `media-theme-${name}`;
themeTag = 'media-theme';
imports.push(`import 'media-chrome';`);
imports.push(`import 'media-chrome/menu';`);
imports.push(`import 'media-chrome/media-theme-element';`);
templateHtml = `<template id="media-theme-${name}">
${theme.templates.html.content.replace(/^(.)/gm, ' $1')} </template>\n\n `;
} else {
imports.push(`import 'player.style/${name}';`);
}
themeAttrs.style = `width: 100%; height: 100%; ${getCustomPropertiesStyle(customProperties) ?? ''}`;
return [
{
lang: 'js',
code: [
...imports,
'',
`class MyPage extends LitElement {
render() {
return html\`
${templateHtml}<${themeTag}${getIndentedAttributes(themeAttrs, 6)}>
<${mediaTag}${getIndentedAttributes(mediaAttrs, 8)}></${mediaTag}>
</${themeTag}>\`;
}
}
customElements.define('my-page', MyPage);`,
],
},
];
}
function svelteCode(
name: string,
mediaElement: any,
mediaPackage: string,
customProperties: CustomProperties,
embed: string,
theme: any
) {
let imports = [];
let templateHtml = '';
let themeTag = `media-theme-${name}`;
let themeAttrs: Record<string, any> = {};
const mediaTag: string = mediaElement.tag;
const mediaAttrs = getMediaAttributes(mediaElement);
if (mediaElement.tag.includes('-')) {
imports.push(`import '${mediaPackage}';`);
}
if (embed === 'template') {
themeAttrs.id = `media-theme-${name}`;
themeTag = 'media-theme';
imports.push(`import { onMount } from 'svelte';`);
imports.push(`import 'media-chrome';`);
imports.push(`import 'media-chrome/menu';`);
imports.push(`import 'media-chrome/media-theme-element';`);
templateHtml = `\n
onMount(() => {
const template = document.createElement('template');
template.innerHTML = \`
${theme.templates.html.content.replace(/^(.)/gm, ' $1')} \`;
document.querySelector('#media-theme-${name}').template = template;
});`;
} else {
imports.push(`import 'player.style/${name}';`);
}
themeAttrs.style = getCustomPropertiesStyle(customProperties);
return [
{
lang: 'svelte',
code: [
`<script>
${imports.join('\n').replace(/^(.)/gm, ' $1')}${templateHtml}
</script>`,
'',
`<${themeTag}${getIndentedAttributes(themeAttrs)} style="width: 100%;">
<${mediaTag}${getIndentedAttributes(mediaAttrs, 2)}></${mediaTag}>
</${themeTag}>`,
],
},
];
}
function pascalCase(str: string) {
return `-${str}`.replace(/-(\w)/g, (g) => g[1].toUpperCase());
}
function camelCase(str: string) {
return `${str}`.replace(/-(\w)/g, (g) => g[1].toUpperCase());
}
function getMediaAttributes(mediaElement: any) {
let mediaAttrs: Record<string, any> = {
slot: 'media',
};
if (mediaElement.tag === 'mux-video') {
mediaAttrs['playback-id'] = mediaElement.playbackId;
} else {
mediaAttrs.src = mediaElement.src;
}
mediaAttrs.playsinline = '';
mediaAttrs.crossorigin = 'anonymous';
return mediaAttrs;
}
const attrsToJSXPropsMap: Record<string, string> = {
'playsinline': 'playsInline',
'crossorigin': 'crossOrigin',
};
function attrsToJSXProps(attrs: Record<string, any>) {
let props: Record<string, any> = {};
for (const [attr, value] of Object.entries(attrs)) {
delete attrs[attr];
const prop = attrsToJSXPropsMap[attr] ?? camelCase(attr);
props[prop] = value;
}
return props;
}
type CustomProperties = {
'--media-primary-color'?: string;
'--media-secondary-color'?: string;
'--media-accent-color'?: string;
};
function getCustomPropertiesStyle(customProperties: CustomProperties) {
let customPropertiesStyle = '';
Object.entries(customProperties).forEach(([property, value]) => {
if (value) {
customPropertiesStyle += `${property}: #${value}; `;
}
});
if (customPropertiesStyle) {
return customPropertiesStyle;
}
}
function getIndentedAttributes(attrs: Record<string, any>, indent = 0) {
let output = '';
const attrSpaces = ' '.repeat(indent + 2);
const nextLineSpaces = ' '.repeat(indent);
for (const [attr, value] of Object.entries(attrs)) {
if (value != null) {
if (value.trim()) {
output += `\n${attrSpaces}${attr}="${value.trim()}"`;
} else {
output += `\n${attrSpaces}${attr}`;
}
}
}
return output ? `${output}\n${nextLineSpaces}` : '';
}
================================================
FILE: site/app/_components/DocsInstall.tsx
================================================
import Code from './Code';
import mediaElements from '@/media-elements';
import { findParam } from '@/app/_utils/utils';
type DocsInstallProps = {
searchParams: Record<string, string | string[]>;
};
export default async function DocsInstall({ searchParams }: DocsInstallProps) {
const media = findParam(searchParams, 'media') || 'video';
const mediaElement = mediaElements[media as keyof typeof mediaElements];
const framework = findParam(searchParams, 'framework') || 'html';
if (framework === 'html') return null;
const embed = findParam(searchParams, 'embed') ?? 'packaged';
let mediaPackage =
mediaElement.package?.[framework as keyof typeof mediaElement.package] ??
(mediaElement.package?.default as string);
if (mediaPackage && !mediaPackage.startsWith('@')) {
mediaPackage = mediaPackage.split('/')[0];
}
const installs = [embed === 'template' ? 'media-chrome' : 'player.style'];
if (mediaPackage) {
installs.unshift(mediaPackage);
}
return (
<>
<h4 className="text-lg font-medium mb-1">Install dependencies</h4>
<div className="mb-1">
<Code lang="bash" code={installs.map((item) => `npm install ${item}`).join('\n')} />
</div>
</>
);
}
================================================
FILE: site/app/_components/Footer.tsx
================================================
export default function Footer() {
return (
<>
<div className="overflow-hidden my-1px">
<div className="relative border-y -my-1px grid grid-cols-xs sm:grid-cols-sm lg:grid-cols-lg xl:grid-cols-xl bg-putty-light border-ctx-gray text-black set-bg-ctx-putty-light set-border-ctx-gray">
<div className="col-start-2 col-end-3 border-x border-ctx-gray">
<div className="-m-0.5px grid grid-cols-1 px-1 py-2 text-md text-gray-dark">
© {new Date().getFullYear()} player.style
</div>
</div>
</div>
</div>
</>
);
}
================================================
FILE: site/app/_components/Grid.tsx
================================================
import { ReactNode } from 'react';
import clsx from 'clsx';
type GridProps = {
className?: string;
withPadding?: boolean;
children?: ReactNode;
};
export default function Grid({ className, withPadding = true, children }: GridProps) {
return (
<>
<div
className={clsx(
'relative border-y -my-1px grid grid-cols-xs sm:grid-cols-sm lg:grid-cols-lg xl:grid-cols-xl bg-putty-light border-ctx-gray text-black set-bg-ctx-putty-light set-border-ctx-gray',
className
)}
>
<div className="col-start-2 col-end-3 border-x border-ctx-gray">
<div className={clsx('gap-2 lg:gap-3 items-center', withPadding && 'py-2 px-1 md:p-2 lg:py-3 lg:px-3')}>
<div className="block border-ctx-gray bg-putty-light [&>*]:set-border-ctx-gray [&>*]:set-bg-ctx-putty-light text-black">
{children}
</div>
</div>
</div>
</div>
</>
);
}
================================================
FILE: site/app/_components/Hero.tsx
================================================
import Grid from './Grid';
import clsx from 'clsx';
type HeroProps = {
title: string;
children: React.ReactNode;
className?: string;
};
export default function Hero(props: HeroProps) {
return (
<>
<Grid className={clsx('text-center', props.className)}>
<h1 className="font-display text-2xl sm:text-4xl md:text-5xl lg:text-6xl tracking-wide leading-heading font-normal uppercase whitespace-pre-line mx-auto max-w-32 mb-1">
{props.title}
</h1>
<div>
<p className="font-body text-md tracking-wide leading-normal font-normal normal-case max-w-30 mx-auto">
{props.children}
</p>
</div>
</Grid>
</>
);
}
================================================
FILE: site/app/_components/Link/Link.client.tsx
================================================
'use client';
import NextLink from 'next/link';
import { useSearchParams } from 'next/navigation';
import { ParsedUrlQueryInput } from 'querystring';
import { ComponentPropsWithoutRef } from 'react';
type LinkProps = ComponentPropsWithoutRef<typeof NextLink>;
export default function ClientLink({ href, ...rest }: LinkProps) {
const searchParams = useSearchParams();
let _href: LinkProps['href'] =
typeof href === 'string'
? {
pathname: href,
}
: href;
// if it's a local link, persist searchParams colors
const isLocalLink = _href.pathname?.startsWith('/');
if (isLocalLink && !_href.query) {
const query: ParsedUrlQueryInput = {};
const primaryColor = searchParams.get('primary-color');
if (primaryColor) query['primary-color'] = primaryColor;
const secondaryColor = searchParams.get('secondary-color');
if (secondaryColor) query['secondary-color'] = secondaryColor;
const accentColor = searchParams.get('accent-color');
if (accentColor) query['accent-color'] = accentColor;
_href.query = query;
}
return <NextLink {...rest} href={_href} />;
}
================================================
FILE: site/app/_components/Link/Link.server.tsx
================================================
import NextLink from 'next/link';
import ClientLink from './Link.client';
import { ComponentPropsWithoutRef, Suspense } from 'react';
type LinkProps = ComponentPropsWithoutRef<typeof NextLink>;
// useSearchParams requires Suspense.
// In SSR it renders fallback.
// On hydration, ClientLink comes in.
export default function Link(props: LinkProps) {
return (
<Suspense fallback={<NextLink {...props} />}>
<ClientLink {...props} />
</Suspense>
);
}
================================================
FILE: site/app/_components/Link/index.ts
================================================
export { default } from './Link.server';
================================================
FILE: site/app/_components/LinkWithUnderline.tsx
================================================
import { ComponentPropsWithoutRef } from 'react';
import Link from './Link';
import clsx from 'clsx';
export default function LinkWithUnderline({ className, ...rest }: ComponentPropsWithoutRef<typeof Link>) {
return (
<Link
className={clsx(
'decoration-link underline underline-offset-normal hover:no-underline focus-visible:no-underline',
className
)}
{...rest}
/>
);
}
================================================
FILE: site/app/_components/MediaTheme.tsx
================================================
'use client';
import { ReactNode } from 'react';
import clsx from 'clsx';
import 'media-chrome';
import { useSearchParams } from 'next/navigation';
import { MediaTheme } from 'media-chrome/dist/react/media-theme.js';
import 'media-chrome/dist/menu/index.js';
type MediaThemeProps = {
name: string;
theme: any;
children?: ReactNode;
className?: string;
defaultDuration?: number;
mediaTitle?: string;
mediaByline?: string;
};
export default function MediaThemeComponent(props: MediaThemeProps) {
const { name, theme, children, className, defaultDuration, ...rest } = props;
const searchParams = useSearchParams();
const accentColor = searchParams.get('accent-color')
? `#${searchParams.get('accent-color')}`
: theme.accentColor;
const primaryColor = searchParams.get('primary-color')
? `#${searchParams.get('primary-color')}`
: theme.primaryColor;
const secondaryColor = searchParams.get('secondary-color')
? `#${searchParams.get('secondary-color')}`
: theme.secondaryColor;
return (
<>
<template
id={`media-theme-${name}`}
dangerouslySetInnerHTML={{ __html: `${theme.templates.html.content}` }}
/>
<MediaTheme
className={clsx('block w-full h-full', className, theme.themeProps?.className)}
key={theme.templates.html.content}
template={`media-theme-${name}`}
defaultDuration={defaultDuration}
style={{
'--media-accent-color': accentColor,
'--media-primary-color': primaryColor,
'--media-secondary-color': secondaryColor,
}}
{...theme.templates.html.props}
{...rest}
>
{children}
</MediaTheme>
</>
);
}
================================================
FILE: site/app/_components/MobileNav.tsx
================================================
'use client';
import clsx from 'clsx';
import { useState } from 'react';
import { NavLink } from './NavLink';
export default function MobileNav() {
const [open, setOpen] = useState(false);
return (
<div data-state="closed" className="h-full block lg:hidden">
<button
className={clsx('relative z-20 px-0.75 md:px-1 h-full group transition-colors ease-in-out-energetic duration-medium', open && 'bg-charcoal text-white')}
type="button"
aria-expanded={open}
data-state={open ? 'open' : 'closed'}
onClick={() => setOpen(!open)}
>
<span className="sr-only">Toggle navigation menu</span>
<svg
role="img"
width="28"
height="28"
viewBox="0 0 28 28"
fill="none"
xmlns="http://www.w3.org/2000/svg"
data-state={open ? 'open' : 'closed'}
className="group/x transition-transform transform-gpu origin-center ease-in-out-energetic duration-medium group-active:-rotate-[10deg] data-[state=closed]:group-active:rotate-[10deg]"
>
<title>X</title>
<path
d="M5 5L23 23"
className="stroke-current transition-transform transform-gpu origin-center ease-in-out-energetic duration-medium group-data-[state=closed]/x:-translate-y-[15%] group-data-[state=closed]/x:rotate-[135deg]"
vectorE
gitextract_oirhxjsl/ ├── .github/ │ ├── dependabot.yml │ ├── release-please/ │ │ ├── .release-please-manifest.json │ │ └── release-please-config.json │ └── workflows/ │ ├── cd.yml │ └── ci.yml ├── .gitignore ├── CHANGELOG.md ├── LICENSE ├── README.md ├── examples/ │ ├── remix/ │ │ ├── .eslintrc.cjs │ │ ├── .gitignore │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── app/ │ │ │ ├── entry.client.tsx │ │ │ ├── entry.server.tsx │ │ │ ├── root.tsx │ │ │ ├── routes/ │ │ │ │ └── _index.tsx │ │ │ └── tailwind.css │ │ ├── package.json │ │ ├── postcss.config.js │ │ ├── tailwind.config.ts │ │ ├── tsconfig.json │ │ └── vite.config.ts │ └── vanilla/ │ ├── CHANGELOG.md │ ├── index.html │ ├── package.json │ └── script.js ├── index.js ├── package.json ├── scripts/ │ ├── build-theme/ │ │ ├── CHANGELOG.md │ │ ├── build.js │ │ ├── package.json │ │ └── templates/ │ │ ├── media-theme.d.ts │ │ ├── media-theme.js │ │ ├── react.d.ts │ │ └── react.js │ └── publish-packages/ │ ├── package.json │ └── publish-packages.js ├── site/ │ ├── .eslintrc.json │ ├── .gitignore │ ├── CHANGELOG.md │ ├── README.md │ ├── app/ │ │ ├── (home)/ │ │ │ ├── page.tsx │ │ │ └── page.tsx.orig │ │ ├── _components/ │ │ │ ├── AnalyticsProvider.tsx │ │ │ ├── AuthorLink.tsx │ │ │ ├── ButtonPicker.tsx │ │ │ ├── ButtonPickerOption.tsx │ │ │ ├── Code.tsx │ │ │ ├── ColorPicker.tsx │ │ │ ├── CopyButton.tsx │ │ │ ├── DocsEmbed.tsx │ │ │ ├── DocsInstall.tsx │ │ │ ├── Footer.tsx │ │ │ ├── Grid.tsx │ │ │ ├── Hero.tsx │ │ │ ├── Link/ │ │ │ │ ├── Link.client.tsx │ │ │ │ ├── Link.server.tsx │ │ │ │ └── index.ts │ │ │ ├── LinkWithUnderline.tsx │ │ │ ├── MediaTheme.tsx │ │ │ ├── MobileNav.tsx │ │ │ ├── MuxLogo.tsx │ │ │ ├── NavBar.tsx │ │ │ ├── NavLink.tsx │ │ │ ├── PlayerHero.tsx │ │ │ ├── PlayerStyleLogo.tsx │ │ │ ├── PostHogPageView.tsx │ │ │ ├── Search.tsx │ │ │ ├── TagCheckbox.tsx │ │ │ ├── ThemeColorPopover.tsx │ │ │ ├── ThemePreview.tsx │ │ │ └── Video.tsx │ │ ├── _utils/ │ │ │ ├── content.ts │ │ │ └── utils.ts │ │ ├── about/ │ │ │ └── page.tsx │ │ ├── demo/ │ │ │ └── page.tsx │ │ ├── features/ │ │ │ └── [slug]/ │ │ │ └── page.tsx │ │ ├── layout.tsx │ │ ├── players/ │ │ │ └── [slug]/ │ │ │ └── page.tsx │ │ ├── styles/ │ │ │ ├── fonts/ │ │ │ │ ├── Aeonik/ │ │ │ │ │ ├── Aeonik-Bold.otf │ │ │ │ │ └── Aeonik-Regular.otf │ │ │ │ └── index.ts │ │ │ └── globals.css │ │ └── themes/ │ │ └── [slug]/ │ │ └── page.tsx │ ├── content-collections.ts │ ├── features/ │ │ ├── airplay.md │ │ ├── audio-tracks.md │ │ ├── google-cast.md │ │ ├── timeline-chapters.md │ │ └── timeline-thumbnails.md │ ├── frameworks/ │ │ ├── html.md │ │ ├── js.md │ │ ├── lit.md │ │ ├── react.md │ │ ├── svelte.md │ │ └── vue.md │ ├── media-assets.ts │ ├── media-elements.ts │ ├── next.config.mjs │ ├── package.json │ ├── players/ │ │ ├── cloudflare.md │ │ ├── dash.md │ │ ├── hls.md │ │ ├── jwplayer.md │ │ ├── mux.md │ │ ├── vimeo.md │ │ ├── wistia.md │ │ └── youtube.md │ ├── postcss.config.mjs │ ├── public/ │ │ └── landscape-test-chapters.vtt │ ├── tailwind.config.js │ ├── themes/ │ │ ├── demuxed-2022.md │ │ ├── halloween.md │ │ ├── instaplay.md │ │ ├── microvideo.md │ │ ├── minimal.md │ │ ├── notflix.md │ │ ├── reelplay.md │ │ ├── sutro-audio.md │ │ ├── sutro.md │ │ ├── tailwind-audio.md │ │ ├── vimeonova.md │ │ ├── winamp.md │ │ ├── x-mas.md │ │ └── yt.md │ └── tsconfig.json ├── themes/ │ ├── demuxed-2022/ │ │ ├── CHANGELOG.md │ │ ├── package.json │ │ └── template.html │ ├── halloween/ │ │ ├── CHANGELOG.md │ │ ├── package.json │ │ └── template.html │ ├── instaplay/ │ │ ├── CHANGELOG.md │ │ ├── package.json │ │ └── template.html │ ├── microvideo/ │ │ ├── CHANGELOG.md │ │ ├── package.json │ │ └── template.html │ ├── minimal/ │ │ ├── CHANGELOG.md │ │ ├── package.json │ │ └── template.html │ ├── notflix/ │ │ ├── CHANGELOG.md │ │ ├── package.json │ │ └── template.html │ ├── reelplay/ │ │ ├── CHANGELOG.md │ │ ├── assets/ │ │ │ └── fonts.css │ │ ├── package.json │ │ └── template.html │ ├── sutro/ │ │ ├── CHANGELOG.md │ │ ├── package.json │ │ └── template.html │ ├── sutro-audio/ │ │ ├── CHANGELOG.md │ │ ├── package.json │ │ └── template.html │ ├── tailwind-audio/ │ │ ├── CHANGELOG.md │ │ ├── package.json │ │ ├── styles.css │ │ ├── tailwind.config.js │ │ └── template.html │ ├── vimeonova/ │ │ ├── CHANGELOG.md │ │ ├── package.json │ │ └── template.html │ ├── winamp/ │ │ ├── CHANGELOG.md │ │ ├── assets/ │ │ │ └── fonts.css │ │ ├── package.json │ │ └── template.html │ ├── x-mas/ │ │ ├── CHANGELOG.md │ │ ├── package.json │ │ └── template.html │ └── yt/ │ ├── CHANGELOG.md │ ├── package.json │ └── template.html └── turbo.json
SYMBOL INDEX (106 symbols across 46 files)
FILE: examples/remix/app/entry.server.tsx
constant ABORT_DELAY (line 15) | const ABORT_DELAY = 5_000;
function handleRequest (line 17) | function handleRequest(
function handleBotRequest (line 42) | function handleBotRequest(
function handleBrowserRequest (line 92) | function handleBrowserRequest(
FILE: examples/remix/app/root.tsx
function Layout (line 25) | function Layout({ children }: { children: React.ReactNode }) {
function App (line 43) | function App() {
FILE: examples/remix/app/routes/_index.tsx
constant PLAYBACK_ID (line 5) | const PLAYBACK_ID = "4XN6dqxPTZJPU021TuSGIHPaOuKQkrxHF";
function Index (line 11) | function Index() {
FILE: examples/remix/vite.config.ts
type Future (line 6) | interface Future {
FILE: scripts/build-theme/build.js
function cliBuild (line 16) | async function cliBuild() {
function build (line 26) | async function build() {
function populate (line 99) | function populate(template, themeName) {
function pascalCase (line 106) | function pascalCase(str) {
function base64 (line 110) | async function base64(imageUrl) {
FILE: scripts/build-theme/templates/media-theme.d.ts
type HTMLElementTagNameMap (line 4) | interface HTMLElementTagNameMap {
class ___ClassName___ (line 9) | class ___ClassName___ extends MediaThemeElement {
FILE: scripts/build-theme/templates/media-theme.js
class ___ClassName___ (line 22) | class ___ClassName___ extends MediaThemeElement {
FILE: scripts/publish-packages/publish-packages.js
function cliPublish (line 17) | async function cliPublish() {
function publish (line 27) | async function publish() {
FILE: site/app/(home)/page.tsx
type HomeProps (line 34) | type HomeProps = {
function Home (line 45) | async function Home({ searchParams }: HomeProps) {
FILE: site/app/_components/AnalyticsProvider.tsx
function AnalyticsProvider (line 15) | function AnalyticsProvider({ children }: { children: React.ReactNode }) {
FILE: site/app/_components/AuthorLink.tsx
type AuthorImageProps (line 4) | interface AuthorImageProps {
type AuthorLinkProps (line 17) | interface AuthorLinkProps {
FILE: site/app/_components/ButtonPicker.tsx
type ButtonPickerProps (line 5) | type ButtonPickerProps = {
function ButtonPicker (line 10) | function ButtonPicker(props: ButtonPickerProps) {
FILE: site/app/_components/ButtonPickerOption.tsx
type ButtonPickerOptionProps (line 6) | type ButtonPickerOptionProps = {
type ButtonPickerOptionPropsInternal (line 13) | type ButtonPickerOptionPropsInternal = ButtonPickerOptionProps & {
function ButtonPickerOption (line 17) | function ButtonPickerOption(props: ButtonPickerOptionProps) {
FILE: site/app/_components/Code.tsx
type CodeProps (line 5) | type CodeProps = {
function Code (line 11) | async function Code({ code, lang = 'html', className }: CodeProps) {
FILE: site/app/_components/ColorPicker.tsx
function ColorPicker (line 6) | function ColorPicker({ ...props }) {
FILE: site/app/_components/CopyButton.tsx
type CopyButtonProps (line 6) | type CopyButtonProps = {
function CopyButton (line 11) | function CopyButton(props: CopyButtonProps) {
FILE: site/app/_components/DocsEmbed.tsx
type DocsInstallProps (line 5) | type DocsInstallProps = {
function DocsEmbed (line 11) | async function DocsEmbed(props: DocsInstallProps) {
function htmlCode (line 68) | function htmlCode(
function jsCode (line 121) | function jsCode(
function reactCode (line 176) | function reactCode(
function vueCode (line 255) | function vueCode(
function litCode (line 317) | function litCode(
function svelteCode (line 377) | function svelteCode(
function pascalCase (line 437) | function pascalCase(str: string) {
function camelCase (line 441) | function camelCase(str: string) {
function getMediaAttributes (line 445) | function getMediaAttributes(mediaElement: any) {
function attrsToJSXProps (line 467) | function attrsToJSXProps(attrs: Record<string, any>) {
type CustomProperties (line 477) | type CustomProperties = {
function getCustomPropertiesStyle (line 483) | function getCustomPropertiesStyle(customProperties: CustomProperties) {
function getIndentedAttributes (line 495) | function getIndentedAttributes(attrs: Record<string, any>, indent = 0) {
FILE: site/app/_components/DocsInstall.tsx
type DocsInstallProps (line 5) | type DocsInstallProps = {
function DocsInstall (line 9) | async function DocsInstall({ searchParams }: DocsInstallProps) {
FILE: site/app/_components/Footer.tsx
function Footer (line 1) | function Footer() {
FILE: site/app/_components/Grid.tsx
type GridProps (line 4) | type GridProps = {
function Grid (line 10) | function Grid({ className, withPadding = true, children }: GridProps) {
FILE: site/app/_components/Hero.tsx
type HeroProps (line 4) | type HeroProps = {
function Hero (line 10) | function Hero(props: HeroProps) {
FILE: site/app/_components/Link/Link.client.tsx
type LinkProps (line 8) | type LinkProps = ComponentPropsWithoutRef<typeof NextLink>;
function ClientLink (line 9) | function ClientLink({ href, ...rest }: LinkProps) {
FILE: site/app/_components/Link/Link.server.tsx
type LinkProps (line 5) | type LinkProps = ComponentPropsWithoutRef<typeof NextLink>;
function Link (line 10) | function Link(props: LinkProps) {
FILE: site/app/_components/LinkWithUnderline.tsx
function LinkWithUnderline (line 5) | function LinkWithUnderline({ className, ...rest }: ComponentPropsWithout...
FILE: site/app/_components/MediaTheme.tsx
type MediaThemeProps (line 10) | type MediaThemeProps = {
function MediaThemeComponent (line 20) | function MediaThemeComponent(props: MediaThemeProps) {
FILE: site/app/_components/MobileNav.tsx
function MobileNav (line 7) | function MobileNav() {
FILE: site/app/_components/MuxLogo.tsx
type MuxLogoProps (line 1) | type MuxLogoProps = {
function MuxLogo (line 5) | function MuxLogo({ className }: MuxLogoProps) {
FILE: site/app/_components/NavBar.tsx
function NavBar (line 7) | function NavBar() {
FILE: site/app/_components/NavLink.tsx
type NavLinkProps (line 7) | type NavLinkProps = {
FILE: site/app/_components/PlayerHero.tsx
type PlayerHeroProps (line 10) | type PlayerHeroProps = {
constant MIN_PLAYER_WIDTH (line 15) | const MIN_PLAYER_WIDTH = 300;
constant DEFAULT_ASSET (line 16) | const DEFAULT_ASSET = 'landscape';
function PlayerHero (line 18) | function PlayerHero(props: PlayerHeroProps) {
FILE: site/app/_components/PlayerStyleLogo.tsx
type PlayerStyleLogoProps (line 1) | type PlayerStyleLogoProps = {
function PlayerStyleLogo (line 5) | function PlayerStyleLogo({ className }: PlayerStyleLogoProps) {
FILE: site/app/_components/PostHogPageView.tsx
function PostHogPageView (line 7) | function PostHogPageView(): null {
FILE: site/app/_components/Search.tsx
function Search (line 8) | function Search() {
FILE: site/app/_components/TagCheckbox.tsx
type TagCheckboxProps (line 5) | type TagCheckboxProps = {
function TagCheckbox (line 10) | function TagCheckbox({ name, group }: TagCheckboxProps) {
FILE: site/app/_components/ThemeColorPopover.tsx
function InfoIcon (line 5) | function InfoIcon() {
function ThemeColorPopover (line 25) | function ThemeColorPopover() {
FILE: site/app/_components/ThemePreview.tsx
type ThemePreviewProps (line 11) | type ThemePreviewProps = {
constant DEFAULT_ASSET (line 18) | const DEFAULT_ASSET = 'landscape';
function ThemePreview (line 20) | function ThemePreview(props: ThemePreviewProps) {
FILE: site/app/_components/Video.tsx
type IntrinsicElements (line 8) | interface IntrinsicElements {
type VideoProps (line 14) | type VideoProps = DetailedHTMLProps<VideoHTMLAttributes<HTMLVideoElement...
function Video (line 20) | function Video({ className, ...props }: VideoProps) {
FILE: site/app/_utils/content.ts
type Collections (line 15) | type Collections = typeof allCollections;
type CollectionName (line 16) | type CollectionName = keyof Collections;
type CollectionOptions (line 17) | type CollectionOptions = {
function getCollection (line 22) | async function getCollection<K extends CollectionName>(
function getEntry (line 30) | async function getEntry<K extends CollectionName>(collection: K, slug: s...
function getCollectionTagGroups (line 34) | async function getCollectionTagGroups(name: CollectionName) {
function includesIgnoreCase (line 42) | function includesIgnoreCase(array: string[], value: string) {
function filterCollection (line 46) | async function filterCollection<T extends { _meta: Meta }>(
FILE: site/app/_utils/utils.ts
function findParam (line 1) | function findParam(searchParams: Record<string, string | string[]>, name...
FILE: site/app/about/page.tsx
function About (line 16) | function About() {
FILE: site/app/demo/page.tsx
function Demo (line 5) | function Demo() {
FILE: site/app/features/[slug]/page.tsx
function generateMetadata (line 5) | async function generateMetadata(props: any): Promise<Metadata> {
function Page (line 14) | async function Page(props: any) {
FILE: site/app/layout.tsx
function RootLayout (line 21) | function RootLayout({
FILE: site/app/players/[slug]/page.tsx
function generateMetadata (line 5) | async function generateMetadata(props: any): Promise<Metadata> {
function Page (line 14) | async function Page(props: any) {
FILE: site/app/themes/[slug]/page.tsx
type ThemePageProps (line 15) | type ThemePageProps = {
function generateMetadata (line 22) | async function generateMetadata(props: ThemePageProps): Promise<Metadata> {
function Page (line 48) | async function Page(props: ThemePageProps) {
FILE: site/content-collections.ts
type Template (line 5) | type Template = {
Condensed preview — 174 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (804K chars).
[
{
"path": ".github/dependabot.yml",
"chars": 323,
"preview": "version: 2\nupdates:\n - package-ecosystem: 'npm'\n directories:\n - '/'\n schedule:\n interval: 'daily'\n "
},
{
"path": ".github/release-please/.release-please-manifest.json",
"chars": 560,
"preview": "{\n \".\": \"0.3.4\",\n \"examples/vanilla\": \"1.11.15\",\n \"examples/remix\": \"1.0.6\",\n \"scripts/build-theme\": \"0.1.1\",\n \"sit"
},
{
"path": ".github/release-please/release-please-config.json",
"chars": 774,
"preview": "{\n \"bump-minor-pre-major\": true,\n \"bump-patch-for-minor-pre-major\": false,\n \"tag-separator\": \"@\",\n \"include-componen"
},
{
"path": ".github/workflows/cd.yml",
"chars": 1682,
"preview": "name: CD\n\nconcurrency: production\n\non:\n push:\n branches:\n - main\n\njobs:\n lint:\n runs-on: ubuntu-latest\n "
},
{
"path": ".github/workflows/ci.yml",
"chars": 505,
"preview": "name: CI\n\non: [push, pull_request]\n\njobs:\n lint:\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@v"
},
{
"path": ".gitignore",
"chars": 447,
"preview": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pn"
},
{
"path": "CHANGELOG.md",
"chars": 35122,
"preview": "# Changelog\n\n## [0.3.4](https://github.com/muxinc/player.style/compare/player.style@0.3.3...player.style@0.3.4) (2026-04"
},
{
"path": "LICENSE",
"chars": 1053,
"preview": "Copyright (c) 2024 Mux, Inc.\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this softw"
},
{
"path": "README.md",
"chars": 1264,
"preview": "# player.style\n\nVideo and audio player themes built with [Media Chrome](https://media-chrome.org), for every web player "
},
{
"path": "examples/remix/.eslintrc.cjs",
"chars": 1887,
"preview": "/**\n * This is intended to be a basic starting point for linting in your app.\n * It relies on recommended configs out of"
},
{
"path": "examples/remix/.gitignore",
"chars": 34,
"preview": "node_modules\n\n/.cache\n/build\n.env\n"
},
{
"path": "examples/remix/CHANGELOG.md",
"chars": 2198,
"preview": "# Changelog\n\n## [1.0.6](https://github.com/muxinc/player.style/compare/test-mux-player-style-remix@1.0.5...test-mux-play"
},
{
"path": "examples/remix/README.md",
"chars": 798,
"preview": "# Welcome to Remix!\n\n- 📖 [Remix docs](https://remix.run/docs)\n\n## Development\n\nRun the dev server:\n\n```shellscript\nnpm r"
},
{
"path": "examples/remix/app/entry.client.tsx",
"chars": 559,
"preview": "/**\n * By default, Remix will handle hydrating your app on the client for you.\n * You are free to delete this file if yo"
},
{
"path": "examples/remix/app/entry.server.tsx",
"chars": 3988,
"preview": "/**\n * By default, Remix will handle generating the HTTP Response for you.\n * You are free to delete this file if you'd "
},
{
"path": "examples/remix/app/root.tsx",
"chars": 991,
"preview": "import {\n Links,\n Meta,\n Outlet,\n Scripts,\n ScrollRestoration,\n} from \"@remix-run/react\";\nimport type { LinksFuncti"
},
{
"path": "examples/remix/app/routes/_index.tsx",
"chars": 1024,
"preview": "import type { MetaFunction } from \"@remix-run/node\";\nimport MuxPlayer from \"@mux/mux-video-react\";\nimport MuxTheme from "
},
{
"path": "examples/remix/app/tailwind.css",
"chars": 180,
"preview": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\nhtml,\nbody {\n @apply bg-white dark:bg-gray-950;\n\n @media ("
},
{
"path": "examples/remix/package.json",
"chars": 1264,
"preview": "{\n \"name\": \"test-mux-player-style-remix\",\n \"version\": \"1.0.6\",\n \"private\": true,\n \"sideEffects\": false,\n \"type\": \"m"
},
{
"path": "examples/remix/postcss.config.js",
"chars": 81,
"preview": "export default {\n plugins: {\n tailwindcss: {},\n autoprefixer: {},\n },\n};\n"
},
{
"path": "examples/remix/tailwind.config.ts",
"chars": 467,
"preview": "import type { Config } from \"tailwindcss\";\n\nexport default {\n content: [\"./app/**/{**,.client,.server}/**/*.{js,jsx,ts,"
},
{
"path": "examples/remix/tsconfig.json",
"chars": 734,
"preview": "{\n \"include\": [\n \"**/*.ts\",\n \"**/*.tsx\",\n \"**/.server/**/*.ts\",\n \"**/.server/**/*.tsx\",\n \"**/.client/**/"
},
{
"path": "examples/remix/vite.config.ts",
"chars": 519,
"preview": "import { vitePlugin as remix } from \"@remix-run/dev\";\nimport { defineConfig } from \"vite\";\nimport tsconfigPaths from \"vi"
},
{
"path": "examples/vanilla/CHANGELOG.md",
"chars": 12478,
"preview": "# Changelog\n\n## [1.11.15](https://github.com/muxinc/player.style/compare/vanilla@1.11.14...vanilla@1.11.15) (2026-04-15)"
},
{
"path": "examples/vanilla/index.html",
"chars": 7835,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "examples/vanilla/package.json",
"chars": 449,
"preview": "{\n \"private\": true,\n \"name\": \"vanilla\",\n \"version\": \"1.11.15\",\n \"description\": \"\",\n \"main\": \"index.html\",\n \"script"
},
{
"path": "examples/vanilla/script.js",
"chars": 61,
"preview": "import 'hls-video-element';\nimport 'player.style/vimeonova';\n"
},
{
"path": "index.js",
"chars": 176,
"preview": "console.warn(\n '⚠️ Warning: \"player.style\" does not export anything by default.\\n' +\n 'Please import a specific theme,"
},
{
"path": "package.json",
"chars": 2809,
"preview": "{\n \"name\": \"player.style\",\n \"version\": \"0.3.4\",\n \"description\": \"A fresh collection of media player themes for every "
},
{
"path": "scripts/build-theme/CHANGELOG.md",
"chars": 7448,
"preview": "# Changelog\n\n## [0.1.1](https://github.com/muxinc/player.style/compare/build-theme@0.1.0...build-theme@0.1.1) (2025-12-0"
},
{
"path": "scripts/build-theme/build.js",
"chars": 3723,
"preview": "#!/usr/bin/env node\nimport { parseArgs } from 'node:util';\nimport process from 'node:process';\nimport { join, dirname } "
},
{
"path": "scripts/build-theme/package.json",
"chars": 262,
"preview": "{\n \"private\": true,\n \"name\": \"build-theme\",\n \"version\": \"0.1.1\",\n \"type\": \"module\",\n \"main\": \"./build.js\",\n \"bin\":"
},
{
"path": "scripts/build-theme/templates/media-theme.d.ts",
"chars": 314,
"preview": "import { MediaThemeElement } from 'media-chrome/dist/media-theme-element.js';\n\ndeclare global {\n interface HTMLElementT"
},
{
"path": "scripts/build-theme/templates/media-theme.js",
"chars": 834,
"preview": "/*\n<{{{element_name}}}>\n <video\n slot=\"media\"\n src=\"https://stream.mux.com/fXNzVtmtWuyz00xnSrJg4OJH6PyNo6D02Uzmge"
},
{
"path": "scripts/build-theme/templates/react.d.ts",
"chars": 239,
"preview": "import ___ClassName___ from './media-theme.js';\n\ndeclare const ___ComponentName___: React.ForwardRefExoticComponent<\n R"
},
{
"path": "scripts/build-theme/templates/react.js",
"chars": 299,
"preview": "'use client';\n\nimport React from 'react';\nimport ThemeElement from './media-theme.js';\n// keep as last import, ce-la-rea"
},
{
"path": "scripts/publish-packages/package.json",
"chars": 193,
"preview": "{\n \"private\": true,\n \"name\": \"publish-packages\",\n \"version\": \"0.0.0\",\n \"type\": \"module\",\n \"main\": \"./publish-packag"
},
{
"path": "scripts/publish-packages/publish-packages.js",
"chars": 2171,
"preview": "#!/usr/bin/env node\nimport { parseArgs } from 'node:util';\nimport { argv } from 'node:process';\nimport { realpath } from"
},
{
"path": "site/.eslintrc.json",
"chars": 56,
"preview": "{\n \"root\": true,\n \"extends\": \"next/core-web-vitals\"\n}\n"
},
{
"path": "site/.gitignore",
"chars": 406,
"preview": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pn"
},
{
"path": "site/CHANGELOG.md",
"chars": 45566,
"preview": "# Changelog\n\n## [1.11.15](https://github.com/muxinc/player.style/compare/site@1.11.14...site@1.11.15) (2026-04-15)\n\n\n###"
},
{
"path": "site/README.md",
"chars": 1383,
"preview": "This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js"
},
{
"path": "site/app/(home)/page.tsx",
"chars": 7791,
"preview": "import { getCollection, getCollectionTagGroups } from '../_utils/content';\nimport Search from '../_components/Search';\ni"
},
{
"path": "site/app/(home)/page.tsx.orig",
"chars": 8428,
"preview": "import { getCollection, getCollectionTagGroups } from '../_utils/content';\nimport Search from '../_components/Search';\ni"
},
{
"path": "site/app/_components/AnalyticsProvider.tsx",
"chars": 641,
"preview": "'use client';\n\nimport posthog from 'posthog-js';\nimport { PostHogProvider } from 'posthog-js/react';\n\nif (typeof window "
},
{
"path": "site/app/_components/AuthorLink.tsx",
"chars": 1310,
"preview": "import clsx from 'clsx';\nimport React from 'react';\n\ninterface AuthorImageProps {\n handle: string;\n className?: string"
},
{
"path": "site/app/_components/ButtonPicker.tsx",
"chars": 546,
"preview": "'use client';\n\nimport { Children, ReactNode, cloneElement } from 'react';\n\ntype ButtonPickerProps = {\n type: string;\n "
},
{
"path": "site/app/_components/ButtonPickerOption.tsx",
"chars": 1502,
"preview": "'use client';\n\nimport clsx from 'clsx';\nimport { useSearchParams, usePathname, useRouter } from 'next/navigation';\n\ntype"
},
{
"path": "site/app/_components/Code.tsx",
"chars": 733,
"preview": "import { codeToHtml } from 'shiki';\nimport clsx from 'clsx';\nimport CopyButton from './CopyButton';\n\ntype CodeProps = {\n"
},
{
"path": "site/app/_components/ColorPicker.tsx",
"chars": 2770,
"preview": "'use client';\n\nimport { useSearchParams, usePathname, useRouter } from 'next/navigation';\nimport clsx from 'clsx';\n\nexpo"
},
{
"path": "site/app/_components/CopyButton.tsx",
"chars": 2239,
"preview": "'use client';\n\nimport clsx from 'clsx';\nimport { ReactNode, useRef, useState } from 'react';\n\ntype CopyButtonProps = {\n "
},
{
"path": "site/app/_components/DocsEmbed.tsx",
"chars": 13734,
"preview": "import Code from './Code';\nimport mediaElements from '@/media-elements';\nimport { findParam } from '@/app/_utils/utils';"
},
{
"path": "site/app/_components/DocsInstall.tsx",
"chars": 1233,
"preview": "import Code from './Code';\nimport mediaElements from '@/media-elements';\nimport { findParam } from '@/app/_utils/utils';"
},
{
"path": "site/app/_components/Footer.tsx",
"chars": 602,
"preview": "export default function Footer() {\n return (\n <>\n <div className=\"overflow-hidden my-1px\">\n <div classNa"
},
{
"path": "site/app/_components/Grid.tsx",
"chars": 958,
"preview": "import { ReactNode } from 'react';\nimport clsx from 'clsx';\n\ntype GridProps = {\n className?: string;\n withPadding?: bo"
},
{
"path": "site/app/_components/Hero.tsx",
"chars": 704,
"preview": "import Grid from './Grid';\nimport clsx from 'clsx';\n\ntype HeroProps = {\n title: string;\n children: React.ReactNode;\n "
},
{
"path": "site/app/_components/Link/Link.client.tsx",
"chars": 1135,
"preview": "'use client';\n\nimport NextLink from 'next/link';\nimport { useSearchParams } from 'next/navigation';\nimport { ParsedUrlQu"
},
{
"path": "site/app/_components/Link/Link.server.tsx",
"chars": 468,
"preview": "import NextLink from 'next/link';\nimport ClientLink from './Link.client';\nimport { ComponentPropsWithoutRef, Suspense } "
},
{
"path": "site/app/_components/Link/index.ts",
"chars": 41,
"preview": "export { default } from './Link.server';\n"
},
{
"path": "site/app/_components/LinkWithUnderline.tsx",
"chars": 418,
"preview": "import { ComponentPropsWithoutRef } from 'react';\nimport Link from './Link';\nimport clsx from 'clsx';\n\nexport default fu"
},
{
"path": "site/app/_components/MediaTheme.tsx",
"chars": 1715,
"preview": "'use client';\n\nimport { ReactNode } from 'react';\nimport clsx from 'clsx';\nimport 'media-chrome';\nimport { useSearchPara"
},
{
"path": "site/app/_components/MobileNav.tsx",
"chars": 3101,
"preview": "'use client';\n\nimport clsx from 'clsx';\nimport { useState } from 'react';\nimport { NavLink } from './NavLink';\n\nexport d"
},
{
"path": "site/app/_components/MuxLogo.tsx",
"chars": 1670,
"preview": "type MuxLogoProps = {\n className?: string;\n};\n\nexport default function MuxLogo({ className }: MuxLogoProps) {\n return "
},
{
"path": "site/app/_components/NavBar.tsx",
"chars": 2886,
"preview": "import Link from './Link';\nimport PlayerStyleLogo from './PlayerStyleLogo';\nimport MuxLogo from './MuxLogo';\nimport { Na"
},
{
"path": "site/app/_components/NavLink.tsx",
"chars": 656,
"preview": "'use client';\n\nimport Link from './Link';\nimport { usePathname } from 'next/navigation';\nimport { MouseEventHandler } fr"
},
{
"path": "site/app/_components/PlayerHero.tsx",
"chars": 9196,
"preview": "'use client';\n\nimport Video from '@/app/_components/Video';\nimport MediaTheme from '@/app/_components/MediaTheme';\nimpor"
},
{
"path": "site/app/_components/PlayerStyleLogo.tsx",
"chars": 4949,
"preview": "type PlayerStyleLogoProps = {\n className?: string;\n};\n\nexport default function PlayerStyleLogo({ className }: PlayerSty"
},
{
"path": "site/app/_components/PostHogPageView.tsx",
"chars": 672,
"preview": "'use client';\n\nimport { usePathname, useSearchParams } from 'next/navigation';\nimport { useEffect } from 'react';\nimport"
},
{
"path": "site/app/_components/Search.tsx",
"chars": 3181,
"preview": "'use client';\n\nimport { useRef } from 'react';\nimport { useSearchParams, usePathname, useRouter } from 'next/navigation'"
},
{
"path": "site/app/_components/TagCheckbox.tsx",
"chars": 1490,
"preview": "'use client';\n\nimport { usePathname, useRouter, useSearchParams } from 'next/navigation';\n\ntype TagCheckboxProps = {\n n"
},
{
"path": "site/app/_components/ThemeColorPopover.tsx",
"chars": 2918,
"preview": "'use client';\nimport * as Popover from '@radix-ui/react-popover';\nimport LinkWithUnderline from './LinkWithUnderline';\n\n"
},
{
"path": "site/app/_components/ThemePreview.tsx",
"chars": 3216,
"preview": "import { ReactNode } from 'react';\nimport clsx from 'clsx';\nimport Video from '@/app/_components/Video';\nimport MediaThe"
},
{
"path": "site/app/_components/Video.tsx",
"chars": 676,
"preview": "'use client';\n\nimport '@mux/mux-video';\nimport { DetailedHTMLProps, VideoHTMLAttributes } from 'react';\n\ndeclare global "
},
{
"path": "site/app/_utils/content.ts",
"chars": 2788,
"preview": "import deepMerge from 'deepmerge';\nimport { allThemes, allPlayers, allFeatures, allFrameworks } from 'content-collection"
},
{
"path": "site/app/_utils/utils.ts",
"chars": 200,
"preview": "export function findParam(searchParams: Record<string, string | string[]>, name: string) {\n const param = searchParams["
},
{
"path": "site/app/about/page.tsx",
"chars": 3053,
"preview": "import Grid from '../_components/Grid';\nimport LinkWithUnderline from '../_components/LinkWithUnderline';\n\nconst P = ({ "
},
{
"path": "site/app/demo/page.tsx",
"chars": 655,
"preview": "import Grid from '../_components/Grid';\nimport MuxVideo from '@mux/mux-video-react';\nimport MediaTheme from 'player.styl"
},
{
"path": "site/app/features/[slug]/page.tsx",
"chars": 730,
"preview": "import type { Metadata } from 'next';\nimport Grid from '@/app/_components/Grid';\nimport { getEntry } from '@/app/_utils/"
},
{
"path": "site/app/layout.tsx",
"chars": 1305,
"preview": "import type { Metadata } from 'next';\nimport clsx from 'clsx';\nimport fontVariableClassNames from './styles/fonts';\nimpo"
},
{
"path": "site/app/players/[slug]/page.tsx",
"chars": 735,
"preview": "import type { Metadata } from 'next';\nimport Grid from '@/app/_components/Grid';\nimport { getEntry } from '@/app/_utils/"
},
{
"path": "site/app/styles/fonts/index.ts",
"chars": 1215,
"preview": "import localFont from 'next/font/local';\n\nconst Aeonik = localFont({\n variable: '--body',\n src: [\n { path: './Aeoni"
},
{
"path": "site/app/styles/globals.css",
"chars": 1517,
"preview": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n body *[id] {\n @apply scroll-mt-4;\n }\n}\n\n"
},
{
"path": "site/app/themes/[slug]/page.tsx",
"chars": 8850,
"preview": "import type { Metadata } from 'next';\nimport PlayerHero from '@/app/_components/PlayerHero';\nimport Grid from '@/app/_co"
},
{
"path": "site/content-collections.ts",
"chars": 2191,
"preview": "import * as fs from 'fs/promises';\nimport { join } from 'path';\nimport { defineCollection, defineConfig } from '@content"
},
{
"path": "site/features/airplay.md",
"chars": 135,
"preview": "---\ntitle: Airplay\ndescription: Airplay allows these themes to \"stream\" content — like video and audio — to Airplay-read"
},
{
"path": "site/features/audio-tracks.md",
"chars": 118,
"preview": "---\ntitle: Audio Tracks\ndescription: Audio tracks are a way to provide multiple audio options for a single video.\n---\n"
},
{
"path": "site/features/google-cast.md",
"chars": 140,
"preview": "---\ntitle: Google Cast\ndescription: Google Cast allows these themes to \"stream\" content — like video and audio — to Cast"
},
{
"path": "site/features/timeline-chapters.md",
"chars": 160,
"preview": "---\ntitle: Timeline Chapters\ndescription: Timeline chapters allow you to organize your timeline into sections, making it"
},
{
"path": "site/features/timeline-thumbnails.md",
"chars": 138,
"preview": "---\ntitle: Timeline Thumbnails\ndescription: Timeline thumbnails allow you to display a preview image when hovering over "
},
{
"path": "site/frameworks/html.md",
"chars": 94,
"preview": "---\ntitle: HTML\ndescription: HTML is the standard markup language for creating Web pages.\n---\n"
},
{
"path": "site/frameworks/js.md",
"chars": 120,
"preview": "---\ntitle: JavaScript\ndescription: JavaScript is a programming language that is used to make web pages interactive.\n---\n"
},
{
"path": "site/frameworks/lit.md",
"chars": 94,
"preview": "---\ntitle: Lit\ndescription: Lit is a simple and fast library for building web components.\n---\n"
},
{
"path": "site/frameworks/react.md",
"chars": 94,
"preview": "---\ntitle: React\ndescription: React is a JavaScript library for building user interfaces.\n---\n"
},
{
"path": "site/frameworks/svelte.md",
"chars": 97,
"preview": "---\ntitle: Svelte\ndescription: Svelte is a radical new approach to building user interfaces.\n---\n"
},
{
"path": "site/frameworks/vue.md",
"chars": 92,
"preview": "---\ntitle: Vue\ndescription: Vue is a JavaScript framework for building user interfaces.\n---\n"
},
{
"path": "site/media-assets.ts",
"chars": 1070,
"preview": "const mediaAssets = {\n landscape: {\n playbackId: 'fXNzVtmtWuyz00xnSrJg4OJH6PyNo6D02UzmgeKGkP5YQ',\n src: 'https://"
},
{
"path": "site/media-elements.ts",
"chars": 2394,
"preview": "const mediaElements = {\n video: {\n tag: 'video',\n src: 'https://stream.mux.com/fXNzVtmtWuyz00xnSrJg4OJH6PyNo6D02U"
},
{
"path": "site/next.config.mjs",
"chars": 746,
"preview": "import remarkGfm from 'remark-gfm';\nimport createMDX from '@next/mdx';\nimport { withContentCollections } from '@content-"
},
{
"path": "site/package.json",
"chars": 1277,
"preview": "{\n \"private\": true,\n \"name\": \"site\",\n \"version\": \"1.11.15\",\n \"scripts\": {\n \"dev\": \"next dev\",\n \"build\": \"next "
},
{
"path": "site/players/cloudflare.md",
"chars": 70,
"preview": "---\ntitle: Cloudflare\ndescription: This is the Cloudflare player.\n---\n"
},
{
"path": "site/players/dash.md",
"chars": 137,
"preview": "---\ntitle: Dash.js\ndescription: This is the Dash.js player.\ntagGroups:\n features:\n - timeline-chapters\n - timelin"
},
{
"path": "site/players/hls.md",
"chars": 154,
"preview": "---\ntitle: Hls.js\ndescription: This is the Hls.js player.\ntagGroups:\n features:\n - audio-tracks\n - timeline-chapt"
},
{
"path": "site/players/jwplayer.md",
"chars": 61,
"preview": "---\ntitle: JW Player\ndescription: This is the JW player.\n---\n"
},
{
"path": "site/players/mux.md",
"chars": 179,
"preview": "---\ntitle: Mux Video\ndescription: Mux Video is a Mux-flavored HTML5 video element.\ntagGroups:\n features:\n - audio-tr"
},
{
"path": "site/players/vimeo.md",
"chars": 60,
"preview": "---\ntitle: Vimeo\ndescription: This is the Vimeo player.\n---\n"
},
{
"path": "site/players/wistia.md",
"chars": 62,
"preview": "---\ntitle: Wistia\ndescription: This is the Wistia player.\n---\n"
},
{
"path": "site/players/youtube.md",
"chars": 64,
"preview": "---\ntitle: YouTube\ndescription: This is the YouTube player.\n---\n"
},
{
"path": "site/postcss.config.mjs",
"chars": 135,
"preview": "/** @type {import('postcss-load-config').Config} */\nconst config = {\n plugins: {\n tailwindcss: {},\n },\n};\n\nexport d"
},
{
"path": "site/public/landscape-test-chapters.vtt",
"chars": 297,
"preview": "WEBVTT\r\n\r\n1\r\n00:00:00.000 --> 00:00:16.000\r\nIntro\r\n\r\n2\r\n00:00:16.000 --> 00:00:18.000\r\nLoading...\r\n\r\n3\r\n00:00:18.000 --"
},
{
"path": "site/tailwind.config.js",
"chars": 20476,
"preview": "/**\n * in this design system, the border of an element\n * should correspond to the background-color of its parent.\n * Fo"
},
{
"path": "site/themes/demuxed-2022.md",
"chars": 295,
"preview": "---\ntitle: Demuxed 2022\nauthor: '@maveio'\ndate: '2022'\ndescription: A media player theme created for Demuxed 2022.\ntagGr"
},
{
"path": "site/themes/halloween.md",
"chars": 286,
"preview": "---\ntitle: Halloween\nauthor: '@muxinc'\ndate: 2024-10\ndescription: Bring the spooky season to your video player with this"
},
{
"path": "site/themes/instaplay.md",
"chars": 347,
"preview": "---\ntitle: Instaplay\nauthor: '@muxinc'\ndate: 2024-07\ndescription: Instaplay is a mobile-first theme inspired by playback"
},
{
"path": "site/themes/microvideo.md",
"chars": 374,
"preview": "---\ntitle: Microvideo\nauthor: '@muxinc'\ndate: '2022'\ndescription: This theme optimizes for shorter content that doesn't "
},
{
"path": "site/themes/minimal.md",
"chars": 387,
"preview": "---\ntitle: Minimal\nauthor: '@muxinc'\ndate: '2022'\ndescription: This theme pares down the Mux Player experience to the ba"
},
{
"path": "site/themes/notflix.md",
"chars": 270,
"preview": "---\ntitle: Notflix\nauthor: '@heff'\ndate: '2024'\ndescription: Everything but the big red N and long bus rides to Los Gato"
},
{
"path": "site/themes/reelplay.md",
"chars": 270,
"preview": "---\ntitle: Reelplay\nauthor: '@davekiss'\ndate: '2024'\ndescription: Reelplay is a nostalgic media player inspired by media"
},
{
"path": "site/themes/sutro-audio.md",
"chars": 359,
"preview": "---\ntitle: Sutro Audio\nauthor: '@muxinc'\ndate: 2024-07\ndescription: A sleek and modern theme lovingly named after our fa"
},
{
"path": "site/themes/sutro.md",
"chars": 367,
"preview": "---\ntitle: Sutro\nauthor: '@muxinc'\ndate: 2025-01\ndescription: A sleek and modern theme lovingly named after our favorite"
},
{
"path": "site/themes/tailwind-audio.md",
"chars": 322,
"preview": "---\ntitle: Tailwind Audio\nauthor: '@luwes'\ndate: '2023'\ndescription: A slick, minimal audio player theme made with Tailw"
},
{
"path": "site/themes/vimeonova.md",
"chars": 293,
"preview": "---\ntitle: Vimeonova\nauthor: '@luwes'\ndate: '2024'\ndescription: A fresh take on the classic Vimeo player design.\ntagGrou"
},
{
"path": "site/themes/winamp.md",
"chars": 301,
"preview": "---\ntitle: Winamp\nauthor: '@maveio'\ndate: '2022'\ndescription: A retro theme inspired by the classic Winamp media player\n"
},
{
"path": "site/themes/x-mas.md",
"chars": 368,
"preview": "---\ntitle: X-mas\nauthor: '@qualabs'\ndate: 2024-12\ndescription: A festive Christmas theme for the player with cozy red an"
},
{
"path": "site/themes/yt.md",
"chars": 327,
"preview": "---\ntitle: YT\nauthor: '@heff'\ndate: '2024'\ndescription: An homage to the modern, ubiquitous YouTube player. Recreated wi"
},
{
"path": "site/tsconfig.json",
"chars": 665,
"preview": "{\n \"compilerOptions\": {\n \"lib\": [\"dom\", \"dom.iterable\", \"esnext\"],\n \"allowJs\": true,\n \"skipLibCheck\": true,\n "
},
{
"path": "themes/demuxed-2022/CHANGELOG.md",
"chars": 3880,
"preview": "# Changelog\n\n## [0.1.2](https://github.com/muxinc/player.style/compare/@player.style/demuxed-2022@0.1.1...@player.style/"
},
{
"path": "themes/demuxed-2022/package.json",
"chars": 1296,
"preview": "{\n \"name\": \"@player.style/demuxed-2022\",\n \"version\": \"0.1.2\",\n \"description\": \"A media player theme created for Demux"
},
{
"path": "themes/demuxed-2022/template.html",
"chars": 12872,
"preview": "<style>\n :host {\n --media-primary-color: black;\n --media-tertiary-color: var(--media-accent-color, #7596CC);\n "
},
{
"path": "themes/halloween/CHANGELOG.md",
"chars": 1363,
"preview": "# Changelog\n\n## [0.1.2](https://github.com/muxinc/player.style/compare/@player.style/halloween@0.1.1...@player.style/hal"
},
{
"path": "themes/halloween/package.json",
"chars": 1316,
"preview": "{\n \"name\": \"@player.style/halloween\",\n \"version\": \"0.1.2\",\n \"description\": \"Bring the spooky season to your video pla"
},
{
"path": "themes/halloween/template.html",
"chars": 13541,
"preview": "<style>\n :host {\n --_primary-color: var(--media-primary-color, #000);\n --_secondary-color: var(--media-secondary-"
},
{
"path": "themes/instaplay/CHANGELOG.md",
"chars": 3350,
"preview": "# Changelog\n\n## [0.1.2](https://github.com/muxinc/player.style/compare/@player.style/instaplay@0.1.1...@player.style/ins"
},
{
"path": "themes/instaplay/package.json",
"chars": 1354,
"preview": "{\n \"name\": \"@player.style/instaplay\",\n \"version\": \"0.1.2\",\n \"description\": \"Instaplay is a mobile-first theme inspire"
},
{
"path": "themes/instaplay/template.html",
"chars": 3951,
"preview": "<style>\n :host {\n --_primary-color: var(--media-primary-color, #fff);\n --_secondary-color: var(--media-secondary-"
},
{
"path": "themes/microvideo/CHANGELOG.md",
"chars": 8595,
"preview": "# Changelog\n\n## [0.2.0](https://github.com/muxinc/player.style/compare/@player.style/microvideo@0.1.3...@player.style/mi"
},
{
"path": "themes/microvideo/package.json",
"chars": 1374,
"preview": "{\n \"name\": \"@player.style/microvideo\",\n \"version\": \"0.2.0\",\n \"description\": \"This theme optimizes for shorter content"
},
{
"path": "themes/microvideo/template.html",
"chars": 19863,
"preview": "<style>\n :host {\n --_primary-color: var(--media-primary-color, rgb(255 255 255 / 0.9));\n --_secondary-color: var("
},
{
"path": "themes/minimal/CHANGELOG.md",
"chars": 5683,
"preview": "# Changelog\n\n## [0.2.1](https://github.com/muxinc/player.style/compare/@player.style/minimal@0.2.0...@player.style/minim"
},
{
"path": "themes/minimal/package.json",
"chars": 1384,
"preview": "{\n \"name\": \"@player.style/minimal\",\n \"version\": \"0.2.1\",\n \"description\": \"This theme pares down the Mux Player experi"
},
{
"path": "themes/minimal/template.html",
"chars": 16295,
"preview": "<style>\n :host {\n --_primary-color: var(--media-primary-color, #fff);\n --_secondary-color: var(--media-secondary-"
},
{
"path": "themes/notflix/CHANGELOG.md",
"chars": 2298,
"preview": "# Changelog\n\n## [0.1.2](https://github.com/muxinc/player.style/compare/@player.style/notflix@0.1.1...@player.style/notfl"
},
{
"path": "themes/notflix/package.json",
"chars": 1295,
"preview": "{\n \"name\": \"@player.style/notflix\",\n \"version\": \"0.1.2\",\n \"description\": \"This player theme is inspired by Netflix's "
},
{
"path": "themes/notflix/template.html",
"chars": 15769,
"preview": "<style>\n :host {\n --_primary-color: var(--media-primary-color, #fff);\n --_secondary-color: var(--media-secondary-"
},
{
"path": "themes/reelplay/CHANGELOG.md",
"chars": 2380,
"preview": "# Changelog\n\n## [0.1.2](https://github.com/muxinc/player.style/compare/@player.style/reelplay@0.1.1...@player.style/reel"
},
{
"path": "themes/reelplay/assets/fonts.css",
"chars": 104,
"preview": "@font-face {\n font-family: pixelify;\n src: url('./PixelifySans-Regular.ttf') format('truetype');\n}"
},
{
"path": "themes/reelplay/package.json",
"chars": 1321,
"preview": "{\n \"name\": \"@player.style/reelplay\",\n \"version\": \"0.1.2\",\n \"description\": \"Reelplay is a nostalgic media player inspi"
},
{
"path": "themes/reelplay/template.html",
"chars": 10200,
"preview": "<style>\n :host {\n --_primary-color: var(--media-primary-color, #fff);\n --_secondary-color: var(--media-secondary-"
},
{
"path": "themes/sutro/CHANGELOG.md",
"chars": 5805,
"preview": "# Changelog\n\n## [0.2.1](https://github.com/muxinc/player.style/compare/@player.style/sutro@0.2.0...@player.style/sutro@0"
},
{
"path": "themes/sutro/package.json",
"chars": 1345,
"preview": "{\n \"name\": \"@player.style/sutro\",\n \"version\": \"0.2.1\",\n \"description\": \"A sleek and modern theme lovingly named after"
},
{
"path": "themes/sutro/template.html",
"chars": 28725,
"preview": "<!-- Sutro -->\n<style>\n :host {\n --_primary-color: var(--media-primary-color, #fff);\n --_secondary-color: var(--m"
},
{
"path": "themes/sutro-audio/CHANGELOG.md",
"chars": 2854,
"preview": "# Changelog\n\n## [0.0.8](https://github.com/muxinc/player.style/compare/@player.style/sutro-audio@0.0.7...@player.style/s"
},
{
"path": "themes/sutro-audio/package.json",
"chars": 1357,
"preview": "{\n \"name\": \"@player.style/sutro-audio\",\n \"version\": \"0.0.8\",\n \"description\": \"A sleek and modern theme lovingly named"
},
{
"path": "themes/sutro-audio/template.html",
"chars": 15728,
"preview": "<!-- Sutro Audio -->\n<style>\n :host {\n --media-font-family: Roboto, helvetica neue, segoe ui, arial, sans-serif;\n "
},
{
"path": "themes/tailwind-audio/CHANGELOG.md",
"chars": 3116,
"preview": "# Changelog\n\n## [0.0.13](https://github.com/muxinc/player.style/compare/@player.style/tailwind-audio@0.0.12...@player.st"
},
{
"path": "themes/tailwind-audio/package.json",
"chars": 1468,
"preview": "{\n \"name\": \"@player.style/tailwind-audio\",\n \"version\": \"0.0.13\",\n \"description\": \"A slick, minimal audio player theme"
},
{
"path": "themes/tailwind-audio/styles.css",
"chars": 59,
"preview": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n"
},
{
"path": "themes/tailwind-audio/tailwind.config.js",
"chars": 590,
"preview": "/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n content: ['./**/*.{html,js}'],\n theme: {\n extend: {"
},
{
"path": "themes/tailwind-audio/template.html",
"chars": 8258,
"preview": "<style>\n <%- await include('/styles.css') -%>\n</style>\n\n<svg class=\"hidden\">\n <symbol\n id=\"backward\"\n viewBox=\"0"
},
{
"path": "themes/vimeonova/CHANGELOG.md",
"chars": 4311,
"preview": "# Changelog\n\n## [0.1.2](https://github.com/muxinc/player.style/compare/@player.style/vimeonova@0.1.1...@player.style/vim"
},
{
"path": "themes/vimeonova/package.json",
"chars": 1292,
"preview": "{\n \"name\": \"@player.style/vimeonova\",\n \"version\": \"0.1.2\",\n \"description\": \"A fresh take on the classic Vimeo player "
},
{
"path": "themes/vimeonova/template.html",
"chars": 24334,
"preview": "<style>\n :host {\n --vimeonova-black: 23 35 34;\n --vimeonova-primary-color: var(--media-primary-color, rgb(253 244"
},
{
"path": "themes/winamp/CHANGELOG.md",
"chars": 2777,
"preview": "# Changelog\n\n## [0.0.13](https://github.com/muxinc/player.style/compare/@player.style/winamp@0.0.12...@player.style/wina"
},
{
"path": "themes/winamp/assets/fonts.css",
"chars": 187,
"preview": "@font-face {\n font-family: winamp-numbers;\n src: url('./winamp-numbers.ttf') format('truetype');\n}\n\n@font-face {\n fon"
},
{
"path": "themes/winamp/package.json",
"chars": 1298,
"preview": "{\n \"name\": \"@player.style/winamp\",\n \"version\": \"0.0.13\",\n \"description\": \"A retro theme inspired by the classic Winam"
},
{
"path": "themes/winamp/template.html",
"chars": 13730,
"preview": "<style>\n :host {\n --media-range-background: transparent;\n\n --media-range-track-height: 1px;\n --media-range-tra"
},
{
"path": "themes/x-mas/CHANGELOG.md",
"chars": 1374,
"preview": "# Changelog\n\n## [0.1.2](https://github.com/muxinc/player.style/compare/@player.style/x-mas@0.1.1...@player.style/x-mas@0"
},
{
"path": "themes/x-mas/package.json",
"chars": 1389,
"preview": "{\n \"name\": \"@player.style/x-mas\",\n \"version\": \"0.1.2\",\n \"description\": \"A festive Christmas theme for the player with"
},
{
"path": "themes/x-mas/template.html",
"chars": 204673,
"preview": "<style>\n :host {\n --media-primary-color: black;\n --media-tertiary-color: var(--media-accent-color, #7596cc);\n "
},
{
"path": "themes/yt/CHANGELOG.md",
"chars": 6559,
"preview": "# Changelog\n\n## [0.2.1](https://github.com/muxinc/player.style/compare/@player.style/yt@0.2.0...@player.style/yt@0.2.1) "
},
{
"path": "themes/yt/package.json",
"chars": 1349,
"preview": "{\n \"name\": \"@player.style/yt\",\n \"version\": \"0.2.1\",\n \"description\": \"An homage to the modern, ubiquitous YouTube play"
},
{
"path": "themes/yt/template.html",
"chars": 21465,
"preview": "<style>\n media-controller {\n font-size: 13px;\n font-family: Roboto, Arial, sans-serif;\n --media-font-family: R"
},
{
"path": "turbo.json",
"chars": 713,
"preview": "{\n \"$schema\": \"https://turborepo.org/schema.json\",\n \"extends\": [\"//\"],\n \"ui\": \"stream\",\n \"tasks\": {\n \"i18n\": {},\n"
}
]
// ... and 2 more files (download for full content)
About this extraction
This page contains the full source code of the muxinc/player.style GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 174 files (748.0 KB), approximately 295.6k tokens, and a symbol index with 106 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.