From 2e8d41d997f5d6c38d3a86527fdf7bf64328869d Mon Sep 17 00:00:00 2001
From: Korbs <korbs@sudovanilla.org>
Date: Sat, 30 Nov 2024 23:23:44 -0500
Subject: [PATCH] Add Subtitles option to Player

---
 src/Player.astro | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/Player.astro b/src/Player.astro
index dd4ac1f..d1fd14c 100644
--- a/src/Player.astro
+++ b/src/Player.astro
@@ -10,6 +10,7 @@ const {
     Audio,
     VideoAttributes,
     AudioAttributes,
+    Subtitles,
 
     ShowBackAndForward,
     BigPlayButton = false,
@@ -35,6 +36,7 @@ import Controls from './Controls.astro'
 import MilieuEffect from './Features/Milieu.astro'
 import Controller from './Controls/Controller.astro'
 import Seek from './Controls/Seek.astro'
+import SubtitlesMenu from './Controls/Subtitles.astro'
 import Sync from './Controls/Sync.astro'
 
 // YouTube
@@ -57,7 +59,9 @@ import './Styles/Iconoir.css'
 ---
 
 <div class="video-container" id={"zorn-player-" + PlayerName}>
-    <video class="main-video" {VideoAttributes} disableremoteplayback src={YouTube ? YTVideo : Video} poster={YouTube ? YTThumbnail : Poster} preload="auto"></video>
+    <video class="main-video" {VideoAttributes} disableremoteplayback src={YouTube ? YTVideo : Video} poster={YouTube ? YTThumbnail : Poster} preload="auto">
+        <slot name="subtitles"></slot>
+    </video>
     {Audio ? <audio class="main-audio"><source {AudioAttributes} src={YouTube ? YTAudio : Audio} type="audio/mp3"/></audio> : null }
     {Audio ? <Sync PlayerName={PlayerName}/> : null }
     {Milieu ?
@@ -77,8 +81,8 @@ import './Styles/Iconoir.css'
         null
     }
     {SettingsMenu ?
-        <Controls ShowBackAndForward={ShowBackAndForward} PlayerName={PlayerName} Live={Live}>
-            <button id="open-zorn-settings-button" onclick="OpenZornMenu()"><i class="iconoir-settings"></i></button>
+        <Controls Subtitles={Subtitles} ShowBackAndForward={ShowBackAndForward} PlayerName={PlayerName} Live={Live}>
+            <button id="open-zorn-settings-button" onclick="OpenZornMenu()"><svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M17.5247 6.7448L18.6224 9.3954L21 10L20.9999 11.9772L18.6139 12.598L17.5159 15.2494L19 17L17 19C17 19 15.6969 17.8313 15.2551 17.5155L12.6045 18.6132L12 21H10L9.397 18.6123L6.79116 17.5403L5 19L3 17L4.51575 15.2997L3.40111 12.6555L1 12V10L3.3725 9.4463L4.45337 6.78885L3 5L5 3L6.70441 4.51596L9.3491 3.40113L9.981 1H11.9353L12.5578 3.36974L15.2647 4.48295L17 3L19 5L17.5247 6.7448ZM11 6C8.23853 6 6 8.23853 6 11C6 13.7615 8.23853 16 11 16C13.7615 16 16 13.7615 16 11C16 8.23853 13.7615 6 11 6ZM10 11C10 10.4477 10.4477 10 11 10C11.5523 10 12 10.4477 12 11C12 11.5523 11.5523 12 11 12C10.4477 12 10 11.5523 10 11Z" fill="white"/><path d="M18.6224 9.3954L17.9295 9.68236C18.02 9.90092 18.2083 10.064 18.4376 10.1223L18.6224 9.3954ZM17.5247 6.7448L16.952 6.26055C16.7708 6.47487 16.7244 6.77245 16.8318 7.03176L17.5247 6.7448ZM21 10L21.75 10C21.75 9.657 21.5173 9.35767 21.1848 9.27313L21 10ZM20.9999 11.9772L21.1888 12.703C21.5192 12.6171 21.7499 12.3187 21.7499 11.9772L20.9999 11.9772ZM18.6139 12.598L18.425 11.8722C18.1975 11.9314 18.0109 12.0938 17.921 12.311L18.6139 12.598ZM17.5159 15.2494L16.823 14.9624C16.7154 15.2221 16.7621 15.52 16.9438 15.7344L17.5159 15.2494ZM19 17L19.5303 17.5303C19.8063 17.2543 19.8245 16.8127 19.5721 16.515L19 17ZM17 19L16.4992 19.5583C16.7958 19.8243 17.2486 19.812 17.5303 19.5303L17 19ZM15.2551 17.5155L15.6912 16.9053C15.4806 16.7548 15.2073 16.7235 14.9681 16.8226L15.2551 17.5155ZM12.6045 18.6132L12.3175 17.9203C12.0987 18.0109 11.9356 18.1995 11.8775 18.4291L12.6045 18.6132ZM12 21V21.75C12.3433 21.75 12.6428 21.5169 12.727 21.1841L12 21ZM10 21L9.27283 21.1836C9.35693 21.5167 9.65652 21.75 10 21.75V21ZM9.397 18.6123L10.1242 18.4287C10.066 18.1983 9.90208 18.0091 9.68234 17.9187L9.397 18.6123ZM6.79116 17.5403L7.0765 16.8467C6.82203 16.742 6.53066 16.7851 6.31736 16.9589L6.79116 17.5403ZM5 19L4.46967 19.5303C4.74173 19.8024 5.17554 19.8245 5.4738 19.5814L5 19ZM3 17L2.44016 16.5009C2.17563 16.7977 2.18858 17.2492 2.46967 17.5303L3 17ZM4.51575 15.2997L5.07559 15.7988C5.2682 15.5827 5.31929 15.2751 5.20686 15.0084L4.51575 15.2997ZM3.40111 12.6555L4.09222 12.3642C4.00276 12.152 3.82079 11.9926 3.59863 11.932L3.40111 12.6555ZM1 12H0.25C0.25 12.3381 0.476274 12.6345 0.802479 12.7235L1 12ZM1 10L0.829544 9.26963C0.490118 9.34884 0.25 9.65145 0.25 10H1ZM3.3725 9.4463L3.54296 10.1767C3.78004 10.1213 3.97551 9.95438 4.06723 9.72887L3.3725 9.4463ZM4.45337 6.78885L5.1481 7.07142C5.25122 6.8179 5.20805 6.52834 5.03547 6.31592L4.45337 6.78885ZM3 5L2.46967 4.46967C2.19791 4.74143 2.17556 5.17464 2.4179 5.47293L3 5ZM5 3L5.49844 2.43959C5.20166 2.17562 4.75053 2.18881 4.46967 2.46967L5 3ZM6.70441 4.51596L6.20597 5.07637C6.42202 5.26853 6.72929 5.31938 6.99574 5.20707L6.70441 4.51596ZM9.3491 3.40113L9.64043 4.09224C9.85486 4.00185 10.0152 3.81705 10.0744 3.59201L9.3491 3.40113ZM9.981 1V0.25C9.6403 0.25 9.3424 0.479642 9.2557 0.809123L9.981 1ZM11.9353 1L12.6607 0.809449C12.5741 0.479808 12.2761 0.25 11.9353 0.25V1ZM12.5578 3.36974L11.8324 3.56029C11.8921 3.78771 12.0551 3.97394 12.2725 4.06337L12.5578 3.36974ZM15.2647 4.48295L14.9794 5.17658C15.2397 5.28362 15.538 5.23595 15.752 5.05311L15.2647 4.48295ZM17 3L17.5303 2.46967C17.2535 2.19285 16.8104 2.17551 16.5127 2.42984L17 3ZM19 5L19.5727 5.48425C19.8245 5.18647 19.8061 4.74542 19.5303 4.46967L19 5ZM19.3153 9.10844L18.2176 6.45784L16.8318 7.03176L17.9295 9.68236L19.3153 9.10844ZM21.1848 9.27313L18.8072 8.66853L18.4376 10.1223L20.8152 10.7269L21.1848 9.27313ZM21.7499 11.9772L21.75 10L20.25 9.99996L20.2499 11.9772L21.7499 11.9772ZM18.8027 13.3238L21.1888 12.703L20.8111 11.2514L18.425 11.8722L18.8027 13.3238ZM18.2088 15.5364L19.3068 12.885L17.921 12.311L16.823 14.9624L18.2088 15.5364ZM19.5721 16.515L18.088 14.7644L16.9438 15.7344L18.4279 17.485L19.5721 16.515ZM17.5303 19.5303L19.5303 17.5303L18.4697 16.4697L16.4697 18.4697L17.5303 19.5303ZM14.819 18.1257C15.0044 18.2582 15.411 18.6026 15.8008 18.9419C15.989 19.1057 16.1639 19.26 16.2918 19.3735C16.3557 19.4302 16.4077 19.4766 16.4437 19.5087C16.4617 19.5248 16.4757 19.5373 16.4851 19.5457C16.4898 19.5499 16.4934 19.5531 16.4958 19.5553C16.497 19.5563 16.4979 19.5571 16.4985 19.5576C16.4987 19.5579 16.4989 19.5581 16.4991 19.5582C16.4991 19.5583 16.4992 19.5583 16.4992 19.5583C16.4992 19.5583 16.4992 19.5583 16.4992 19.5583C16.4992 19.5583 16.4992 19.5583 17 19C17.5008 18.4417 17.5007 18.4416 17.5007 18.4416C17.5007 18.4416 17.5007 18.4416 17.5007 18.4416C17.5006 18.4415 17.5005 18.4415 17.5004 18.4414C17.5003 18.4412 17.5 18.441 17.4997 18.4407C17.499 18.4401 17.498 18.4392 17.4967 18.438C17.4941 18.4357 17.4903 18.4323 17.4854 18.4279C17.4755 18.4191 17.4611 18.4061 17.4426 18.3896C17.4056 18.3566 17.3524 18.3092 17.2872 18.2514C17.157 18.1359 16.9784 17.9783 16.7857 17.8105C16.4134 17.4865 15.9476 17.0886 15.6912 16.9053L14.819 18.1257ZM12.8915 19.3061L15.5421 18.2084L14.9681 16.8226L12.3175 17.9203L12.8915 19.3061ZM12.727 21.1841L13.3315 18.7973L11.8775 18.4291L11.273 20.8159L12.727 21.1841ZM10 21.75H12V20.25H10V21.75ZM8.66983 18.7959L9.27283 21.1836L10.7272 20.8164L10.1242 18.4287L8.66983 18.7959ZM6.50582 18.2339L9.11166 19.3059L9.68234 17.9187L7.0765 16.8467L6.50582 18.2339ZM5.4738 19.5814L7.26496 18.1217L6.31736 16.9589L4.5262 18.4186L5.4738 19.5814ZM2.46967 17.5303L4.46967 19.5303L5.53033 18.4697L3.53033 16.4697L2.46967 17.5303ZM3.95591 14.8006L2.44016 16.5009L3.55984 17.4991L5.07559 15.7988L3.95591 14.8006ZM2.71 12.9468L3.82464 15.591L5.20686 15.0084L4.09222 12.3642L2.71 12.9468ZM0.802479 12.7235L3.20359 13.379L3.59863 11.932L1.19752 11.2765L0.802479 12.7235ZM0.25 10V12H1.75V10H0.25ZM3.20204 8.71593L0.829544 9.26963L1.17046 10.7304L3.54296 10.1767L3.20204 8.71593ZM3.75864 6.50628L2.67777 9.16373L4.06723 9.72887L5.1481 7.07142L3.75864 6.50628ZM2.4179 5.47293L3.87127 7.26178L5.03547 6.31592L3.5821 4.52707L2.4179 5.47293ZM4.46967 2.46967L2.46967 4.46967L3.53033 5.53033L5.53033 3.53033L4.46967 2.46967ZM7.20285 3.95555L5.49844 2.43959L4.50156 3.56041L6.20597 5.07637L7.20285 3.95555ZM9.05777 2.71002L6.41308 3.82485L6.99574 5.20707L9.64043 4.09224L9.05777 2.71002ZM9.2557 0.809123L8.6238 3.21025L10.0744 3.59201L10.7063 1.19088L9.2557 0.809123ZM11.9353 0.25H9.981V1.75H11.9353V0.25ZM13.2832 3.17919L12.6607 0.809449L11.2099 1.19055L11.8324 3.56029L13.2832 3.17919ZM15.55 3.78932L12.8431 2.67611L12.2725 4.06337L14.9794 5.17658L15.55 3.78932ZM16.5127 2.42984L14.7774 3.91279L15.752 5.05311L17.4873 3.57016L16.5127 2.42984ZM19.5303 4.46967L17.5303 2.46967L16.4697 3.53033L18.4697 5.53033L19.5303 4.46967ZM18.0974 7.22905L19.5727 5.48425L18.4273 4.51575L16.952 6.26055L18.0974 7.22905ZM6.75 11C6.75 8.65274 8.65274 6.75 11 6.75V5.25C7.82432 5.25 5.25 7.82432 5.25 11H6.75ZM11 15.25C8.65274 15.25 6.75 13.3473 6.75 11H5.25C5.25 14.1757 7.82432 16.75 11 16.75V15.25ZM15.25 11C15.25 13.3473 13.3473 15.25 11 15.25V16.75C14.1757 16.75 16.75 14.1757 16.75 11H15.25ZM11 6.75C13.3473 6.75 15.25 8.65274 15.25 11H16.75C16.75 7.82432 14.1757 5.25 11 5.25V6.75ZM11 9.25C10.0335 9.25 9.25 10.0335 9.25 11H10.75C10.75 10.8619 10.8619 10.75 11 10.75V9.25ZM12.75 11C12.75 10.0335 11.9665 9.25 11 9.25V10.75C11.1381 10.75 11.25 10.8619 11.25 11H12.75ZM11 12.75C11.9665 12.75 12.75 11.9665 12.75 11H11.25C11.25 11.1381 11.1381 11.25 11 11.25V12.75ZM9.25 11C9.25 11.9665 10.0335 12.75 11 12.75V11.25C10.8619 11.25 10.75 11.1381 10.75 11H9.25Z" fill="white"/></svg></button>
 			<div id="settings" class="vc-menu">
                 <slot name="menu"/>
                 {Whitelabel ? <a class="vc-menu-whitelabel" aria-label="Zorn Player Whitelabel" href="https://studio.sudovanilla.org/" target="_blank">Zorn Player</a> : null}
@@ -86,7 +90,7 @@ import './Styles/Iconoir.css'
             <slot name="extra-menus"/>
         </Controls>
         :
-        <Controls ShowBackAndForward={ShowBackAndForward} PlayerName={PlayerName} Live={Live}/>
+        <Controls Subtitles={Subtitles} ShowBackAndForward={ShowBackAndForward} PlayerName={PlayerName} Live={Live}/>
     }
     <Controller PlayerName={PlayerName} BigPlayButton={BigPlayButton}/>
     <Seek PlayerName={PlayerName}/>
@@ -105,4 +109,10 @@ import './Styles/Iconoir.css'
         var VolumeRange = document.querySelector('#zorn-player-' + PlayerName + ' .vc-volume-controller-input input')
         VolumeRange.addEventListener("input", (event) => {Player.volume = event.target.value})
     </script>
+}
+
+{Subtitles ?
+    <SubtitlesMenu PlayerName={PlayerName}/>
+    :
+    null
 }
\ No newline at end of file