Video: Update to VidstackPlayer library

Demos/Blazorise.Demo/Pages/Tests/VideoPage.razor

@@ -16,31 +16,50 @@
                     <Button Color="Color.Primary" Clicked="@(()=>videoRef.Stop())">
                         <Icon Name="IconName.Stop" />
                     </Button>
+                    <Button Color="Color.Primary" Clicked="@(()=>videoRef.TogglePlay())">
+                        <Icon Name="IconName.PlayCircle" />
+                    </Button>
                 </Buttons>
                 <Button Color="Color.Primary" Clicked="@OnChangeVideoUrl">Change Video</Button>
                 <Button Color="Color.Primary" Clicked="@OnChangeCurrentTime">Go to 20 seconds</Button>
-                <Button Color="Color.Secondary" Clicked="@OnChangeQuality">Change Quality to 1080</Button>
             </CardBody>
             <CardBody>
-                <Video @ref="@videoRef" Source="@videoSource" CurrentTime="@currentTime" DefaultQuality="@quality" />
+                <Video @ref="@videoRef" Source="@videoSource" Thumbnails="https://files.vidstack.io/sprite-fight/thumbnails.vtt" CurrentTime="@currentTime" DefaultQuality="@defaultQuality" />
             </CardBody>
         </Card>
     </Column>
 </Row>
 @code {
     Video videoRef;
+    // VideoSource videoSource = new VideoSource()
+    // {
+    //     Medias = new ValueEqualityList<VideoMedia>
+    //     {
+    //         new VideoMedia("https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4", "video/mp4", 1024, 576),
+    //         new VideoMedia("https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4", "video/mp4", 1280, 720),
+    //         new VideoMedia("https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1080p.mp4", "video/mp4", 1920, 1080),
+    //     },
+    //     Tracks = new ValueEqualityList<VideoTrack>
+    //     {
+    //         new VideoTrack("_content/Blazorise.Demo/subtitles/View_From_A_Blue_Moon_Trailer-HD.en.vtt", "en-US"){ Kind = "subtitles", Label = "English", Default = true },
+    //         new VideoTrack("_content/Blazorise.Demo/subtitles/View_From_A_Blue_Moon_Trailer-HD.fr.vtt", "fr-FR"){ Kind = "subtitles", Label = "French" },
+    //     }
+    // };
     VideoSource videoSource = new VideoSource()
     {
         Medias = new ValueEqualityList<VideoMedia>
         {
-            new VideoMedia("https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4", "video/mp4", 576),
-            new VideoMedia("https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4", "video/mp4", 720),
-            new VideoMedia("https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1080p.mp4", "video/mp4", 1080),
+            new VideoMedia("https://files.vidstack.io/sprite-fight/720p.mp4", "video/mp4", 1280, 720),
+        },
+        Tracks = new ValueEqualityList<VideoTrack>
+        {
+            new VideoTrack("_content/Blazorise.Demo/subtitles/sprite-fight.en.vtt", "en-US"){ Kind = "subtitles", Label = "English", Default = true },
+            new VideoTrack("_content/Blazorise.Demo/subtitles/sprite-fight.es.vtt", "es-ES"){ Kind = "subtitles", Label = "Spanish" },
         }
     };
 
     double currentTime = 10;
-    int quality = 576;
+    int defaultQuality = 720;
 
     Task OnChangeVideoUrl()
     {
@@ -56,11 +75,4 @@
 
         return Task.CompletedTask;
     }
-
-    Task OnChangeQuality()
-    {
-        quality = 1080;
-
-        return Task.CompletedTask;
-    }
 }

Demos/Blazorise.Demo/wwwroot/chapters/sprite-fight.vtt

@@ -0,0 +1,31 @@
+WEBVTT
+
+00:00 --> 01:13
+The Forest
+
+01:13 --> 02:31
+Camp Site
+
+02:31 --> 03:57
+The Sprites
+
+03:57 --> 04:10
+Campfire
+
+04:10 --> 07:01
+Escape
+
+07:01 --> 07:50
+Eat Salt!
+
+07:50 --> 08:21
+Motacilla Flava
+
+08:21 --> 08:43
+Tree Bridge
+
+08:43 --> 09:14
+March Home
+
+09:14 --> 10:29
+Credits

Demos/Blazorise.Demo/wwwroot/subtitles/View_From_A_Blue_Moon_Trailer-HD.en.vtt

@@ -0,0 +1,29 @@
+WEBVTT FILE
+
+1
+00:00:09.500 --> 00:00:12.000
+The ocean floor rises 5 miles to the shores
+
+2
+00:00:12.001 --> 00:00:16.500
+of what people call, the seven mile miracle
+
+3
+00:00:25.500 --> 00:00:28.000
+What would it be like to be born on this island?
+
+4
+00:00:32.500 --> 00:00:34.500
+To grow up on these shores
+
+5
+00:00:37.500 --> 00:00:40.000
+To witness this water, every day
+
+6
+00:00:43.500 --> 00:00:46.000
+You're about to meet someone, who did
+
+7
+00:02:45.500 --> 00:02:49.000
+This is a film about John John Florence

Demos/Blazorise.Demo/wwwroot/subtitles/View_From_A_Blue_Moon_Trailer-HD.fr.vtt

@@ -0,0 +1,29 @@
+WEBVTT FILE
+
+1
+00:00:09.500 --> 00:00:12.000
+Le fond de l'océan monte 5 miles des rives
+
+2
+00:00:12.001 --> 00:00:16.500
+de ce que les gens appellent le miracle de sept mile
+
+3
+00:00:25.500 --> 00:00:28.000
+Que serait-il d'être né sur cette île?
+
+4
+00:00:32.500 --> 00:00:34.500
+Pour grandir sur ces rivages
+
+5
+00:00:37.500 --> 00:00:40.000
+Pour assister à cette eau, tous les jours
+
+6
+00:00:43.500 --> 00:00:46.000
+Vous êtes sur le point de rencontrer quelqu'un, qui ne
+
+7
+00:02:45.500 --> 00:02:49.000
+Ceci est un film sur John John Florence