From cce6367507efccc23d93c7aaee33c7b2eab23142 Mon Sep 17 00:00:00 2001
From: zhangpeihang <948869991@qq.com>
Date: Mon, 24 Jul 2023 08:06:11 +0800
Subject: [PATCH 1/2] =?UTF-8?q?doc:=20=E9=87=8D=E6=9E=84=20viedoplayer=20?=
 =?UTF-8?q?=E7=A4=BA=E4=BE=8B=E6=96=87=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../VideoPlayers/VideoPlayersChangeURL.razor  | 66 -------------------
 .../VideoPlayers/VideoPlayersNomal.razor      |  8 ---
 src/BootstrapBlazor.Shared/Locales/en.json    | 12 ++--
 src/BootstrapBlazor.Shared/Locales/zh.json    | 12 ++--
 .../Samples/VideoPlayers.razor                | 32 +++++++--
 .../Samples/VideoPlayers.razor.cs             | 48 ++++++++++++++
 6 files changed, 87 insertions(+), 91 deletions(-)
 delete mode 100644 src/BootstrapBlazor.Shared/Demos/VideoPlayers/VideoPlayersChangeURL.razor
 delete mode 100644 src/BootstrapBlazor.Shared/Demos/VideoPlayers/VideoPlayersNomal.razor

diff --git a/src/BootstrapBlazor.Shared/Demos/VideoPlayers/VideoPlayersChangeURL.razor b/src/BootstrapBlazor.Shared/Demos/VideoPlayers/VideoPlayersChangeURL.razor
deleted file mode 100644
index cf2893481..000000000
--- a/src/BootstrapBlazor.Shared/Demos/VideoPlayers/VideoPlayersChangeURL.razor
+++ /dev/null
@@ -1,66 +0,0 @@
-<div class="row g-3">
-    <div class="col-6 col-sm-6 col-md-3 col-xl-auto">
-        <Dropdown TValue="string" Items="Items" OnSelectedItemChanged="@ChangeURL" />
-    </div>
-    <div class="col-6 col-sm-6 col-md-6  col-xl-auto">
-        <BootstrapInput @bind-Value="@Url" />
-    </div>
-    <div class="col-6 col-sm-6 col-md-4 col-xl-auto">
-        <BootstrapInput @bind-Value="@MineType" />
-    </div>
-    <div class="col-6 col-sm-6 col-md-2 col-xl-auto">
-        <Button Color="Color.Primary" OnClick="Apply">加载</Button>
-    </div>
-</div>
-<br />
-<VideoPlayer @ref="Player" MineType="@MineType" Url="@Url" Width="500" Height="380" />
-
-@code {
-    private string MineType = "video/mp4";
-    private string Url = "//vjs.zencdn.net/v/oceans.mp4";
-
-    [NotNull]
-    private VideoPlayer? Player { get; set; }
-
-    private List<string> VideoList { get; } = new()
-    {
-        "https://rtvelivestream.akamaized.net/rtvesec/la1/la1_main.m3u8",
-        "https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8",
-        "https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8",
-        "https://res.cloudinary.com/dannykeane/video/upload/sp_full_hd/q_80:qmax_90,ac_none/v1/dk-memoji-dark.m3u8",
-        "https://devstreaming-cdn.apple.com/videos/streaming/examples/img_bipbop_adv_example_fmp4/master.m3u8",
-        "https://moctobpltc-i.akamaihd.net/hls/live/571329/eight/playlist.m3u8",
-        "https://cph-p2p-msl.akamaized.net/hls/live/2000341/test/master.m3u8",
-        "https://demo.unified-streaming.com/k8s/features/stable/video/tears-of-steel/tears-of-steel.mp4/.m3u8",
-        "https://diceyk6a7voy4.cloudfront.net/e78752a1-2e83-43fa-85ae-3d508be29366/hls/fitfest-sample-1_Ott_Hls_Ts_Avc_Aac_16x9_1280x720p_30Hz_6.0Mbps_qvbr.m3u8"
-    };
-
-    private List<SelectedItem> Items { get; } = new();
-
-    /// <summary>
-    /// OnInitialized 方法
-    /// </summary>
-    protected override void OnInitialized()
-    {
-        base.OnInitialized();
-        for (var i = 0; i < VideoList.Count; i++)
-        {
-            Items.Add(new SelectedItem { Text = $"TestVideo{i}", Value = VideoList[i] });
-        }
-        Items.Add(new SelectedItem { Text = "Mp4", Value = "//vjs.zencdn.net/v/oceans.mp4" });
-    }
-
-    private async Task ChangeURL(SelectedItem e)
-    {
-        Url = e.Value;
-        MineType = e.Value.EndsWith("mp4") ? "video/mp4" : "application/x-mpegURL";
-        StateHasChanged();
-        await Apply();
-    }
-
-    private async Task Apply()
-    {
-        await Player.SetPoster("//vjs.zencdn.net/v/oceans.png");
-        await Player.Reload(Url, MineType);
-    }
-}
diff --git a/src/BootstrapBlazor.Shared/Demos/VideoPlayers/VideoPlayersNomal.razor b/src/BootstrapBlazor.Shared/Demos/VideoPlayers/VideoPlayersNomal.razor
deleted file mode 100644
index 63045e929..000000000
--- a/src/BootstrapBlazor.Shared/Demos/VideoPlayers/VideoPlayersNomal.razor
+++ /dev/null
@@ -1,8 +0,0 @@
-<div class="row g-3">
-    <div class="col-6">
-        <VideoPlayer MineType="application/x-mpegURL" Url="https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8" />
-    </div>
-    <div class="col-6">
-        <VideoPlayer MineType="video/mp4" Url="//vjs.zencdn.net/v/oceans.mp4" />
-    </div>
-</div>
diff --git a/src/BootstrapBlazor.Shared/Locales/en.json b/src/BootstrapBlazor.Shared/Locales/en.json
index 7bc4b118d..621792991 100644
--- a/src/BootstrapBlazor.Shared/Locales/en.json
+++ b/src/BootstrapBlazor.Shared/Locales/en.json
@@ -5876,12 +5876,12 @@
     "PdfReaderCompatibilityModeTips": "- Chrome < 97 automatically uses version 2.4.456<br/>- Chrome < 109 automatically uses version 2.6.347<br/>- Note: ReadOnly and Watermark cannot be used in these two compatibility modes"
   },
   "BootstrapBlazor.Shared.Samples.VideoPlayers": {
-    "Title": "VideoPlayer",
-    "BaseUsageText": "Basic usage",
-    "BaseUsageIntro": "",
-    "BaseUsageText2": "Switch playback resources",
-    "BaseUsageIntro2": "Use the Reload method to switch playback resources",
-    "Tips": "Silent mode enabled by default, this is the way for autoplay follow the modern browser standards."
+    "VideoPlayersTitle": "VideoPlayer",
+    "VideoPlayersNomalTitle": "Basic usage",
+    "VideoPlayersNomalIntro": "",
+    "VideoPlayersChangeURLTitle": "Switch playback resources",
+    "VideoPlayersChangeURLIntro": "Use the Reload method to switch playback resources",
+    "VideoPlayersTips": "Silent mode enabled by default, this is the way for autoplay follow the modern browser standards."
   },
   "BootstrapBlazor.Shared.Components.PackageTips": {
     "Tips": "<div class=\"code-label\">Precautions</div><div>This component relies on <a href='https://www.nuget.org/packages?q={0}' target='_blank'><code>{0}</code></a>, which needs to reference its component package when using this component</div><div class=\"code-label mt-2\">Nuget Install</div><div>Use nuget.org to install <a href='https://www.nuget.org/packages?q={0}' target='_blank'><code>{0}</code></a> component</div>"
diff --git a/src/BootstrapBlazor.Shared/Locales/zh.json b/src/BootstrapBlazor.Shared/Locales/zh.json
index d0f92e2a8..49e337810 100644
--- a/src/BootstrapBlazor.Shared/Locales/zh.json
+++ b/src/BootstrapBlazor.Shared/Locales/zh.json
@@ -5897,12 +5897,12 @@
     "PdfReaderCompatibilityModeTips": "- Chrome < 97 自动使用 2.4.456 版本<br/>- Chrome < 109 自动使用 2.6.347 版本<br/>- 注:ReadOnly 和 Watermark 在这两种兼容模式下不能使用"
   },
   "BootstrapBlazor.Shared.Samples.VideoPlayers": {
-    "Title": "VideoPlayer 视频播放器",
-    "BaseUsageText": "基础用法",
-    "BaseUsageIntro": "",
-    "BaseUsageText2": "切换播放资源",
-    "BaseUsageIntro2": "使用 Reload 方法切换播放资源",
-    "Tips": "默认启用静音模式,只有这样自动播放功能才符合现代浏览器标准."
+    "VideoPlayersTitle": "VideoPlayer 视频播放器",
+    "VideoPlayersNomalTitle": "基础用法",
+    "VideoPlayersNomalIntro": "",
+    "VideoPlayersChangeURLTitle": "切换播放资源",
+    "VideoPlayersChangeURLIntro": "使用 Reload 方法切换播放资源",
+    "VideoPlayersTips": "默认启用静音模式,只有这样自动播放功能才符合现代浏览器标准."
   },
   "BootstrapBlazor.Shared.Components.PackageTips": {
     "Tips": "<div class=\"code-label\">注意事项 ：</div><div>本组件依赖于 <a href='https://www.nuget.org/packages?q={0}' target='_blank'><code>{0}</code></a>，使用本组件时需要引用其组件包</div><div class=\"code-label mt-2\">Nuget 包安装</div><div>使用 <a href='https://www.nuget.org/packages?q={0}' target='_blank'>nuget.org</a> 进行 <code>{0}</code> 组件的安装</div>"
diff --git a/src/BootstrapBlazor.Shared/Samples/VideoPlayers.razor b/src/BootstrapBlazor.Shared/Samples/VideoPlayers.razor
index 33bf87863..57ed324b8 100644
--- a/src/BootstrapBlazor.Shared/Samples/VideoPlayers.razor
+++ b/src/BootstrapBlazor.Shared/Samples/VideoPlayers.razor
@@ -4,21 +4,43 @@
 
 <h3>@Localizer["VideoPlayersTitle"]</h3>
 
-<PackageTips Name="BootstrapBlazor.VideoPlayer" />
+<PackageTips Name="BootstrapBlazor.VideoPlayer" class="mt-3" />
 
 <Tips>
     <p>@((MarkupString)Localizer["VideoPlayersTips"].Value)</p>
 </Tips>
 <DemoBlock Title="@Localizer["VideoPlayersNomalTitle"]"
            Introduction="@Localizer["VideoPlayersNomalIntro"]"
-           Name="Nomal"
-           Demo="typeof(Demos.VideoPlayers.VideoPlayersNomal)">
+           Name="Nomal">
+    <div class="row g-3">
+        <div class="col-6 col-sm-6 col-md-3 col-xl-auto">
+            <Dropdown TValue="string" Items="Items" OnSelectedItemChanged="@ChangeURL" />
+        </div>
+        <div class="col-6 col-sm-6 col-md-6  col-xl-auto">
+            <BootstrapInput @bind-Value="@Url" />
+        </div>
+        <div class="col-6 col-sm-6 col-md-4 col-xl-auto">
+            <BootstrapInput @bind-Value="@MineType" />
+        </div>
+        <div class="col-6 col-sm-6 col-md-2 col-xl-auto">
+            <Button Color="Color.Primary" OnClick="Apply">加载</Button>
+        </div>
+    </div>
+    <br />
+    <VideoPlayer @ref="Player" MineType="@MineType" Url="@Url" Width="500" Height="380" />
 </DemoBlock>
 
 <DemoBlock Title="@Localizer["VideoPlayersChangeURLTitle"]"
            Introduction="@Localizer["VideoPlayersChangeURLIntro"]"
-           Name="ChangeURL"
-           Demo="typeof(Demos.VideoPlayers.VideoPlayersChangeURL)">
+           Name="ChangeURL">
+    <div class="row g-3">
+        <div class="col-6">
+            <VideoPlayer MineType="application/x-mpegURL" Url="https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8" />
+        </div>
+        <div class="col-6">
+            <VideoPlayer MineType="video/mp4" Url="//vjs.zencdn.net/v/oceans.mp4" />
+        </div>
+    </div>
 </DemoBlock>
 
 <AttributeTable Items="@GetAttributes()" />
diff --git a/src/BootstrapBlazor.Shared/Samples/VideoPlayers.razor.cs b/src/BootstrapBlazor.Shared/Samples/VideoPlayers.razor.cs
index f1b3e0bcf..67d474562 100644
--- a/src/BootstrapBlazor.Shared/Samples/VideoPlayers.razor.cs
+++ b/src/BootstrapBlazor.Shared/Samples/VideoPlayers.razor.cs
@@ -9,6 +9,54 @@ namespace BootstrapBlazor.Shared.Samples;
 /// </summary>
 public partial class VideoPlayers
 {
+    private string MineType = "video/mp4";
+    private string Url = "//vjs.zencdn.net/v/oceans.mp4";
+
+    [NotNull]
+    private VideoPlayer? Player { get; set; }
+
+    private List<string> VideoList { get; } = new()
+    {
+        "https://rtvelivestream.akamaized.net/rtvesec/la1/la1_main.m3u8",
+        "https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8",
+        "https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8",
+        "https://res.cloudinary.com/dannykeane/video/upload/sp_full_hd/q_80:qmax_90,ac_none/v1/dk-memoji-dark.m3u8",
+        "https://devstreaming-cdn.apple.com/videos/streaming/examples/img_bipbop_adv_example_fmp4/master.m3u8",
+        "https://moctobpltc-i.akamaihd.net/hls/live/571329/eight/playlist.m3u8",
+        "https://cph-p2p-msl.akamaized.net/hls/live/2000341/test/master.m3u8",
+        "https://demo.unified-streaming.com/k8s/features/stable/video/tears-of-steel/tears-of-steel.mp4/.m3u8",
+        "https://diceyk6a7voy4.cloudfront.net/e78752a1-2e83-43fa-85ae-3d508be29366/hls/fitfest-sample-1_Ott_Hls_Ts_Avc_Aac_16x9_1280x720p_30Hz_6.0Mbps_qvbr.m3u8"
+    };
+
+    private List<SelectedItem> Items { get; } = new();
+
+    /// <summary>
+    /// OnInitialized 方法
+    /// </summary>
+    protected override void OnInitialized()
+    {
+        base.OnInitialized();
+        for (var i = 0; i < VideoList.Count; i++)
+        {
+            Items.Add(new SelectedItem { Text = $"TestVideo{i}", Value = VideoList[i] });
+        }
+        Items.Add(new SelectedItem { Text = "Mp4", Value = "//vjs.zencdn.net/v/oceans.mp4" });
+    }
+
+    private async Task ChangeURL(SelectedItem e)
+    {
+        Url = e.Value;
+        MineType = e.Value.EndsWith("mp4") ? "video/mp4" : "application/x-mpegURL";
+        StateHasChanged();
+        await Apply();
+    }
+
+    private async Task Apply()
+    {
+        await Player.SetPoster("//vjs.zencdn.net/v/oceans.png");
+        await Player.Reload(Url, MineType);
+    }
+
     /// <summary>
     /// 获得属性方法
     /// </summary>
-- 
Gitee


From d1b0255f4af2bb2d436c8dcf0c18a37a390e1267 Mon Sep 17 00:00:00 2001
From: zhangpeihang <948869991@qq.com>
Date: Mon, 24 Jul 2023 08:26:00 +0800
Subject: [PATCH 2/2] =?UTF-8?q?doc:=20=E6=B7=BB=E5=8A=A0=20videoplayers=20?=
 =?UTF-8?q?=E7=A4=BA=E4=BE=8B=E6=96=87=E6=A1=A3=E8=B5=84=E6=BA=90=E6=96=87?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/BootstrapBlazor.Shared/Locales/en.json    | 14 +++++++++++-
 src/BootstrapBlazor.Shared/Locales/zh.json    | 14 +++++++++++-
 .../Samples/VideoPlayers.razor                |  6 ++---
 .../Samples/VideoPlayers.razor.cs             | 22 +++++++++----------
 4 files changed, 40 insertions(+), 16 deletions(-)

diff --git a/src/BootstrapBlazor.Shared/Locales/en.json b/src/BootstrapBlazor.Shared/Locales/en.json
index 621792991..6eba80353 100644
--- a/src/BootstrapBlazor.Shared/Locales/en.json
+++ b/src/BootstrapBlazor.Shared/Locales/en.json
@@ -5881,7 +5881,19 @@
     "VideoPlayersNomalIntro": "",
     "VideoPlayersChangeURLTitle": "Switch playback resources",
     "VideoPlayersChangeURLIntro": "Use the Reload method to switch playback resources",
-    "VideoPlayersTips": "Silent mode enabled by default, this is the way for autoplay follow the modern browser standards."
+    "VideoPlayersTips": "Silent mode enabled by default, this is the way for autoplay follow the modern browser standards.",
+    "MineType": "MineType",
+    "ResourceUrl": "Resource Address",
+    "MineTypeDesc": "Resource types",
+    "ValueList": "(see footer)",
+    "Width": "Width",
+    "Height": "Height",
+    "ShowControls": "Displays the control bar",
+    "AutoPaly": "Autoplay",
+    "Poster": "Set the cover resource, relative or absolute path",
+    "SwitchResource": "Toggle playback resources",
+    "SetPoster": "Set the cover",
+    "OnError": "Error callback"
   },
   "BootstrapBlazor.Shared.Components.PackageTips": {
     "Tips": "<div class=\"code-label\">Precautions</div><div>This component relies on <a href='https://www.nuget.org/packages?q={0}' target='_blank'><code>{0}</code></a>, which needs to reference its component package when using this component</div><div class=\"code-label mt-2\">Nuget Install</div><div>Use nuget.org to install <a href='https://www.nuget.org/packages?q={0}' target='_blank'><code>{0}</code></a> component</div>"
diff --git a/src/BootstrapBlazor.Shared/Locales/zh.json b/src/BootstrapBlazor.Shared/Locales/zh.json
index 49e337810..ada3b1612 100644
--- a/src/BootstrapBlazor.Shared/Locales/zh.json
+++ b/src/BootstrapBlazor.Shared/Locales/zh.json
@@ -5902,7 +5902,19 @@
     "VideoPlayersNomalIntro": "",
     "VideoPlayersChangeURLTitle": "切换播放资源",
     "VideoPlayersChangeURLIntro": "使用 Reload 方法切换播放资源",
-    "VideoPlayersTips": "默认启用静音模式,只有这样自动播放功能才符合现代浏览器标准."
+    "VideoPlayersTips": "默认启用静音模式,只有这样自动播放功能才符合现代浏览器标准.",
+    "MineType": "MineType 类型",
+    "ResourceUrl": "资源地址",
+    "MineTypeDesc": "资源类型,video/mp4, application/x-mpegURL, video/ogg .. ",
+    "ValueList": "(见页脚)",
+    "Width": "宽度",
+    "Height": "高度",
+    "ShowControls": "显示控制条",
+    "AutoPaly": "自动播放",
+    "Poster": "设置封面资源,相对或者绝对路径",
+    "SwitchResource": "切换播放资源",
+    "SetPoster": "设置封面",
+    "OnError": "错误回调"
   },
   "BootstrapBlazor.Shared.Components.PackageTips": {
     "Tips": "<div class=\"code-label\">注意事项 ：</div><div>本组件依赖于 <a href='https://www.nuget.org/packages?q={0}' target='_blank'><code>{0}</code></a>，使用本组件时需要引用其组件包</div><div class=\"code-label mt-2\">Nuget 包安装</div><div>使用 <a href='https://www.nuget.org/packages?q={0}' target='_blank'>nuget.org</a> 进行 <code>{0}</code> 组件的安装</div>"
diff --git a/src/BootstrapBlazor.Shared/Samples/VideoPlayers.razor b/src/BootstrapBlazor.Shared/Samples/VideoPlayers.razor
index 57ed324b8..c29fa9d8f 100644
--- a/src/BootstrapBlazor.Shared/Samples/VideoPlayers.razor
+++ b/src/BootstrapBlazor.Shared/Samples/VideoPlayers.razor
@@ -4,9 +4,9 @@
 
 <h3>@Localizer["VideoPlayersTitle"]</h3>
 
-<PackageTips Name="BootstrapBlazor.VideoPlayer" class="mt-3" />
+<PackageTips Name="BootstrapBlazor.VideoPlayer" />
 
-<Tips>
+<Tips class="mt-3">
     <p>@((MarkupString)Localizer["VideoPlayersTips"].Value)</p>
 </Tips>
 <DemoBlock Title="@Localizer["VideoPlayersNomalTitle"]"
@@ -45,7 +45,7 @@
 
 <AttributeTable Items="@GetAttributes()" />
 <br />
-<h5>MineType 类型</h5>
+<h5>@Localizer["MineType"]</h5>
 <ol>
     <li>opus: 'video/ogg'</li>
     <li>ogv: 'video/ogg'</li>
diff --git a/src/BootstrapBlazor.Shared/Samples/VideoPlayers.razor.cs b/src/BootstrapBlazor.Shared/Samples/VideoPlayers.razor.cs
index 67d474562..5b02a46ad 100644
--- a/src/BootstrapBlazor.Shared/Samples/VideoPlayers.razor.cs
+++ b/src/BootstrapBlazor.Shared/Samples/VideoPlayers.razor.cs
@@ -66,70 +66,70 @@ public partial class VideoPlayers
         // TODO: 移动到数据库中
         new() {
             Name = nameof(VideoPlayer.Url),
-            Description = "资源地址",
+            Description = Localizer["ResourceUrl"],
             Type = "string",
             ValueList = " — ",
             DefaultValue = " — "
         },
         new() {
             Name = nameof(VideoPlayer.MineType),
-            Description = "资源类型,video/mp4, application/x-mpegURL, video/ogg .. ",
+            Description = Localizer["MineTypeDesc"],
             Type = "string?",
-            ValueList = "(见页脚)",
+            ValueList = Localizer["ValueList"],
             DefaultValue = "application/x-mpegURL"
         },
         new() {
             Name = nameof(VideoPlayer.Width),
-            Description = "宽度",
+            Description = Localizer["Width"],
             Type = "int",
             ValueList = " — ",
             DefaultValue = "300"
         },
         new() {
             Name = nameof(VideoPlayer.Height),
-            Description = "高度",
+            Description = Localizer["Height"],
             Type = "int",
             ValueList = " — ",
             DefaultValue = "200"
         },
         new() {
             Name = nameof(VideoPlayer.Controls),
-            Description = "显示控制条",
+            Description = Localizer["ShowBar"],
             Type = "bool",
             ValueList = "true|false",
             DefaultValue = "true"
         },
         new() {
             Name = nameof(VideoPlayer.Autoplay),
-            Description = "自动播放",
+            Description = Localizer["AutoPaly"],
             Type = "bool",
             ValueList = "true|false",
             DefaultValue = "true"
         },
         new() {
             Name = nameof(VideoPlayer.Poster),
-            Description = "设置封面资源,相对或者绝对路径",
+            Description = Localizer["Poster"],
             Type = "string?",
             ValueList = " — ",
             DefaultValue = " — "
         },
         new() {
             Name = "Reload(string url, string type)",
-            Description = "切换播放资源",
+            Description = Localizer["SwitchResource"],
             Type = "async Task",
             ValueList = " — ",
             DefaultValue = " — "
         },
         new() {
             Name = "SetPoster(string poster)",
-            Description = "设置封面",
+            Description = Localizer["SetPoster"],
             Type = "async Task",
             ValueList = " — ",
             DefaultValue = " — "
         },
         new() {
             Name = "OnError",
-            Description = "错误回调",
+            Description = Localizer["OnError"],
             Type = "Func<string, Task>?",
             ValueList = " — ",
             DefaultValue = " — "
-- 
Gitee