Add "Don't upload to GitHub" badge to bottom of README

.gitignore

@@ -1,5 +1,6 @@
 # Generated
 .vscode
+.astro
 node_modules
 test/.astro
-test/node_modules
+test/node_modules

README.md

@@ -62,4 +62,8 @@ GNU Affero General Public License for more details.
 
 You should have received a copy of the GNU Affero General Public License
 along with this program.  If not, see https://www.gnu.org/licenses/.
-```
+```
+
+___
+
+[![Please don't upload to GitHub](https://nogithub.codeberg.page/badge.svg)](https://nogithub.codeberg.page)

TODO.md

@@ -1,20 +1,20 @@
  - [x] Support HLS (HTTP Live Streaming)
- - [x] Subtitles ([`textTracks`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/textTracks))
- - [ ] Multi-Video Tracks ([`videoTracks`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/videoTracks))
- - [ ] Multi-Audio Tracks ([`audioTracks`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/audioTracks))
- - [ ] Playback Rate ([`playbackRate`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/playbackRate))
  - [x] Add Picture-in-Picture button
  - [x] Volume Controller
  - [x] Mobile Gestures
- - [ ] Cast Support
  - [x] Allow for multiple players on one page
- - [ ] 360 Video Support
  - [x] Remove Iconoir's Vue package, [replace with CSS](https://iconoir.com/docs/packages/css)
  - [x] Milieu Settings
    - [x] Mode (Default | Fullscreen)
    - [x] Speed
    - [x] Blur
    - [x] Scale
+ - [x] Subtitles ([`textTracks`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/textTracks))
+ - [x] Playback Rate ([`playbackRate`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/playbackRate))
+ - [ ] Multi-Video Tracks ([`videoTracks`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/videoTracks))
+ - [ ] Multi-Audio Tracks ([`audioTracks`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/audioTracks))
+ - [ ] Cast Support
+ - [ ] 360 Video Support
  - [ ] Modes
     - [ ] Audio-Only
     - [ ] Pop-Up

package.json

@@ -1,36 +1,35 @@
 {
   "name": "@minpluto/zorn",
+  "version": "0.4.8",
   "author": "SudoVanilla",
+  "displayName": "Zorn",
   "description": "In-House Player built by MinPluto",
-  "repository": {
-    "url": "https://codeberg.org/MinPluto/Zorn"
-  },
-  "homepage": "https://codeberg.org/MinPluto/Zorn",
+  "homepage": "https://studio.sudovanilla.org/",
+  "repository": {"url": "https://ark.sudovanilla.org/MinPluto/Zorn"},
+  "bugs": {"url": "https://ark.sudovanilla.org/MinPluto/Zorn/issues/"},
+  "type": "module",
+  "exports": {".": "./index.ts"},
+  "files": ["index.ts","src/*"],
+  "publishConfig": {"access": "public"},
   "keywords": [
     "astro-component",
     "withastro",
     "video",
     "player",
+    "hls",
     "hls-support",
-    "live-streaming"
+    "live-streaming",
+    "ambient",
+    "player",
+    "video-player",
+    "m3u8",
+    "subtitle",
+    "dash",
+    "streaming",
+    "playback"
   ],
-  "type": "module",
-  "version": "0.4.73",
-  "exports": {
-    ".": "./index.ts"
-  },
-  "files": [
-    "index.ts",
-    "src/*"
-  ],
-  "publishConfig": {
-    "access": "public"
-  },
-  "dependencies": {
-    "astro": "^4.14.2"
-  },
   "scripts": {
-    "publish": "npm publish && npm publish --registry https://npm.sudovanilla.org/",
+    "publish": "bun publish && bun publish --registry https://npm.sudovanilla.org/",
     "test": "cd test/ && bun start"
   }
 }

src/Controls.astro

@@ -4,6 +4,7 @@ const {
     Title,
     Live,
     ShowBackAndForward,
+    ShowPlaybackRate,
     SeekColor = '#2185d0',
     PlayerName,
     Subtitles
@@ -72,6 +73,7 @@ import './Styles/Iconoir.css'
             <!-- The requestPictureInPicture() function is not supported in Firefox -->
             <button id="vc-pip" onclick={'document.querySelector("#zorn-player-' + PlayerName + ' video").requestPictureInPicture()'}><i class="iconoir-multi-window"></i></button>
             {Subtitles ? <button id="vc-subtitles"><i class="iconoir-closed-captions-tag-solid"></i></button> : null}
+            {ShowPlaybackRate ? <button onclick="PlayerMenu_PlaybackRate()"><i class="iconoir-timer-solid"></i></button> : null}
             <button id="vc-fullscreen"><i class="iconoir-enlarge"></i></button>
         </div>
     </div>

src/Controls/Controller.astro

@@ -36,41 +36,20 @@ var VideoContainer = document.querySelector('#zorn-player-' + PlayerName)
 var VideoControls = document.querySelector('#zorn-player-' + PlayerName + ' .video-controls')
 var Player = document.querySelector('#zorn-player-' + PlayerName + ' video')
 
-// Big Present Button
-function BigPresentButton() {
-  if (BigPlayButton === true) {
-    VideoControls.style.opacity = '0'
-    VideoControls.style.pointerEvents = 'none'
-  } else {
-    null
-  }
-
-  const Button_BigPresentButton = document.querySelector("#zorn-player-" + PlayerName + " .big-present-button")
-  Button_BigPresentButton.onclick = BigButtonClicked
-
-  function BigButtonClicked() {
-    Button_BigPresentButton.style.opacity = '0'
-    Button_BigPresentButton.style.pointerEvents = 'none'
-    VideoControls.style.opacity = '1'
-    VideoControls.style.pointerEvents = 'all'
-    Player.play()
-  }
-}
-
 // Icons
-var play_solid_default = '<?xml version="1.0" encoding="UTF-8"?><svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#ffffff" stroke-width="1.5"><path d="M6.90588 4.53682C6.50592 4.2998 6 4.58808 6 5.05299V18.947C6 19.4119 6.50592 19.7002 6.90588 19.4632L18.629 12.5162C19.0211 12.2838 19.0211 11.7162 18.629 11.4838L6.90588 4.53682Z" fill="#ffffff" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>';
-var pause_solid_default = '<?xml version="1.0" encoding="UTF-8"?><svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#ffffff" stroke-width="1.5" data-darkreader-inline-color="" style="--darkreader-inline-color: #e8e6e3;"><path d="M6 18.4V5.6C6 5.26863 6.26863 5 6.6 5H9.4C9.73137 5 10 5.26863 10 5.6V18.4C10 18.7314 9.73137 19 9.4 19H6.6C6.26863 19 6 18.7314 6 18.4Z" fill="#ffffff" stroke="#ffffff" stroke-width="1.5" data-darkreader-inline-fill="" data-darkreader-inline-stroke="" style="--darkreader-inline-fill: #ffffff; --darkreader-inline-stroke: #ffffff;"></path><path d="M14 18.4V5.6C14 5.26863 14.2686 5 14.6 5H17.4C17.7314 5 18 5.26863 18 5.6V18.4C18 18.7314 17.7314 19 17.4 19H14.6C14.2686 19 14 18.7314 14 18.4Z" fill="#ffffff" stroke="#ffffff" stroke-width="1.5" data-darkreader-inline-fill="" data-darkreader-inline-stroke="" style="--darkreader-inline-fill: #ffffff; --darkreader-inline-stroke: #ffffff;"></path></svg>';
+var play_solid_default = '<svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#ffffff" stroke-width="1.5"><path d="M6.90588 4.53682C6.50592 4.2998 6 4.58808 6 5.05299V18.947C6 19.4119 6.50592 19.7002 6.90588 19.4632L18.629 12.5162C19.0211 12.2838 19.0211 11.7162 18.629 11.4838L6.90588 4.53682Z" fill="#ffffff" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>';
+var pause_solid_default = '<svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#ffffff" stroke-width="1.5" data-darkreader-inline-color="" style="--darkreader-inline-color: #e8e6e3;"><path d="M6 18.4V5.6C6 5.26863 6.26863 5 6.6 5H9.4C9.73137 5 10 5.26863 10 5.6V18.4C10 18.7314 9.73137 19 9.4 19H6.6C6.26863 19 6 18.7314 6 18.4Z" fill="#ffffff" stroke="#ffffff" stroke-width="1.5" data-darkreader-inline-fill="" data-darkreader-inline-stroke="" style="--darkreader-inline-fill: #ffffff; --darkreader-inline-stroke: #ffffff;"></path><path d="M14 18.4V5.6C14 5.26863 14.2686 5 14.6 5H17.4C17.7314 5 18 5.26863 18 5.6V18.4C18 18.7314 17.7314 19 17.4 19H14.6C14.2686 19 14 18.7314 14 18.4Z" fill="#ffffff" stroke="#ffffff" stroke-width="1.5" data-darkreader-inline-fill="" data-darkreader-inline-stroke="" style="--darkreader-inline-fill: #ffffff; --darkreader-inline-stroke: #ffffff;"></path></svg>';
 var PlayIcon = play_solid_default;
 var PauseIcon = pause_solid_default;
 
-var fullscreen_solid_default = '<?xml version="1.0" encoding="UTF-8"?><svg width="24px" height="24px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#ffffff"><path d="M15 9L20 4M20 4V8M20 4H16" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M9 15L4 20M4 20V16M4 20H8" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>'
-var exit_fullscreen_solid_default = '<?xml version="1.0" encoding="UTF-8"?><svg width="24px" height="24px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#ffffff"><path d="M4 20L9 15M9 15V19M9 15H5" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M20 4L15 9M15 9V5M15 9H19" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>'
+var fullscreen_solid_default = '<svg width="24px" height="24px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#ffffff"><path d="M15 9L20 4M20 4V8M20 4H16" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M9 15L4 20M4 20V16M4 20H8" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>'
+var exit_fullscreen_solid_default = '<svg width="24px" height="24px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#ffffff"><path d="M4 20L9 15M9 15V19M9 15H5" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M20 4L15 9M15 9V5M15 9H19" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>'
 var FullscreenIcon = fullscreen_solid_default
 var ExitFullscreenIcon = exit_fullscreen_solid_default
 
 // Fullscreen
 function Fullscreen() {
-  // Get Fullscreen Button
+  // Get Button
   const Button_Fullscreen = document.querySelector("#zorn-player-" + PlayerName + " #vc-fullscreen");
 
   // Create and Call Functions
@@ -102,7 +81,7 @@ function Fullscreen() {
     Update_FullscreenButton();
   }
 
-  // Button Event Listener
+  // Event Listener
   Button_Fullscreen.onclick = Toggle_Fullscreen;
   function Update_FullscreenButton() {
     if (document.fullscreenElement) {
@@ -120,7 +99,7 @@ function Fullscreen() {
     Update_FullscreenButton()
   });
 
-  // Keyboard Shortcuts
+  // Keyboard Shortcut
   var FullscreenHotkey = 'f'
   function FullscreenKS(event) {const { key } = event;if (key === FullscreenHotkey) {Toggle_Fullscreen()}}
   document.addEventListener("keyup", FullscreenKS);
@@ -128,7 +107,11 @@ function Fullscreen() {
 
 // Play/Pause
 function PlayPause() {
+  // Get Buttons
   const Button_PlayPause = document.querySelector("#zorn-player-" + PlayerName + " .video-controls #vc-playpause");
+  var Button_BigPresentButton = document.querySelector("#zorn-player-" + PlayerName + " .big-present-button")
+
+  // Event Listern
   Button_PlayPause.addEventListener("click", Toggle_PlayPause);
   Player.addEventListener("click", Toggle_PlayPause);
   Player.addEventListener("play", Update_PlayPauseButton);
@@ -140,6 +123,8 @@ function PlayPause() {
       Player.pause();
     }
   }
+
+  // Update Button
   function Update_PlayPauseButton() {
     if (Player.paused) {
       Button_PlayPause.setAttribute("data-title", "Play (K)");
@@ -149,23 +134,71 @@ function PlayPause() {
       Button_PlayPause.innerHTML = `${PauseIcon}`;
     }
   }
+
+  // Keyboard Shortcut
+  var FullscreenHotkey = 'k'
+  function PlayPauseKS(event) {const { key } = event;if (key === FullscreenHotkey) {
+    Toggle_PlayPause();
+    Update_PlayPauseButton();
+    // If Big Present Button is still presented
+    if (BigPlayButton === true) {
+      VideoControls.style.opacity = '1'
+      VideoControls.style.pointerEvents = 'all'
+      Button_BigPresentButton.style.display = 'none'
+    }
+  }}
+  document.addEventListener("keyup", PlayPauseKS);
+
+  ////////////////////////
+  // Big Present Button //
+  ////////////////////////
+  // Check if the option is enabled
+  if (BigPlayButton === true) {
+    VideoControls.style.opacity = '0'
+    VideoControls.style.pointerEvents = 'none'
+
+    // Event Listern
+    Button_BigPresentButton.onclick = BigButtonClicked
+  }
+
+  function BigButtonClicked() {
+    Button_BigPresentButton.style.opacity = '0'
+    Button_BigPresentButton.style.pointerEvents = 'none'
+    VideoControls.style.opacity = '1'
+    VideoControls.style.pointerEvents = 'all'
+    Player.play()
+  }
 }
 
 // Skip Around
 function SkipAround() {
-  const Button_SkipBack = document.querySelector("#zorn-player-" + PlayerName + " .video-controls #vc-backwards");
-  const Button_SkipForth = document.querySelector("#zorn-player-" + PlayerName + " .video-controls #vc-forwards");
-  Button_SkipBack.addEventListener("click", Toggle_SkipBack);
-  Button_SkipForth.addEventListener("click", Toggle_SkipForth);
-  function Toggle_SkipBack() {
-    Skip(-10);
+  // Get Buttins
+  if (ShowBackAndForward === true) {
+    var Button_SkipBack = document.querySelector("#zorn-player-" + PlayerName + " .video-controls #vc-backwards")
+    var Button_SkipForth = document.querySelector("#zorn-player-" + PlayerName + " .video-controls #vc-forwards")
   }
-  function Toggle_SkipForth() {
-    Skip(10);
-  }
-  function Skip(value) {
-    Player.currentTime += value;
+
+  // Event Listener
+  if (ShowBackAndForward === true) {
+    Button_SkipBack.addEventListener("click", Toggle_SkipBack);
+    Button_SkipForth.addEventListener("click", Toggle_SkipForth);
   }
+
+  // Functions
+  function Toggle_SkipBack() {Skip(-10)}
+  function Toggle_SkipForth() {Skip(10)}
+  function Skip(value) {Player.currentTime += value}
+
+  // Keyboard Shortcuts
+  var SkipBackHotkey = 'j'
+  function SkipBackKS(event) {const { key } = event
+  if (key === SkipBackHotkey) {Toggle_SkipBack()}}
+  document.addEventListener("keyup", SkipBackKS)
+
+  var SkipForwardHotkey = 'l'
+  function SkipForwardKS(event) {const { key } = event
+  if (key === SkipForwardHotkey) {Toggle_SkipForth()}}
+  document.addEventListener("keyup", SkipForwardKS)
 }
 
 // Gestures (Click / Double-click)
@@ -264,60 +297,15 @@ function AutoToggleControls() {
   };
 }
 
-// Keyboard Shortcuts
-function KeyboardShortcuts(events) {
-  if (Player.hasAttribute("keyboard-shortcut-fullscreen")) {
-    var Fullscreen_KeyboardShortcut = Player.getAttribute("keyboard-shortcut-fullscreen");
-  } else {
-    var Fullscreen_KeyboardShortcut = "f";
-  }
-  if (Player.hasAttribute("keyboard-shortcut-mute")) {
-    var Mute_KeyboardShortcut = Player.getAttribute("keyboard-shortcut-mute");
-  } else {
-    var Mute_KeyboardShortcut = "m";
-  }
-  if (Player.hasAttribute("keyboard-shortcut-playpause")) {
-    var PlayPause_KeyboardShortcut = Player.getAttribute("keyboard-shortcut-playpause");
-  } else {
-    var PlayPause_KeyboardShortcut = "k";
-  }
-  if (Player.hasAttribute("keyboard-shortcut-skipback")) {
-    var SkipBack_KeyboardShortcut = Player.getAttribute("keyboard-shortcut-skipback");
-  } else {
-    var SkipBack_KeyboardShortcut = "j";
-  }
-  if (Player.hasAttribute("keyboard-shortcut-skipforth")) {
-    var SkipForth_KeyboardShortcut = Player.getAttribute("keyboard-shortcut-skipforth");
-  } else {
-    var SkipForth_KeyboardShortcut = "l";
-  }
+// Keyboard Shortcuts (Toggle Mute)
+function KeyboardShortcuts() {
   function keyboardShortcuts(event) {
     const { key } = event;
-    if (key === PlayPause_KeyboardShortcut) {
-      if (Player.paused || Player.ended) {
-        Player.play();
-      } else {
-        Player.pause();
-      }
-      if (Player.paused) {
-        Show_Controls();
-      } else {
-        setTimeout(() => {
-          Hide_Controls();
-        }, 1200);
-      }
-    } else if (key === Mute_KeyboardShortcut) {
+    var Mute_KeyboardShortcut = "m";
+    if (key === Mute_KeyboardShortcut) {
       Player.muted = !Player.muted;
-      if (Player.muted) {
-        volume.setAttribute("data-volume", volume.value);
-        volume.value = 0;
-      } else {
-        volume.value = volume.dataset.volume;
-      }
-    } else if (key === SkipBack_KeyboardShortcut) {
-      Player.currentTime += -10;
-    } else if (key === SkipForth_KeyboardShortcut) {
-      Player.currentTime += 10;
+      if (Player.muted) {volume.setAttribute("data-volume", volume.value);volume.value = 0;}
+      else {volume.value = volume.dataset.volume;}
     }
   }
   document.addEventListener("keyup", keyboardShortcuts);
@@ -333,9 +321,8 @@ function PlayAgain() {
     document.querySelector("#zorn-player-" + PlayerName + " #vc-playagain").style.display = 'inherit'
   }
   document.querySelector('#vc-playagain').onclick = PlayItAgain
-}
 
-function PlayItAgain() {
+  function PlayItAgain() {
     document.querySelector("#zorn-player-" + PlayerName + " .vc-start").style.opacity = '1'
     document.querySelector("#zorn-player-" + PlayerName + " .vc-start").style.pointerEvents = 'all'
     document.querySelector("#zorn-player-" + PlayerName + " .vc-center").style.opacity = '1'
@@ -345,15 +332,15 @@ function PlayItAgain() {
     Player.pause();
     Player.currentTime = '0';
     Player.play();
+  }
 }
 
-// Init All Functions
+// Init Functions
 AutoToggleControls()
-if (BigPlayButton === true) {BigPresentButton()} else {null}
 Fullscreen()
 Gestures()
 KeyboardShortcuts()
 PlayPause()
-if (ShowBackAndForward === true) {SkipAround()} else {null}
+SkipAround()
 PlayAgain()
 </script>

src/Controls/Sync.astro

@@ -31,7 +31,7 @@ const {
  * for the JavaScript code in this page.
  *
  */
-// https://gist.github.com/michancio/59b9f3dc54b3ff4f6a84
+// https://gist.sudovanilla.org/Korbs/sync-video-and-audio
 // Find elements
 var SyncVideo = document.querySelector("#zorn-player-" + PlayerName + " .main-video")
 var SyncAudio = document.querySelector("#zorn-player-" + PlayerName + " .main-audio")

src/Features/Milieu.astro

@@ -53,6 +53,7 @@ const {
  * for the JavaScript code in this page.
  *
  */
+//https://gist.sudovanilla.org/Korbs/ambient-video-effect
 var Player = document.querySelector('#zorn-player-' + PlayerName + ' video')
 var FirstCanvas = document.getElementById("zorn-canvas-1")
 var SecondCanvas = document.getElementById("zorn-canvas-2")

src/Styles/Index.scss

@@ -337,6 +337,11 @@
     }
 }
 
+#playback-rate {
+    flex-direction: row;
+    min-width: 100px;
+}
+
 button#has-switch svg {
     width: 24px;
 }

test/src/pages/index.astro

@@ -16,6 +16,7 @@ import {Zorn} from '@minpluto/zorn'
 		SettingsMenu
 		Whitelabel
 		BigPlayButton
+		ShowPlaybackRate
 		Subtitles
 	>
 		<slot slot="menu">

tsconfig.json

@@ -4,6 +4,13 @@
     "index.ts"
   ],
   "compilerOptions": {
-    "jsx": "react"
+    "lib": ["ESNext"],
+    "target": "ESNext",
+    "module": "ESNext",
+    "jsx": "react-jsx",
+    "allowJs": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "noFallthroughCasesInSwitch": true,
   }
 }