chore(release): v1.0.3

vidstack · Sep 30, 2023 · f3b3a77 · f3b3a77
1 parent ad1481f
commit f3b3a77
Show file tree

Hide file tree

Showing 19 changed files with 790 additions and 61 deletions.
diff --git a/apps/site/package.json b/apps/site/package.json
@@ -34,7 +34,7 @@
     "@astrojs/tailwind": "^5.0.0",
     "@astrojs/vercel": "^5.0.0",
     "@iconify-json/lucide": "^1.1.112",
-    "@maverick-js/cli": "0.40.2",
+    "@maverick-js/cli": "0.40.3",
     "@tailwindcss/container-queries": "^0.1.1",
     "@types/markdown-it": "^12.2.0",
     "@types/mdast": "^4.0.0",

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vidstack-workspace",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "private": true,
   "type": "module",
   "workspaces": [

diff --git a/packages/react/.templates/sandbox/document.css b/packages/react/.templates/sandbox/document.css
@@ -0,0 +1,27 @@
+/*************************************************************************************************
+ * Document
+ *************************************************************************************************/
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+  width: 100vw;
+  height: 100vh;
+}
+
+body {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+main {
+  width: 100%;
+  max-width: 980px;
+  margin-inline: auto;
+}
diff --git a/packages/react/.templates/sandbox/favicon-32x32.png b/packages/react/.templates/sandbox/favicon-32x32.png
diff --git a/packages/react/.templates/sandbox/index.html b/packages/react/.templates/sandbox/index.html
@@ -0,0 +1,21 @@
+<html>
+  <head>
+    <title>Vidstack React Sandbox</title>
+
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+    <link rel="icon" type="image/png" sizes="32x32" href="/sandbox/favicon-32x32.png" />
+
+    <link rel="stylesheet" href="./document.css" />
+    <link rel="stylesheet" href="./player.css" />
+
+    <script src="./main.tsx" type="module"></script>
+  </head>
+
+  <body>
+    <main>
+      <div id="player"></div>
+    </main>
+  </body>
+</html>
diff --git a/packages/react/.templates/sandbox/main.tsx b/packages/react/.templates/sandbox/main.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+
+import ReactDOM from 'react-dom/client';
+
+import { Player } from './player';
+
+const root = document.getElementById('player')!;
+ReactDOM.createRoot(root).render(
+  <React.StrictMode>
+    <Player />
+  </React.StrictMode>,
+);
diff --git a/packages/react/.templates/sandbox/player.css b/packages/react/.templates/sandbox/player.css
@@ -0,0 +1,46 @@
+@import '../player/styles/base.css';
+@import '../player/styles/default/buffering.css';
+@import '../player/styles/default/buttons.css';
+@import '../player/styles/default/captions.css';
+@import '../player/styles/default/chapter-title.css';
+@import '../player/styles/default/controls.css';
+@import '../player/styles/default/gestures.css';
+@import '../player/styles/default/icons.css';
+@import '../player/styles/default/menus.css';
+@import '../player/styles/default/poster.css';
+@import '../player/styles/default/sliders.css';
+@import '../player/styles/default/thumbnail.css';
+@import '../player/styles/default/time.css';
+@import '../player/styles/default/tooltips.css';
+@import '../player/styles/default/layouts/audio.css';
+@import '../player/styles/default/layouts/video.css';
+
+.player {
+  --brand-color: #f5f5f5;
+  --focus-color: #4e9cf6;
+
+  --audio-brand: var(--brand-color);
+  --audio-focus-ring-color: var(--focus-color);
+  --audio-border-radius: 2px;
+
+  --video-brand: var(--brand-color);
+  --video-focus-ring-color: var(--focus-color);
+  --video-border-radius: 2px;
+
+  /* 👉 https://vidstack.io/docs/player/components/layouts/default#css-variables for more. */
+
+  width: 100%;
+}
+
+.player[data-view-type='video'] {
+  aspect-ratio: 16 /9;
+}
+
+.src-buttons {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+  margin-top: 40px;
+  margin-inline: auto;
+  max-width: 300px;
+}
diff --git a/packages/react/.templates/sandbox/player.tsx b/packages/react/.templates/sandbox/player.tsx
@@ -0,0 +1,104 @@
+import { useEffect, useRef, useState } from 'react';
+
+import {
+  isHLSProvider,
+  MediaPlayer,
+  MediaProvider,
+  Poster,
+  Track,
+  type MediaCanPlayDetail,
+  type MediaCanPlayEvent,
+  type MediaPlayerInstance,
+  type MediaProviderAdapter,
+  type MediaProviderChangeEvent,
+} from '../src';
+import {
+  DefaultAudioLayout,
+  defaultLayoutIcons,
+  DefaultVideoLayout,
+} from '../src/components/layouts/default';
+import { textTracks } from './tracks';
+
+export function Player() {
+  let player = useRef<MediaPlayerInstance>(null),
+    [src, setSrc] = useState('');
+
+  useEffect(() => {
+    // Initialize src.
+    changeSource('audio');
+
+    // Subscribe to state updates.
+    return player.current!.subscribe(({ paused, viewType }) => {
+      // console.log('is paused?', '->', paused);
+      // console.log('is audio view?', '->', viewType === 'audio');
+    });
+  }, []);
+
+  function onProviderChange(
+    provider: MediaProviderAdapter | null,
+    nativeEvent: MediaProviderChangeEvent,
+  ) {
+    // We can configure provider's here.
+    if (isHLSProvider(provider)) {
+      provider.config = {};
+    }
+  }
+
+  // We can listen for the `can-play` event to be notified when the player is ready.
+  function onCanPlay(detail: MediaCanPlayDetail, nativeEvent: MediaCanPlayEvent) {
+    // ...
+  }
+
+  function changeSource(type: string) {
+    const muxPlaybackId = 'VZtzUzGRv02OhRnZCxcNg49OilvolTqdnFLEqBsTwaxU';
+    switch (type) {
+      case 'audio':
+        setSrc('https://media-files.vidstack.io/sprite-fight/audio.mp3');
+        break;
+      case 'video':
+        setSrc(`https://stream.mux.com/${muxPlaybackId}/low.mp4`);
+        break;
+      case 'hls':
+        setSrc(`https://stream.mux.com/${muxPlaybackId}.m3u8`);
+        break;
+    }
+  }
+
+  return (
+    <>
+      <MediaPlayer
+        className="player"
+        title="Sprite Fight"
+        src={src}
+        crossorigin
+        onProviderChange={onProviderChange}
+        onCanPlay={onCanPlay}
+        ref={player}
+      >
+        <MediaProvider>
+          <Poster
+            className="vds-poster"
+            src="https://image.mux.com/VZtzUzGRv02OhRnZCxcNg49OilvolTqdnFLEqBsTwaxU/thumbnail.webp?time=268&width=1200"
+            alt="Girl walks into campfire with gnomes surrounding her friend ready for their next meal!"
+          />
+          {textTracks.map((track) => (
+            <Track {...track} key={track.src} />
+          ))}
+        </MediaProvider>
+
+        {/* Layouts */}
+        <DefaultAudioLayout icons={defaultLayoutIcons} />
+        <DefaultVideoLayout
+          icons={defaultLayoutIcons}
+          thumbnails="https://image.mux.com/VZtzUzGRv02OhRnZCxcNg49OilvolTqdnFLEqBsTwaxU/storyboard.vtt"
+        />
+      </MediaPlayer>
+
+      <div className="src-buttons">
+        <button onClick={() => changeSource('audio')}>Audio</button>
+        <button onClick={() => changeSource('video')}>Video</button>
+        <button onClick={() => changeSource('hls')}>HLS</button>
+      </div>
+    </>
+  );
+}
diff --git a/packages/react/.templates/sandbox/styles.css b/packages/react/.templates/sandbox/styles.css
@@ -0,0 +1,78 @@
+@import '../player/styles/base.css';
+@import '../player/styles/default/buffering.css';
+@import '../player/styles/default/buttons.css';
+@import '../player/styles/default/captions.css';
+@import '../player/styles/default/chapter-title.css';
+@import '../player/styles/default/controls.css';
+@import '../player/styles/default/gestures.css';
+@import '../player/styles/default/icons.css';
+@import '../player/styles/default/menus.css';
+@import '../player/styles/default/poster.css';
+@import '../player/styles/default/sliders.css';
+@import '../player/styles/default/thumbnail.css';
+@import '../player/styles/default/time.css';
+@import '../player/styles/default/tooltips.css';
+@import '../player/styles/default/layouts/audio.css';
+@import '../player/styles/default/layouts/video.css';
+
+/*************************************************************************************************
+ * Player
+ *************************************************************************************************/
+
+media-player {
+  --brand-color: #f5f5f5;
+  --focus-color: #4e9cf6;
+
+  --audio-brand: var(--brand-color);
+  --audio-focus-ring-color: var(--focus-color);
+  --audio-border-radius: 2px;
+
+  --video-brand: var(--brand-color);
+  --video-focus-ring-color: var(--focus-color);
+  --video-border-radius: 2px;
+
+  /* 👉 https://vidstack.io/docs/player/components/layouts/default#css-variables for more. */
+
+  width: 100%;
+}
+
+media-player[data-view-type='video'] {
+  aspect-ratio: 16 /9;
+}
+
+/*************************************************************************************************
+ * Document
+ *************************************************************************************************/
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+  width: 100vw;
+  height: 100vh;
+}
+
+body {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+main {
+  width: 100%;
+  max-width: 980px;
+  margin-inline: auto;
+}
+
+.src-buttons {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+  margin-top: 40px;
+  margin-inline: auto;
+  max-width: 300px;
+}
diff --git a/packages/react/.templates/sandbox/tracks.ts b/packages/react/.templates/sandbox/tracks.ts
@@ -0,0 +1,23 @@
+export const textTracks = [
+  // Subtitles
+  {
+    src: 'https://media-files.vidstack.io/sprite-fight/subs/english.vtt',
+    label: 'English',
+    language: 'en-US',
+    kind: 'subtitles',
+    default: true,
+  },
+  {
+    src: 'https://media-files.vidstack.io/sprite-fight/subs/spanish.vtt',
+    label: 'Spanish',
+    language: 'es-ES',
+    kind: 'subtitles',
+  },
+  // Chapters
+  {
+    src: 'https://media-files.vidstack.io/sprite-fight/chapters.vtt',
+    kind: 'chapters',
+    language: 'en-US',
+    default: true,
+  },
+];
diff --git a/packages/react/package.json b/packages/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vidstack/react",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "UI component library for building high-quality, accessible video and audio experiences on the web.",
   "license": "MIT",
   "type": "module",
@@ -21,6 +21,8 @@
     "prebuild": "node .scripts/prebuild.js",
     "build": "pnpm prebuild && rollup -c",
     "build:types": "tsc -p tsconfig.build.json",
+    "sandbox": "node ../../.scripts/sandbox.js",
+    "sandbox:build": "vite build sandbox",
     "types": "pnpm build:types && rollup -c --config-types",
     "clean": "rimraf dist styles",
     "format": "prettier src --write --loglevel warn"
@@ -33,13 +35,14 @@
     "media-captions": "^1.0.0"
   },
   "devDependencies": {
-    "@maverick-js/cli": "0.40.2",
+    "@maverick-js/cli": "0.40.3",
     "@rollup/plugin-node-resolve": "^15.1.0",
     "@types/fs-extra": "^11.0.1",
     "@types/react": "^18.0.0",
+    "@vitejs/plugin-react": "^4.1.0",
     "esbuild": "^0.16.17",
     "fs-extra": "^11.0.0",
-    "maverick.js": "0.40.2",
+    "maverick.js": "0.40.3",
     "media-icons": "^1.0.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
@@ -48,7 +51,8 @@
     "rollup-plugin-dts": "^5.3.0",
     "rollup-plugin-esbuild": "^5.0.0",
     "typescript": "^5.2.2",
-    "vidstack": "workspace:*"
+    "vidstack": "workspace:*",
+    "vite": "^4.4.9"
   },
   "contributors": [
     "Rahim Alwer <[email protected]>"