Release rotatable plugin 💞 (#106)

willnguyen1312 · Jan 27, 2024 · a0d7433 · a0d7433
1 parent e1332fe
commit a0d7433
Show file tree

Hide file tree

Showing 30 changed files with 656 additions and 61 deletions.
diff --git a/.changeset/five-pots-search.md b/.changeset/five-pots-search.md
@@ -0,0 +1,5 @@
+---
+"@headlessplayback/rotatable-plugin": minor
+---
+
+Release rotatable plugin 💞
diff --git a/examples/with-qwik/package.json b/examples/with-qwik/package.json
@@ -7,7 +7,7 @@
   "devDependencies": {
     "@builder.io/qwik": "^1.4.2",
     "@builder.io/qwik-city": "^1.4.2",
-    "@types/node": "^20.11.7",
+    "@types/node": "^20.11.8",
     "@unocss/reset": "^0.58.4",
     "typescript": "5.3.3",
     "undici": "^6.5.0",

diff --git a/examples/with-react/package.json b/examples/with-react/package.json
@@ -10,12 +10,13 @@
     "@headlessplayback/hijack-plugin": "latest",
     "@headlessplayback/hls-plugin": "latest",
     "@headlessplayback/react": "latest",
+    "@headlessplayback/rotatable-plugin": "latest",
     "@headlessplayback/zoomable-plugin": "latest",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@types/node": "^20.11.7",
+    "@types/node": "^20.11.8",
     "@types/react": "^18.2.48",
     "@types/react-dom": "^18.2.18",
     "@unocss/reset": "^0.58.4",

diff --git a/examples/with-react/src/App.tsx b/examples/with-react/src/App.tsx
@@ -4,6 +4,7 @@ import Hijack from "./Hijack"
 import Hls from "./Hls"
 import Normal from "./Normal"
 import Zoomable from "./Zoomable"
+import Rotatable from "./Rotatable"
 
 function classNames(...classes: string[]) {
   return classes.filter(Boolean).join(" ")
@@ -15,6 +16,7 @@ export default function App() {
     { name: "Hls", href: "#", current: false },
     { name: "Dash", href: "#", current: false },
     { name: "Hijack", href: "#", current: false },
+    { name: "Rotatable", href: "#", current: false },
     { name: "Zoomable", href: "#", current: false },
   ])
 
@@ -41,6 +43,10 @@ export default function App() {
       return <Zoomable />
     }
 
+    if (activeComponentName === "Rotatable") {
+      return <Rotatable />
+    }
+
     return null
   }, [activeComponentName])
 

diff --git a/examples/with-react/src/Rotatable.tsx b/examples/with-react/src/Rotatable.tsx
@@ -0,0 +1,109 @@
+import { usePlayback } from "@headlessplayback/react"
+import { rotatablePlaybackPlugin } from "@headlessplayback/rotatable-plugin"
+import React, { useEffect } from "react"
+
+const id = "rotatable"
+
+usePlayback.use(rotatablePlaybackPlugin)
+
+function CurrentTime() {
+  const playback = usePlayback({
+    id,
+  })
+
+  return <p>Current time: {playback.playbackState.currentTime}</p>
+}
+
+const Duration = React.memo(() => {
+  const { playbackState } = usePlayback({
+    id,
+  })
+
+  return <p>Duration: {playbackState.duration}</p>
+})
+
+function Rotatable() {
+  const { activate, playbackActions, playbackState } = usePlayback({
+    id,
+  })
+  const videoContainerRef = React.useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    // Activate when playback element is accessible from the DOM
+    activate()
+
+    playbackActions.createRotatablePlayback({
+      container: videoContainerRef.current as HTMLDivElement,
+    })
+  }, [])
+
+  function jumpNext5s() {
+    // Core actions and state are always available
+    playbackActions.setCurrentTime(playbackState.currentTime + 5)
+  }
+
+  function jumpPrev5s() {
+    playbackActions.setCurrentTime(playbackState.currentTime - 5)
+  }
+
+  function togglePlayback() {
+    playbackActions.setPaused(!playbackState.paused)
+  }
+
+  function rotate() {
+    playbackActions.rotate()
+  }
+
+  return (
+    <>
+      <div
+        ref={videoContainerRef}
+        className="border-fuchsia border-1 grid h-[400px] w-[600px] place-items-center"
+      >
+        <video
+          style={{
+            width: playbackState.width,
+            height: playbackState.height,
+          }}
+          src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
+          id={id}
+        ></video>
+      </div>
+
+      <CurrentTime />
+      <Duration />
+
+      <div className="flex space-x-1 ">
+        <button
+          className="rounded-md bg-violet-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-violet-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-violet-600"
+          onClick={jumpPrev5s}
+        >
+          Prev 5s
+        </button>
+
+        <button
+          className="rounded-md bg-violet-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-violet-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-violet-600"
+          onClick={togglePlayback}
+        >
+          {playbackState.paused ? "Play" : "Pause"}
+        </button>
+
+        <button
+          className="rounded-md bg-violet-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-violet-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-violet-600"
+          onClick={jumpNext5s}
+        >
+          Next 5s
+        </button>
+
+        <button
+          className="rounded-md bg-violet-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-violet-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-violet-600"
+          onClick={rotate}
+        >
+          Rotate
+        </button>
+      </div>
+    </>
+  )
+}
+
+export default Rotatable
diff --git a/examples/with-svelte/package.json b/examples/with-svelte/package.json
@@ -14,7 +14,7 @@
     "@headlessplayback/zoomable-plugin": "latest"
   },
   "devDependencies": {
-    "@sveltejs/vite-plugin-svelte": "^3.0.1",
+    "@sveltejs/vite-plugin-svelte": "^3.0.2",
     "@tsconfig/svelte": "^5.0.2",
     "@unocss/reset": "^0.58.4",
     "svelte": "^4.2.9",

diff --git a/examples/with-vue/package.json b/examples/with-vue/package.json
@@ -9,6 +9,7 @@
     "@headlessplayback/dash-plugin": "latest",
     "@headlessplayback/hijack-plugin": "latest",
     "@headlessplayback/hls-plugin": "latest",
+    "@headlessplayback/rotatable-plugin": "latest",
     "@headlessplayback/vue": "latest",
     "@headlessplayback/zoomable-plugin": "latest",
     "vue": "^3.4.15"

diff --git a/examples/with-vue/src/App.vue b/examples/with-vue/src/App.vue
@@ -6,14 +6,22 @@ import Hijack from "./Hijack.vue"
 import Hls from "./Hls.vue"
 import Normal from "./Normal.vue"
 import Zoomable from "./Zoomable.vue"
+import Rotatable from "./Rotatable.vue"
 
-type PlaybackName = "Hls" | "Hijack" | "Dash" | "Normal" | "Zoomable"
+type PlaybackName =
+  | "Hls"
+  | "Hijack"
+  | "Dash"
+  | "Normal"
+  | "Rotatable"
+  | "Zoomable"
 
 const components: Record<PlaybackName, Component> = {
   Hls,
   Hijack,
   Dash,
   Normal,
+  Rotatable,
   Zoomable,
 }
 
@@ -22,6 +30,7 @@ const tabs = ref([
   { name: "Hls", href: "#", current: false },
   { name: "Dash", href: "#", current: false },
   { name: "Hijack", href: "#", current: false },
+  { name: "Rotatable", href: "#", current: false },
   { name: "Zoomable", href: "#", current: false },
 ])
 

diff --git a/examples/with-vue/src/Rotatable.vue b/examples/with-vue/src/Rotatable.vue
@@ -0,0 +1,86 @@
+<script lang="ts" setup>
+import { usePlayback } from "@headlessplayback/vue"
+import { rotatablePlaybackPlugin } from "@headlessplayback/rotatable-plugin"
+import { onMounted, ref } from "vue"
+
+usePlayback.use(rotatablePlaybackPlugin)
+
+const id = "rotatable"
+const videoRef = ref<HTMLElement | null>(null)
+const { activate, playbackActions, playbackState } = usePlayback({
+  id,
+})
+
+onMounted(() => {
+  // Activate when playback element is accessible from the DOM
+  activate()
+
+  playbackActions.createRotatablePlayback({
+    container: videoRef.value as HTMLElement,
+  })
+})
+
+const jumpTo = (time: number) => {
+  // Core actions and state are always available
+  playbackActions.setCurrentTime(time)
+}
+
+const togglePlayback = () => {
+  playbackActions.setPaused(!playbackState.paused)
+}
+
+const rotate = () => {
+  playbackActions.rotate()
+}
+</script>
+
+<template>
+  <div
+    ref="videoRef"
+    className="border-fuchsia border-1 grid h-[400px] w-[600px] place-items-center"
+  >
+    <video
+      :style="{
+        width: `${playbackState.width}px`,
+        height: `${playbackState.height}px`,
+      }"
+      src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
+      :id="id"
+    >
+      <track kind="captions" />
+    </video>
+  </div>
+
+  <p>Current time: {{ playbackState.currentTime }}</p>
+
+  <p>Duration: {{ playbackState.duration }}</p>
+  <div class="flex space-x-1">
+    <button
+      class="rounded-md bg-violet-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-violet-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-violet-600"
+      @click="jumpTo(playbackState.currentTime - 5)"
+    >
+      Prev 5s
+    </button>
+
+    <button
+      class="rounded-md bg-violet-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-violet-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-violet-600"
+      @click="togglePlayback"
+    >
+      {{ playbackState.paused ? "Play" : "Pause" }}
+    </button>
+
+    <button
+      class="rounded-md bg-violet-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-violet-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-violet-600"
+      @click="jumpTo(playbackState.currentTime + 5)"
+    >
+      Next 5s
+    </button>
+
+    <button
+      class="rounded-md bg-violet-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-violet-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-violet-600"
+      @click="rotate"
+    >
+      Rotate
+    </button>
+  </div>
+</template>
diff --git a/packages/docs/package.json b/packages/docs/package.json
@@ -30,6 +30,7 @@
     "@headlessplayback/dash-plugin": "latest",
     "@headlessplayback/hijack-plugin": "latest",
     "@headlessplayback/hls-plugin": "latest",
+    "@headlessplayback/rotatable-plugin": "latest",
     "@headlessplayback/vue": "latest",
     "@headlessplayback/zoomable-plugin": "latest",
     "vitepress": "1.0.0-rc.40",

diff --git a/packages/docs/src/.vitepress/config.mts b/packages/docs/src/.vitepress/config.mts
@@ -98,6 +98,7 @@ export default defineConfig({
           { text: "dash", link: "/plugins/dash" },
           { text: "hijack", link: "/plugins/hijack" },
           { text: "hls", link: "/plugins/hls" },
+          { text: "rotatable", link: "/plugins/rotatable" },
           { text: "zoomable", link: "/plugins/zoomable" },
         ],
       },

diff --git a/packages/docs/src/components/HomePageShow.vue b/packages/docs/src/components/HomePageShow.vue
@@ -2,19 +2,27 @@
 import type { Component } from "vue"
 import { defineAsyncComponent, ref } from "vue"
 
-type PlaybackName = "Hls" | "Hijack" | "Dash" | "Normal" | "Zoomable"
+type PlaybackName =
+  | "Hls"
+  | "Hijack"
+  | "Dash"
+  | "Normal"
+  | "Zoomable"
+  | "Rotatable"
 
 const Dash = defineAsyncComponent(() => import("./Dash.vue"))
 const Hls = defineAsyncComponent(() => import("./Hls.vue"))
 const Hijack = defineAsyncComponent(() => import("./Hijack.vue"))
 const Normal = defineAsyncComponent(() => import("./Normal.vue"))
+const Rotatable = defineAsyncComponent(() => import("./Rotatable.vue"))
 const Zoomable = defineAsyncComponent(() => import("./Zoomable.vue"))
 
 const components: Record<PlaybackName, Component> = {
   Hls,
   Hijack,
   Dash,
   Normal,
+  Rotatable,
   Zoomable,
 }
 
@@ -23,6 +31,7 @@ const tabs = ref([
   { name: "Hls", href: "#", current: false },
   { name: "Dash", href: "#", current: false },
   { name: "Hijack", href: "#", current: false },
+  { name: "Rotatable", href: "#", current: false },
   { name: "Zoomable", href: "#", current: false },
 ])