feat(Player): add OnEvent callback (#423)

* chore: bump version 9.0.1

* feat: 增加 OnEvent 回调方法

* feat: 增加播放等事件回调

* chore: 精简代码

Author: ArgoZhang

src/components/BootstrapBlazor.Player/BootstrapBlazor.Player.csproj

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>9.0.0</Version>
+    <Version>9.0.1</Version>
   </PropertyGroup>
 
   <PropertyGroup>

src/components/BootstrapBlazor.Player/Player.razor

@@ -4,10 +4,10 @@
 
 @if (Mode == PlayerMode.Audio)
 {
-    <audio id="@Id" playsinline controls crossorigin>
+    <audio id="@Id" playsinline controls crossorigin data-bb-event="@EventString">
     </audio>
 }
 else {
-    <video id="@Id" playsinline controls crossorigin>
+    <video id="@Id" playsinline controls crossorigin data-bb-event="@EventString">
     </video>
 }

src/components/BootstrapBlazor.Player/Player.razor.cs

@@ -25,9 +25,13 @@ public partial class Player
     [EditorRequired]
     public PlayerOptions? Options { get; set; }
 
-    private string? ClassString => CssBuilder.Default("bb-video-player")
-        .AddClassFromAttributes(AdditionalAttributes)
-        .Build();
+    /// <summary>
+    /// Gets or sets the client event callback. Default is null.
+    /// </summary>
+    [Parameter]
+    public Func<string, Task>? OnEvent { get; set; }
+
+    private string? EventString => OnEvent == null ? "true" : null;
 
     /// <summary>
     /// <inheritdoc/>
@@ -39,7 +43,7 @@ protected override async Task InvokeInitAsync()
         {
             Options.Language ??= CultureInfo.CurrentUICulture.Name;
         }
-        await InvokeVoidAsync("init", Id, Interop, "", Options);
+        await InvokeVoidAsync("init", Id, Interop, nameof(TriggerEvent), Options);
     }
 
     /// <summary>
@@ -48,4 +52,18 @@ protected override async Task InvokeInitAsync()
     /// <param name="option"></param>
     /// <returns></returns>
     public Task Reload(PlayerOptions option) => InvokeVoidAsync("reload", Id, option);
+
+    /// <summary>
+    /// Trigger <see cref="OnEvent"/> event callback. Triggered by JSInterop.
+    /// </summary>
+    /// <param name="eventName"></param>
+    /// <returns></returns>
+    [JSInvokable]
+    public async Task TriggerEvent(string eventName)
+    {
+        if (OnEvent != null)
+        {
+            await OnEvent(eventName);
+        }
+    }
 }

src/components/BootstrapBlazor.Player/Player.razor.js

@@ -36,6 +36,8 @@ export async function init(id, invoke, method, options) {
             ...options
         }
         p.player = new Plyr(el, config);
+        handlerEvents(p);
+
         if (source.sources.length === 0) {
             return;
         }
@@ -62,10 +64,69 @@ const initHls = (p, options) => {
                 setTimeout(() => hls.subtitleTrack = player.currentTrack, 50);
             });
             p.player = player;
+            handlerEvents(p);
         });
     }
 }
 
+export function reload(id, options) {
+    const p = Data.get(id);
+    if (p === null) {
+        return;
+    }
+
+    const { player, hls } = p;
+    const source = options.source.sources;
+    delete options.source;
+    if (hls) {
+        if (source.length > 0) {
+            const src = source[0].src;
+            hls.loadSource(src);
+        }
+    }
+    else {
+        player.poster = source.poster ?? options.poster;
+        player.source = source;
+    }
+}
+
+export function setPoster(id, poster) {
+    const p = Data.get(id);
+    if (p) {
+        const { player } = p;
+        player.poster = poster;
+    }
+}
+
+export function dispose(id) {
+    const p = Data.get(id);
+    Data.remove(id);
+
+    if (p) {
+        const { player } = p;
+        if (player) {
+            player.destroy();
+            player = null;
+        }
+    }
+}
+
+const handlerEventName = (name, p) => {
+    const { el, invoke, method, player } = p;
+    player.on(name, () => {
+        const fire = el.getAttribute('data-bb-event') === 'true';
+        if (fire) {
+            invoke.invokeMethodAsync(method, name);
+        }
+    });
+}
+
+const handlerEvents = p => {
+    ['ready', 'play', 'pause', 'ended', 'enterfullscreen', 'exitfullscreen', 'languagechange'].forEach(name => {
+        handlerEventName(name, p);
+    });
+}
+
 const setLang = (option) => {
     option.i18n = {
         restart: '重启',
@@ -112,48 +173,3 @@ const setLang = (option) => {
         }
     }
 }
-
-export function reload(id, options) {
-    const p = Data.get(id);
-    if (p === null) {
-        return;
-    }
-
-    const { player, hls } = p;
-    const source = options.source.sources;
-    delete options.source;
-    if (hls) {
-        if (source.length > 0) {
-            const src = source[0].src;
-            hls.loadSource(src);
-        }
-    }
-    else {
-        player.poster = source.poster ?? options.poster;
-        player.source = source;
-    }
-}
-
-export function setPoster(id, poster) {
-    execute(id, p => {
-        const { player } = p;
-        player.poster = poster;
-    });
-}
-
-const execute = (id, callback) => {
-    const p = Data.get(id);
-    if (p) {
-        callback(p);
-    }
-}
-
-export function dispose(id) {
-    const p = Data.get(id);
-    Data.remove(id);
-
-    execute(id, player => {
-        player.destroy();
-        player = null;
-    });
-}