Bump

README.md

@@ -128,7 +128,7 @@ By default, these buttons are hidden. If you want to show them, just add the `Sh
 <Zorn ShowBackAndForward/>
 ```
 
-**Settings Menu** - `SettingsMenu`
+**Settings Menu** - `SettingsMenu` [`<slot/>`]
 
 <video title="Settings Menu in action on MinPluto" controls autoplay muted loop src="https://md.sudovanilla.org/videos/webm/Screencast%20from%202024-07-31%2000-44-01.webm"></video>
 
@@ -211,6 +211,23 @@ If you need to add an addition attribute to either the video and/or audio source
 <Zorn VideoAttributes="muted" AudioAttributes={'download="media.ogg"'}/>
 ```
 
+**Subtitles** - `Subtitles` [`<slot/>`]
+
+![Native HTML5 Subtitles (Firefox)](https://md.sudovanilla.org/images/subtitles-example-native-html5.png)
+
+To apply subtitles to the video player, add a slot for tracks and insert HTML5 [`textTracks`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/textTracks). Make sure to set the `label` and `srclang`.
+
+```jsx
+<Zorn Subtitles>
+	<slot slot="subtitles">
+		<track kind="subtitles" src="/subtitles/English.vtt" label="English" srclang="en" />
+		<track kind="subtitles" src="/subtitles/Russian.vtt" label="Russian" srclang="ru" />
+	</slot>
+</Zorn>
+```
+
+When the `Subtitles` option is enabled, a subtitles button will appear automatically in the control on the right side and a menu will be generated for you.
+
 **Milieu** - `Milieu`
 
 The Milieu option is an attempt to copy YouTube's ambient player feature. Where it adds a blurry glow around the player. This uses two `<canvas/>`s behind the player to make a smooth transition when it changes.

TODO.md

@@ -1,5 +1,5 @@
  - [x] Support HLS (HTTP Live Streaming)
- - [ ] Subtitles ([`textTracks`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/textTracks))
+ - [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))

package.json

@@ -15,7 +15,7 @@
     "live-streaming"
   ],
   "type": "module",
-  "version": "0.4.70",
+  "version": "0.4.71",
   "exports": {
     ".": "./index.ts"
   },

src/Controls.astro

@@ -4,7 +4,9 @@ const {
     Title,
     Live,
     ShowBackAndForward,
-    SeekColor = '#2185d0'
+    SeekColor = '#2185d0',
+    PlayerName,
+    Subtitles
 } = Astro.props
 
 // Functions
@@ -68,7 +70,8 @@ import './Styles/Iconoir.css'
             }
             <slot/>
             <!-- The requestPictureInPicture() function is not supported in Firefox -->
-            <button id="vc-pip" onclick="Player.requestPictureInPicture()"><i class="iconoir-multiwindow"></i>/button>
+            <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}
             <button id="vc-fullscreen"><i class="iconoir-enlarge"></i></button>
         </div>
     </div>

src/Controls/Subtitles.astro

@@ -0,0 +1,65 @@
+---
+const {
+    PlayerName
+} = Astro.props
+---
+
+<script is:inline define:vars={{PlayerName}}>
+    var Player = document.querySelector("#zorn-player-" + PlayerName + ' video')
+    var VideoContainer = document.querySelector("#zorn-player-" + PlayerName)
+
+    var subtitleMenuButtons = []
+        var createMenuItem = function(id, lang, label) {
+            var listItem = document.createElement('button')
+            listItem.setAttribute('id', id)
+            listItem.className = 'subtitles-button'
+            if (lang.length > 0) listItem.setAttribute('lang', lang)
+            listItem.value = label
+            listItem.setAttribute('data-state', 'inactive')
+            listItem.appendChild(document.createTextNode(label))
+            listItem.addEventListener('click', function(e) {
+                // Set all buttons to inactive
+                subtitleMenuButtons.map(function(v, i, a) {
+                    subtitleMenuButtons[i].setAttribute('data-state', 'inactive')
+                })
+                // Find the language to activate
+                var lang = this.getAttribute('lang')
+                for (var i = 0; i < Player.textTracks.length; i++) {
+                    // For the 'subtitles-off' button, the first condition will never match so all will subtitles be turned off
+                    if (Player.textTracks[i].language == lang) {
+                        Player.textTracks[i].mode = 'showing'
+                        this.setAttribute('data-state', 'active')
+                    }
+                    else {
+                        Player.textTracks[i].mode = 'hidden'
+                    }
+                }
+                subtitlesMenu.style.display = 'none'
+            })
+            subtitleMenuButtons.push(listItem)
+            return listItem
+        }
+        // Go through each one and build a small clickable list, and when each item is clicked on, set its mode to be "showing" and the others to be "hidden"
+        var subtitlesMenu
+        if (Player.textTracks) {
+            var df = document.createDocumentFragment()
+            var subtitlesMenu = df.appendChild(document.createElement('div'))
+            subtitlesMenu.className = 'vc-menu'
+            subtitlesMenu.id = 'subtitles'
+            subtitlesMenu.appendChild(createMenuItem('subtitles-off', '', 'Off'))
+            for (var i = 0; i < Player.textTracks.length; i++) {
+                subtitlesMenu.appendChild(createMenuItem('subtitles-' + Player.textTracks[i].language, Player.textTracks[i].language, Player.textTracks[i].label))
+            }
+            VideoContainer.appendChild(subtitlesMenu)
+        }
+        document.querySelector("#zorn-player-" + PlayerName + ' .vc-menu#subtitles *').addEventListener('click', function(e) {
+            if (subtitlesMenu) {
+                subtitlesMenu.style.display = (subtitlesMenu.style.display == 'flex' ? 'none' : 'flex')
+            }
+        })
+        document.querySelector("#zorn-player-" + PlayerName + ' #vc-subtitles').addEventListener('click', function(e) {
+            if (subtitlesMenu) {
+                subtitlesMenu.style.display = (subtitlesMenu.style.display == 'flex' ? 'none' : 'flex')
+            }
+        })
+</script>

src/Styles/Index.scss

@@ -268,6 +268,7 @@
     padding: 4px;
     backdrop-filter: blur(12px) contrast(0.6) brightness(0.4);
     -webkit-backdrop-filter: blur(12px) contrast(0.6) brightness(0.4);
+    z-index: 10;
     hr {
         margin: 0px;
         width: 100%;
@@ -285,6 +286,12 @@
         justify-content: space-between;
         font-size: 14px !important;
         min-height: 36px;
+        border: none;
+        color: white;
+        p {
+            margin: 0px !important;
+            margin-top: 4px !important;
+        }
         &:hover {
             background: rgb(95 95 95 / 51%) !important;
         }
@@ -302,6 +309,9 @@
             text-decoration: underline;
         }
     }
+    &#subtitles {
+        min-width: 124px !important;
+    }
 }
 
 button#has-switch svg {

test/public/subtitles/English.vtt

@@ -0,0 +1,350 @@
+WEBVTT
+
+00:00:00.650 --> 00:00:03.030
+[music]
+
+00:00:03.030 --> 00:00:05.220
+[applause]
+
+00:00:05.220 --> 00:00:13.880
+[music] [
+
+00:00:17.060 --> 00:00:20.750
+music]
+
+00:00:20.750 --> 00:00:21.930
+bye [
+
+00:00:21.930 --> 00:00:24.430
+music]
+
+00:00:24.430 --> 00:00:26.460
+
+
+00:00:36.720 --> 00:00:40.380
+why worry, I’m on the mattress
+
+00:00:40.380 --> 00:00:41.540
+[music]
+
+00:00:41.540 --> 00:00:43.040
+[applause] [
+
+00:00:43.040 --> 00:00:46.180
+music]
+
+00:00:47.340 --> 00:00:51.030
+this doesn’t happen here
+
+00:00:56.340 --> 00:00:59.479
+[music]
+
+00:01:01.260 --> 00:01:04.479
+now if she grabs you she won’t
+
+00:01:04.479 --> 00:01:08.130
+catch up with me she ki  she’s old,
+
+00:01:08.130 --> 00:01:11.220
+look at
+
+00:01:13.110 --> 00:01:15.720
+you,
+
+00:01:15.720 --> 00:01:18.370
+I’m buying you myself now
+
+00:01:18.370 --> 00:01:21.579
+[music]
+
+00:01:30.750 --> 00:01:33.970
+what kind of a mess do you have here, it looks like we’re on
+
+00:01:33.970 --> 00:01:36.790
+that full mom, okay, something came
+
+00:01:36.790 --> 00:01:40.090
+and all the water came through the door, you’re like, and I almost
+
+00:01:40.090 --> 00:01:43.420
+drowned, okay, I need to get ready  for
+
+00:01:43.420 --> 00:01:45.939
+grandma's arrival and when you've tidied up,
+
+00:01:45.939 --> 00:01:48.430
+play some quiet game
+
+00:01:48.430 --> 00:01:51.460
+okay mom, we'll clean everything up now and wo
+
+00:01:51.460 --> 00:01:53.259
+n't do this again by the way, have you seen
+
+00:01:53.259 --> 00:01:55.730
+grandma's soft slippers
+
+00:01:55.730 --> 00:01:57.750
+[music] haven't you seen it
+
+00:01:57.750 --> 00:02:01.850
+in years? I
+
+00:02:01.850 --> 00:02:05.460
+don't want to play a quieter game, how boring is it
+
+00:02:05.460 --> 00:02:09.179
+mom?  she said it means we need
+
+00:02:09.179 --> 00:02:12.000
+to help and not upset her,
+
+00:02:12.000 --> 00:02:14.970
+I know one interesting calm game but
+
+00:02:14.970 --> 00:02:18.570
+what but but we will play it if only
+
+00:02:18.570 --> 00:02:20.580
+you swear not to tell anyone I
+
+00:02:20.580 --> 00:02:23.700
+swear why can’t you
+
+00:02:23.700 --> 00:02:25.320
+tell anyone because
+
+00:02:25.320 --> 00:02:28.410
+boys don’t play such games like this
+
+00:02:28.410 --> 00:02:32.450
+how is it considered that she is girly, what is it like
+
+00:02:32.450 --> 00:02:36.720
+for girls, what happens Igor
+
+00:02:36.720 --> 00:02:39.360
+especially for girls, this was
+
+00:02:39.360 --> 00:02:42.209
+lying around, I didn’t notice before that in the
+
+00:02:42.209 --> 00:02:44.630
+girl’s plan, she will see the light
+
+00:02:44.630 --> 00:02:55.130
+[music]
+
+00:02:55.130 --> 00:02:58.890
+she ki, don’t break the children’s bed, otherwise where
+
+00:02:58.890 --> 00:03:01.380
+will your brothers sleep and please
+
+00:03:01.380 --> 00:03:05.930
+sit down for dinner  We’ve been calling you for a long time, something
+
+00:03:07.340 --> 00:03:09.860
+useful,
+
+00:03:09.860 --> 00:03:12.780
+but it’s more reliable, baby, you can
+
+00:03:12.780 --> 00:03:15.090
+order another dish, no, whatever they
+
+00:03:15.090 --> 00:03:19.200
+’ve prepared, eat it for me, but it’s better that
+
+00:03:19.200 --> 00:03:21.390
+I’ll be a dad, who work like this all my life as a
+
+00:03:21.390 --> 00:03:23.600
+child and a
+
+00:03:23.600 --> 00:03:26.150
+dad,
+
+00:03:26.150 --> 00:03:29.730
+the most useful ones for you go to this chicane, it
+
+00:03:29.730 --> 00:03:33.330
+contains a lot of vitamin C and vitamin  to
+
+00:03:33.330 --> 00:03:38.030
+vitamin A and bubbles or nuts that the
+
+00:03:38.030 --> 00:03:40.380
+need to run around is all
+
+00:03:40.380 --> 00:03:43.260
+wrong in the newspaper it’s written mom didn’t
+
+00:03:43.260 --> 00:03:45.830
+
+
+00:03:45.830 --> 00:03:49.710
+come up with it myself and now it’s time for the kids to go to bed
+
+00:03:49.710 --> 00:03:58.790
+[music]
+
+00:03:58.790 --> 00:04:02.220
+dad who puts the kids to bed like that,
+
+00:04:02.220 --> 00:04:05.910
+they’ll have a concussion duo and I
+
+00:04:05.910 --> 00:04:09.390
+think they like it  what kind of friend is the media of the same
+
+00:04:09.390 --> 00:04:11.910
+soul where are all the children who should you play with
+
+00:04:11.910 --> 00:04:13.730
+dear
+
+00:04:13.730 --> 00:04:16.500
+ladies let's go visit our neighbors
+
+00:04:16.500 --> 00:04:20.190
+there will probably be a couple of kids there it's
+
+00:04:20.190 --> 00:04:22.440
+good that the children fell asleep and mom didn't say
+
+00:04:22.440 --> 00:04:24.540
+finally we can have a cup of
+
+00:04:24.540 --> 00:04:26.900
+coffee
+
+00:04:28.350 --> 00:04:35.839
+[music]
+
+00:04:38.090 --> 00:04:40.520
+no
+
+00:04:40.520 --> 00:04:44.310
+it's yours and  not a hat hat yeah but a
+
+00:04:44.310 --> 00:04:45.150
+hat
+
+00:04:45.150 --> 00:04:47.000
+[music] got it
+
+00:04:47.000 --> 00:04:50.330
+win
+
+00:04:50.330 --> 00:04:53.840
+watching the cars you
+
+00:04:53.840 --> 00:04:57.210
+’ll say it’s also girly and you try sewing a
+
+00:04:57.210 --> 00:05:00.720
+telegraph yourself a real man’s job yes yes the
+
+00:05:00.720 --> 00:05:04.169
+girls can’t do it so you know how to
+
+00:05:04.169 --> 00:05:05.720
+sew yourself
+
+00:05:05.720 --> 00:05:08.900
+[music]
+
+00:05:08.900 --> 00:05:11.730
+writing they just came to play with you and
+
+00:05:11.730 --> 00:05:14.430
+you later  come in, our children are sleeping under the
+
+00:05:14.430 --> 00:05:18.200
+cup, well, let it be yours, but it’s quiet,
+
+00:05:18.200 --> 00:05:21.090
+why is it quiet, let’s wake up
+
+00:05:21.090 --> 00:05:23.250
+your game and they will play loudly together,
+
+00:05:23.250 --> 00:05:26.570
+but they just fell asleep,
+
+00:05:26.570 --> 00:05:30.210
+it’s you boys and girls, it’s our
+
+00:05:30.210 --> 00:05:32.090
+twins,
+
+00:05:32.090 --> 00:05:35.870
+why did anyone drink something important, it’s that they have a
+
+00:05:35.870 --> 00:05:38.860
+concussion  brain happened
+
+00:05:38.860 --> 00:05:41.660
+useless of you parents for children
+
+00:05:41.660 --> 00:05:45.250
+ingots and it is necessary and you are sitting here drinking tea, it’s
+
+00:05:45.250 --> 00:05:49.040
+not true but a good family and not the
+
+00:05:49.040 --> 00:05:50.380
+best mother in the world
+
+00:05:50.380 --> 00:05:53.860
+[music]
+
+00:05:53.860 --> 00:05:58.160
+not me very much even without let me pour you
+
+00:05:58.160 --> 00:06:01.220
+some tea and jetta my couple
+
+00:06:01.220 --> 00:06:04.580
+will solve it when  it’s time for me to go home, well, they are harmful
+
+00:06:04.580 --> 00:06:06.790
+,
+
+00:06:10.640 --> 00:06:13.690
+[music]
+
+00:06:14.410 --> 00:06:17.830
+well, that’s it
+
+00:06:21.310 --> 00:06:24.389
+[music] [
+
+00:06:28.690 --> 00:06:49.230
+music]
+
+00:06:49.230 --> 00:06:52.570
+you guys have another flood, I
+
+00:06:52.570 --> 00:06:56.910
+let him out, sorry mom, he started
+
+00:06:56.910 --> 00:06:59.860
+saving our twins again,
+
+00:06:59.860 --> 00:07:03.490
+oh well done, what kind of grandmother’s daddies found
+
+00:07:03.490 --> 00:07:07.650
+she just arrived
+
+00:07:11.310 --> 00:07:14.540
+[  music]
+
+00:07:17.430 --> 00:07:18.940
+boys
+
+00:07:18.940 --> 00:07:39.520
+[music]
+

test/public/subtitles/Russian.vtt

@@ -0,0 +1,352 @@
+WEBVTT
+Kind: captions
+Language: ru
+
+00:00:00.650 --> 00:00:03.030
+[музыка]
+
+00:00:03.030 --> 00:00:05.220
+[аплодисменты]
+
+00:00:05.220 --> 00:00:17.060
+[музыка]
+
+00:00:17.060 --> 00:00:20.750
+[музыка]
+
+00:00:20.750 --> 00:00:21.930
+пока
+
+00:00:21.930 --> 00:00:24.430
+[музыка]
+
+00:00:24.430 --> 00:00:36.720
+а
+
+00:00:36.720 --> 00:00:40.380
+чего волноваться то я же на матрасе
+
+00:00:40.380 --> 00:00:41.540
+[музыка]
+
+00:00:41.540 --> 00:00:43.040
+[аплодисменты]
+
+00:00:43.040 --> 00:00:47.340
+[музыка]
+
+00:00:47.340 --> 00:00:56.340
+тут такого не водится
+
+00:00:56.340 --> 00:01:01.260
+[музыка]
+
+00:01:01.260 --> 00:01:04.479
+сейчас как цапнет тебя она меня не
+
+00:01:04.479 --> 00:01:08.130
+догонит ей ки она же старая
+
+00:01:08.130 --> 00:01:13.110
+посмотри на
+
+00:01:13.110 --> 00:01:15.720
+тебе
+
+00:01:15.720 --> 00:01:18.370
+я тебя сам сейчас покупаю
+
+00:01:18.370 --> 00:01:30.750
+[музыка]
+
+00:01:30.750 --> 00:01:33.970
+что это у вас тут за беспорядок виду у
+
+00:01:33.970 --> 00:01:36.790
+нас по ту full мама хорошо что-то пришло
+
+00:01:36.790 --> 00:01:40.090
+и вся вода через дверь вы типа и я чуть
+
+00:01:40.090 --> 00:01:43.420
+не утонул ну ладно мне надо готовиться к
+
+00:01:43.420 --> 00:01:45.939
+приезду бабушки а вы когда приберетесь
+
+00:01:45.939 --> 00:01:48.430
+поиграйте в какую-нибудь спокойную игру
+
+00:01:48.430 --> 00:01:51.460
+хорошо мам мы сейчас все уберем и больше
+
+00:01:51.460 --> 00:01:53.259
+так не будем кстати вы не видели
+
+00:01:53.259 --> 00:01:55.730
+бабушкина мягкие тапочки
+
+00:01:55.730 --> 00:01:57.750
+[музыка]
+
+00:01:57.750 --> 00:02:01.850
+не лет не видели ли
+
+00:02:01.850 --> 00:02:05.460
+не хочу играть спокойнее игры скукотищу
+
+00:02:05.460 --> 00:02:09.179
+какая яки раз мама сказала значит надо
+
+00:02:09.179 --> 00:02:12.000
+сделать помогли и не расстраивать ее вот
+
+00:02:12.000 --> 00:02:14.970
+я знаю одну интересную спокойную игру но
+
+00:02:14.970 --> 00:02:18.570
+что но но мы в неё поиграем если только
+
+00:02:18.570 --> 00:02:20.580
+ты поклянешься никому они не
+
+00:02:20.580 --> 00:02:23.700
+рассказывать клянусь а почему нельзя
+
+00:02:23.700 --> 00:02:25.320
+никому рассказывать потому что а
+
+00:02:25.320 --> 00:02:28.410
+мальчишки в такие игры не играют как это
+
+00:02:28.410 --> 00:02:32.450
+вроде как считается что она девчачья
+
+00:02:32.450 --> 00:02:36.720
+какая ну для девочек что бывает игорь
+
+00:02:36.720 --> 00:02:39.360
+специально для девочек вот это было
+
+00:02:39.360 --> 00:02:42.209
+валяет его раньше не замечал что в плана
+
+00:02:42.209 --> 00:02:44.630
+девчачьи на свет увидит
+
+00:02:44.630 --> 00:02:55.130
+[музыка]
+
+00:02:55.130 --> 00:02:58.890
+ей ки не ломать детям кровать а то где
+
+00:02:58.890 --> 00:03:01.380
+будут спать твои братики и пожалуйста
+
+00:03:01.380 --> 00:03:07.340
+садись обедать мы тебя уже давно зовем
+
+00:03:07.340 --> 00:03:09.860
+полезное около
+
+00:03:09.860 --> 00:03:12.780
+но надёжней младенец вообще можно
+
+00:03:12.780 --> 00:03:15.090
+заказать другое блюдо нет что
+
+00:03:15.090 --> 00:03:19.200
+приготовили то и ешь мне да вот уж лучше
+
+00:03:19.200 --> 00:03:21.390
+я папой буду которые так всю жизнь
+
+00:03:21.390 --> 00:03:23.600
+ребенком работаю и
+
+00:03:23.600 --> 00:03:26.150
+папой
+
+00:03:26.150 --> 00:03:29.730
+самые полезные к вы идете это шикана
+
+00:03:29.730 --> 00:03:33.330
+много содержится витамин с и витамин к
+
+00:03:33.330 --> 00:03:38.030
+витамин а и пузырики или орешка что
+
+00:03:38.030 --> 00:03:40.380
+необходимость бегать по это все
+
+00:03:40.380 --> 00:03:43.260
+неправильно в газете написано мама не
+
+00:03:43.260 --> 00:03:45.830
+сам же я придумал а
+
+00:03:45.830 --> 00:03:49.710
+теперь малыши пора ложиться спать
+
+00:03:49.710 --> 00:03:58.790
+[музыка]
+
+00:03:58.790 --> 00:04:02.220
+папа кто же так детей спать укладывает у
+
+00:04:02.220 --> 00:04:05.910
+них же сотрясение мозга будет duo а я
+
+00:04:05.910 --> 00:04:09.390
+думаю нравится какая другу сми единой
+
+00:04:09.390 --> 00:04:11.910
+души где все дети с кем тебе поиграть
+
+00:04:11.910 --> 00:04:13.730
+милые
+
+00:04:13.730 --> 00:04:16.500
+дамы к зайдем в гости к нашим соседям
+
+00:04:16.500 --> 00:04:20.190
+там наверняка найдется пара детишек как
+
+00:04:20.190 --> 00:04:22.440
+хорошо что дети уснули и не говорила
+
+00:04:22.440 --> 00:04:24.540
+мама наконец-то можно выпить чашечку
+
+00:04:24.540 --> 00:04:28.350
+кофе
+
+00:04:28.350 --> 00:04:38.090
+[музыка]
+
+00:04:38.090 --> 00:04:40.520
+нет
+
+00:04:40.520 --> 00:04:44.310
+это у тебя и не шляпка шляпка ага а
+
+00:04:44.310 --> 00:04:45.150
+шляпка
+
+00:04:45.150 --> 00:04:47.000
+[музыка]
+
+00:04:47.000 --> 00:04:50.330
+поняла выиграть
+
+00:04:50.330 --> 00:04:53.840
+смотря машин
+
+00:04:53.840 --> 00:04:57.210
+скажешь тоже девчачью а ты попробуй сама
+
+00:04:57.210 --> 00:05:00.720
+сшей телеграф настоящая мужская работа
+
+00:05:00.720 --> 00:05:04.169
+да да девчонкам это не по силам вот ты
+
+00:05:04.169 --> 00:05:05.720
+сама шить на умеешь
+
+00:05:05.720 --> 00:05:08.900
+[музыка]
+
+00:05:08.900 --> 00:05:11.730
+написание к вам поиграть зашли просто а
+
+00:05:11.730 --> 00:05:14.430
+вы попозже заходите наши дети спят под
+
+00:05:14.430 --> 00:05:18.200
+cup ну и пусть она твоя играет но тихо
+
+00:05:18.200 --> 00:05:21.090
+почему это тихо давайте вы разбудите
+
+00:05:21.090 --> 00:05:23.250
+свои дичь и они вместе проиграет громко
+
+00:05:23.250 --> 00:05:26.570
+но они только уснули
+
+00:05:26.570 --> 00:05:30.210
+это у вас мальчики и девочки это у нас
+
+00:05:30.210 --> 00:05:32.090
+близнецы
+
+00:05:32.090 --> 00:05:35.870
+а почему любой выпили важный это у них
+
+00:05:35.870 --> 00:05:38.860
+сотрясение мозга случилось
+
+00:05:38.860 --> 00:05:41.660
+никудышные из вас родителей за детьми
+
+00:05:41.660 --> 00:05:45.250
+слитки и надо а вы тут сидите чай пьете
+
+00:05:45.250 --> 00:05:49.040
+неправда но хорошая семья а и не самая
+
+00:05:49.040 --> 00:05:50.380
+лучшая мама на свете
+
+00:05:50.380 --> 00:05:53.860
+[музыка]
+
+00:05:53.860 --> 00:05:58.160
+не я очень даже без давайте я вам чаю
+
+00:05:58.160 --> 00:06:01.220
+налью немного чай и jetta мой пара
+
+00:06:01.220 --> 00:06:04.580
+порешу когда мне домой пора ну и вредные
+
+00:06:04.580 --> 00:06:10.640
+,
+
+00:06:10.640 --> 00:06:14.410
+[музыка]
+
+00:06:14.410 --> 00:06:21.310
+ну все
+
+00:06:21.310 --> 00:06:28.690
+[музыка]
+
+00:06:28.690 --> 00:06:49.230
+[музыка]
+
+00:06:49.230 --> 00:06:52.570
+ребята у вас что опять потоп я же его
+
+00:06:52.570 --> 00:06:56.910
+выпустила прости мама он опять начался
+
+00:06:56.910 --> 00:06:59.860
+спасти и наших близнецов
+
+00:06:59.860 --> 00:07:03.490
+ай молодцы какие папочки бабушкины нашли
+
+00:07:03.490 --> 00:07:11.310
+она как раз только что приехала
+
+00:07:11.310 --> 00:07:17.430
+[музыка]
+
+00:07:17.430 --> 00:07:18.940
+мальчишки
+
+00:07:18.940 --> 00:07:39.520
+[музыка]
+

test/src/pages/index.astro

@@ -10,12 +10,13 @@ import {Zorn} from '@minpluto/zorn'
 	<Zorn
 		PlayerName="nameit_whatever_you_want"
 		Title="Ennie and Yoyki: Non-Girly Games"
-		Poster="https://ocean.sudovanilla.org/media/videos/Ennie%20and%20Yoyki/Poster.png"
+		Poster="http://192.168.1.172:7731/media/videos/Ennie%20and%20Yoyki/Poster.png"
-		Video="https://ocean.sudovanilla.org/media/videos/Ennie%20and%20Yoyki/Ennie%20and%20Yoyki%3A%20Non-Girly%20Games.mp4"
+		Video="http://192.168.1.172:7731/media/videos/Ennie%20and%20Yoyki/Ennie%20and%20Yoyki%3A%20Non-Girly%20Games.mp4"
 		CustomControlsWithMenu
 		SettingsMenu
 		Whitelabel
 		BigPlayButton
+		Subtitles
 	>
 		<slot slot="menu">
 			<button>Stats for Geeks</button>
@@ -36,6 +37,10 @@ import {Zorn} from '@minpluto/zorn'
 				<button>360p</button>
 			</div>
 		</slot>
+		<slot slot="subtitles">
+			<track kind="subtitles" src="/subtitles/English.vtt" label="English" srclang="en" />
+			<track kind="subtitles" src="/subtitles/Russian.vtt" label="Russian" srclang="ru" />
+		</slot>
 	</Zorn>
 	<slot slot="info">
 		<p>Source: <a href="https://www.youtube.com/watch?v=MuyJtxzyU3o">YouTube</a></p>