🆕 feat(labs): add xgplayer component (#1685)

masastack · Dec 22, 2023 · 4940356 · 4940356
1 parent 097c15e
commit 4940356
Show file tree

Hide file tree

Showing 38 changed files with 1,291 additions and 2 deletions.
diff --git a/docs/Masa.Blazor.Docs/Examples/labs/xgplayer/Controls.razor b/docs/Masa.Blazor.Docs/Examples/labs/xgplayer/Controls.razor
@@ -0,0 +1,6 @@
+@using Masa.Blazor.Components.Xgplayer.Plugins.Controls
+
+<MXgplayer Class="mx-auto"
+           Url="@("https://img-cdn.lonsid.cn/download/1703002472.mp4")">
+    <MXgplayerControls Mode="ControlsMode.Flex"></MXgplayerControls>
+</MXgplayer>
diff --git a/docs/Masa.Blazor.Docs/Examples/labs/xgplayer/Default.razor b/docs/Masa.Blazor.Docs/Examples/labs/xgplayer/Default.razor
@@ -0,0 +1,3 @@
+<MXgplayer Class="mx-auto"
+           Url="@("https://img-cdn.lonsid.cn/download/1703002472.mp4")">
+</MXgplayer>
diff --git a/docs/Masa.Blazor.Docs/Examples/labs/xgplayer/Ignores.razor b/docs/Masa.Blazor.Docs/Examples/labs/xgplayer/Ignores.razor
@@ -0,0 +1,6 @@
+@using Masa.Blazor.Components.Xgplayer.Plugins
+
+<MXgplayer Class="mx-auto"
+           Url="@("https://img-cdn.lonsid.cn/download/1703002472.mp4")"
+           Ignores="new[] { BuiltInPlugin.CssFullscreen }">
+</MXgplayer>
diff --git a/docs/Masa.Blazor.Docs/Examples/labs/xgplayer/MusicPlayer.razor b/docs/Masa.Blazor.Docs/Examples/labs/xgplayer/MusicPlayer.razor
@@ -0,0 +1,9 @@
+@using Masa.Blazor.Components.Xgplayer.Plugins.Controls
+
+<MXgMusicPlayer Width="@("100%")"
+                Height="50"
+                Url="@("https://cdn.masastack.com/stack/doc/blazor/components/xgplayer/Happy%20Whistling%20Ukulele.mp3")">
+    <MXgplayerControls InitShow
+                       AutoHide="false"
+                       Mode="ControlsMode.Flex" />
+</MXgMusicPlayer>
diff --git a/docs/Masa.Blazor.Docs/Examples/labs/xgplayer/StartTime.razor b/docs/Masa.Blazor.Docs/Examples/labs/xgplayer/StartTime.razor
@@ -0,0 +1,4 @@
+<MXgplayer Class="mx-auto"
+           Url="@("https://img-cdn.lonsid.cn/download/1703002472.mp4")"
+           StartTime="30">
+</MXgplayer>
diff --git a/docs/Masa.Blazor.Docs/Examples/labs/xgplayer/Switch.razor b/docs/Masa.Blazor.Docs/Examples/labs/xgplayer/Switch.razor
@@ -0,0 +1,67 @@
+@using Masa.Blazor.Components.Xgplayer.Plugins
+@using Masa.Blazor.Components.Xgplayer
+
+<div style="width: 100%" class="text-center">
+    <div style="width: 600px;height: 338px; background-color: #000000"
+         class="mx-auto">
+        @if (_isMusic)
+        {
+            <MXgMusicPlayer Url="@("https://cdn.masastack.com/stack/doc/blazor/components/xgplayer/1703002472.m4a")"
+                            Autoplay="@_isRunning"
+                            Width="@("100%")"
+                            Height="@("100%")"
+                            StartTime="@_startTime"
+                            Ignores="new[] { BuiltInPlugin.MusicBackward, BuiltInPlugin.MusicForward, BuiltInPlugin.MusicNext, BuiltInPlugin.MusicPrev }"
+                            @ref="_xgMusicPlayer">
+                <MXgplayerControls AutoHide="false" InitShow></MXgplayerControls>
+                <MXgplayerPlay Index="0"></MXgplayerPlay>
+            </MXgMusicPlayer>
+        }
+        else
+        {
+            <MXgplayer Url="@("https://img-cdn.lonsid.cn/download/1703002472.mp4")"
+                       Autoplay="@_isRunning"
+                       Width="@("100%")"
+                       Height="@("100%")"
+                       StartTime="_startTime"
+                       @ref="@_xgplayer">
+                <MXgplayerControls InitShow AutoHide="false" />
+            </MXgplayer>
+        }
+    </div>
+
+    <MButton Class="mt-1" Color="primary" OnClick="@ToggleMusic">Toggle to @(_isMusic ? "Video" : "Music")</MButton>
+</div>
+
+@code {
+
+    private bool _isMusic;
+
+    private double _startTime;
+    private bool _isRunning;
+
+    private MXgMusicPlayer _xgMusicPlayer = null!;
+    private MXgplayer _xgplayer = null!;
+
+    private async Task ToggleMusic()
+    {
+        if (_isMusic)
+        {
+            _isMusic = false;
+            await SetStateAsync(_xgMusicPlayer);
+        }
+        else
+        {
+            _isMusic = true;
+            await SetStateAsync(_xgplayer);
+        }
+    }
+
+    private async Task SetStateAsync(MXgMusicPlayer player)
+    {
+        var attr = await player.GetPropsAndStatesAsync();
+        _startTime = attr.CurrentTime;
+        _isRunning = attr.State == XgplayerState.Running;
+    }
+
+}
diff --git a/docs/Masa.Blazor.Docs/wwwroot/data/nav.json b/docs/Masa.Blazor.Docs/wwwroot/data/nav.json
@@ -294,6 +294,11 @@
         "title": "watermark",
         "state": "new",
         "releasedOn": "v1.1.1"
+      },
+      {
+        "title": "xgplayer",
+        "state": "new",
+        "releasedOn": "v1.3.0"
       }
     ]
   },

diff --git a/docs/Masa.Blazor.Docs/wwwroot/pages/labs/xgplayer/en-US.md b/docs/Masa.Blazor.Docs/wwwroot/pages/labs/xgplayer/en-US.md
@@ -0,0 +1,61 @@
+---
+title: Xgplayer
+desc: "A HTML5 video player component base on [Xigua Video Playerv3.0.11](https://h5player.bytedance.com/en)."
+tag: "JS Proxy"
+---
+
+You need to reference the following files before using it:
+
+```html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/index.min.css"/>
+```
+
+## Usage
+
+<masa-example file="Examples.labs.xgplayer.Default"></masa-example>
+
+<app-alert type="warning" content="The `Url` parameter is the only one that can be updated in real time. Other parameters only take effect when initialized."></app-alert>
+
+## Examples
+
+### Props
+
+#### StartTime
+
+`StartTime` property can specify the start time of the video.
+
+<masa-example file="Examples.labs.xgplayer.StartTime"></masa-example>
+
+#### Ignores
+
+Disable plugins through the `Ignores` property. The built-in plugin list can be viewed in `BultinPlugins`.
+
+<masa-example file="Examples.labs.xgplayer.Ignores"></masa-example>
+
+### Misc
+
+#### Switch music and video
+
+**MXgMusicPlayer** is a separate music player component.
+This example shows how to switch between music and video.
+The `_startTime` field is used to record the progress of video and audio playback.
+The `_isRunning` field is used to record whether the video or audio is playing.
+
+<masa-example file="Examples.labs.xgplayer.Switch"></masa-example>
+
+## Music player
+
+**MXgplayer** has a base class component **MXgMusicPlayer** that can be used separately.
+
+<masa-example file="Examples.labs.xgplayer.MusicPlayer"></masa-example>
+
+## Plugin components
+
+Currently, only three plugin components **Controls**, **Play**, **Time** are implemented,
+and other plugin components are welcome to PR.
+
+### Controls
+
+Use the built-in control plugin component to customize the style of the control bar.
+
+<masa-example file="Examples.labs.xgplayer.Controls"></masa-example>
diff --git a/docs/Masa.Blazor.Docs/wwwroot/pages/labs/xgplayer/zh-CN.md b/docs/Masa.Blazor.Docs/wwwroot/pages/labs/xgplayer/zh-CN.md
@@ -0,0 +1,58 @@
+---
+title: Xgplayer（西瓜视频播放器）
+desc: "一个基于 [Xigua Video Playervv3.0.11](https://h5player.bytedance.com/) 的 HTML5 视频播放器组件。"
+tag: "JS代理"
+---
+
+在使用之前你必须引入以下文件：
+
+```html
+<link rel="stylesheet" href="https://cdn.masastack.com/npm/xgplayer/3.0.11/xgplayer.min.css"/>
+```
+
+## 使用
+
+<masa-example file="Examples.labs.xgplayer.Default"></masa-example>
+
+<app-alert type="warning" content="仅支持`Url`参数实时更新，其他参数只有初始化时才会生效。"></app-alert>
+
+## 示例
+
+### 属性
+
+#### 开始时间
+
+`StartTime` 属性可以指定视频的开始播放时间。
+
+<masa-example file="Examples.labs.xgplayer.StartTime"></masa-example>
+
+#### 禁用插件
+
+通过 `Ignores` 属性禁用插件，内置的插件列表在 `BultinPlugins` 中可以查看。
+
+<masa-example file="Examples.labs.xgplayer.Ignores"></masa-example>
+
+### 其他
+
+#### 切换音乐和视频
+
+**MXgMusicPlayer** 是单独的音乐播放器组件，这个例子演示了如何在音乐和视频之间切换。
+`_startTime` 字段用于记录视频和音频播放的进度。`_isRunning` 字段用于记录视频或音频是否正在播放。
+
+<masa-example file="Examples.labs.xgplayer.Switch"></masa-example>
+
+## 音乐播放器
+
+**MXgplayer** 结构上有个 **MXgMusicPlayer** 的基类组件，可以单独使用。
+
+<masa-example file="Examples.labs.xgplayer.MusicPlayer"></masa-example>
+
+## 插件组件
+
+目前仅实现了 **Controls**、**Play**、**Time** 三个插件组件，其他插件组件欢迎 PR。
+
+### 控制条
+
+使用内置的控制插件组件，可以自定义控制条的样式。
+
+<masa-example file="Examples.labs.xgplayer.Controls"></masa-example>
diff --git a/docs/Masa.Docs.Server/Pages/_Host.cshtml b/docs/Masa.Docs.Server/Pages/_Host.cshtml
@@ -28,6 +28,7 @@
     <link href="https://cdn.masastack.com/npm/gridstack.js/7.2.1/gridstack.min.css" rel="stylesheet">
     <link href="https://cdn.masastack.com/npm/drawflow/0.0.59/drawflow.min.css" rel="stylesheet">
     <link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/10.2.0/swiper-bundle.min.css" rel="stylesheet">
+    <link href="https://cdn.masastack.com/npm/xgplayer/3.0.11/xgplayer.min.css" rel="stylesheet">
     <link href="_content/Masa.Docs.Shared/prism/prism-material-dark-for-masa.css" rel="stylesheet">
     <link href="_content/Masa.Docs.Shared/prism/prism-line-highlight.min.css" rel="stylesheet">
     <link href="_content/Masa.Docs.Shared/css/docs.css" rel="stylesheet">

diff --git a/docs/Masa.Docs.Shared/wwwroot/locale/en-US.json b/docs/Masa.Docs.Shared/wwwroot/locale/en-US.json
@@ -244,6 +244,7 @@
   "treeview": "Treeview",
   "virtual-scroll": "Virtual scroll",
   "watermark": "Watermark",
+  "xgplayer": "Xgplayer",
   "md-breakpoints": "Material Design Breakpoints",
   "device": "Device",
   "code": "Code",
@@ -426,7 +427,8 @@
     "tooltips": "The Tooltips component is useful for conveying information when a user hovers over an element",
     "treeview": "The Treeview component is useful for displaying large amounts of nested data.",
     "virtual-scroller": "The VirtualScroller component displays a virtual、infinite list",
-    "watermark": "Add specific text or image to the page"
+    "watermark": "Add specific text or image to the page",
+    "xgplayer": "A HTML5 video player based on Xgplayer"
   },
   "contribute": {
     "edit": "Edit on {0}",

diff --git a/docs/Masa.Docs.Shared/wwwroot/locale/zh-CN.json b/docs/Masa.Docs.Shared/wwwroot/locale/zh-CN.json
@@ -247,6 +247,7 @@
   "treeview": "Treeview（树形视图）",
   "virtual-scroll": "Virtual scroll（虚拟滚动条）",
   "watermark": "Watermark（水印）",
+  "xgplayer": "Xgplayer（视频播放器）",
   "md-breakpoints": "Material Design 断点",
   "device": "设备",
   "code": "代码",
@@ -545,7 +546,8 @@
     "tooltips": "当用户悬停在元素上时， Tooltips 组件可用于传递信息",
     "treeview": "适用于显示大量嵌套数据",
     "virtual-scroller": "VirtualScroller 组件显示一个虚拟、无限 的列表",
-    "watermark": "给某个区域加上水印"
+    "watermark": "给某个区域加上水印",
+    "xgplayer": "基于 Xgplayer 的 HTML5 视频播放器"
   },
   "contribute": {
     "edit": "在 {0} 上编辑",

diff --git a/docs/Masa.Docs.WebAssembly/wwwroot/index.html b/docs/Masa.Docs.WebAssembly/wwwroot/index.html
@@ -26,6 +26,7 @@
     <link href="https://cdn.masastack.com/npm/gridstack.js/7.2.1/gridstack.min.css" rel="stylesheet">
     <link href="https://cdn.masastack.com/npm/drawflow/0.0.59/drawflow.min.css" rel="stylesheet">
     <link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/10.2.0/swiper-bundle.min.css" rel="stylesheet">
+    <link href="https://cdn.masastack.com/npm/xgplayer/3.0.11/xgplayer.min.css" rel="stylesheet">
     <link href="_content/Masa.Docs.Shared/prism/prism-material-dark-for-masa.css" rel="stylesheet">
     <link href="_content/Masa.Docs.Shared/prism/prism-line-highlight.min.css" rel="stylesheet">
     <link href="_content/Masa.Docs.Shared/css/docs.css" rel="stylesheet">

diff --git a/src/Masa.Blazor/Components/Xgplayer/IXgplayer.cs b/src/Masa.Blazor/Components/Xgplayer/IXgplayer.cs
@@ -0,0 +1,6 @@
+namespace Masa.Blazor.Components.Xgplayer;
+
+public interface IXgplayer
+{
+    Task ConfigPluginAsync(object plugin);
+}