🆕 feat: Add xgplayer component

src/Component/BlazorComponent.Web/package.json

@@ -27,7 +27,8 @@
     "build:drawflow": "rollup --config rollup.config.drawflow.ts",
     "build:swiper": "rollup --config rollup.config.swiper.ts",
     "build:intersect": "rollup --config rollup.config.intersect.ts",
-    "build:resize": "rollup --config rollup.config.resize.ts"
+    "build:resize": "rollup --config rollup.config.resize.ts",
+    "build:xgplayer": "rollup --config rollup.config.xgplayer.ts"
   },
   "author": "",
   "license": "MIT",
@@ -59,7 +60,9 @@
     "rollup-plugin-terser": "^7.0.2",
     "swiper": "^10.2.0",
     "tslib": "^2.4.0",
-    "typescript": "^4.8.2"
+    "typescript": "^4.8.2",
+    "xgplayer": "^3.0.10",
+    "xgplayer-music": "^3.0.10"
   },
   "dependencies": {}
 }

src/Component/BlazorComponent.Web/rollup.config.xgplayer.ts

@@ -0,0 +1,21 @@
+import { defineConfig } from "rollup";
+import { terser } from "rollup-plugin-terser";
+
+import commonjs from "@rollup/plugin-commonjs";
+import json from "@rollup/plugin-json";
+import resolve from "@rollup/plugin-node-resolve";
+import typescript from "@rollup/plugin-typescript";
+
+export default defineConfig([
+  {
+    input: "./src/proxies/xgplayer/index.ts",
+    output: [
+      {
+        file: "../../../../MASA.Blazor/wwwroot/js/proxies/xgplayer-proxy.js",
+        format: "esm",
+        sourcemap: true,
+      },
+    ],
+    plugins: [typescript(), json(), resolve(), commonjs(), terser()],
+  },
+]);

src/Component/BlazorComponent.Web/src/main.ts

@@ -1,20 +1,27 @@
 import * as slider from "./components/slider";
 import * as interop from "./interop";
 import * as overlayable from "./mixins/overlayable";
+import { MarkdownParser } from "./proxies/markdown-it";
 
 declare global {
   interface Window {
     BlazorComponent: any;
-    MasaBlazor: any;
+    MasaBlazor: {
+      extendMarkdownIt?: (parser: MarkdownParser) => void;
+      xgplayerPlugins: any[];
+      xgplayerPluginOptions?: { [prop: string]: any };
+    };
   }
 }
 
 window.BlazorComponent = {
   interop: {
     ...interop,
     ...overlayable,
-    ...slider
+    ...slider,
   },
 };
 
-window.MasaBlazor = {};
+window.MasaBlazor = {
+  xgplayerPlugins: [],
+};

src/Component/BlazorComponent.Web/src/proxies/markdown-it/index.ts

@@ -8,7 +8,7 @@ import markdownItTodo from "markdown-it-todo";
 
 import { highlight, highlightToStream } from "./highlighter";
 
-type MarkdownParser = {
+export type MarkdownParser = {
   md: MarkdownIt;
   scope?: string;
   useContainer: (name: string) => void;

src/Component/BlazorComponent.Web/src/proxies/xgplayer/index.ts

@@ -0,0 +1,126 @@
+import Xgplayer, { IPlayerOptions } from "xgplayer";
+import MusicPreset, { Music } from "xgplayer-music";
+import Mobile from "xgplayer/es/plugins/mobile";
+import Play from "xgplayer/es/plugins/play";
+import Playbackrate from "xgplayer/es/plugins/playbackRate";
+import Progress from "xgplayer/es/plugins/progress";
+import Time from "xgplayer/es/plugins/time";
+import Volume from "xgplayer/es/plugins/volume";
+
+export type XgplayerOptions = Omit<
+  IPlayerOptions,
+  "id" | "el" | "url" | "plugins"
+> & {
+  music?: Music;
+};
+
+class XgplayerProxy {
+  el: HTMLElement;
+  initOptions: XgplayerOptions;
+  player: Xgplayer;
+
+  constructor(
+    selector: string,
+    url: IPlayerOptions["url"],
+    options: XgplayerOptions
+  ) {
+    const el: HTMLElement = document.querySelector(selector);
+
+    if (!el) {
+      throw new Error(
+        "[Xgplayer] this selector of DOM node that player to mount on is required."
+      );
+    }
+
+    if (!url) {
+      throw new Error("[Xgplayer] this media resource url is required.");
+    }
+
+    this.initOptions = options;
+    this.el = el;
+    this.init(url, options);
+  }
+
+  invokeVoid(prop: string, args: any[]) {
+    if (this.player[prop] && typeof this.player[prop] === "function") {
+      this.player[prop](...args);
+    }
+  }
+
+  getPropsAndStates() {
+    return {
+      autoplay: this.player.autoplay,
+      crossOrigin: this.player.crossOrigin,
+      currentSrc: this.player.currentSrc,
+      currentTime: this.player.currentTime,
+      duration: this.player.duration,
+      cumulateTime: this.player.cumulateTime,
+      volume: this.player.volume,
+      muted: this.player.muted,
+      defaultMuted: this.player.defaultMuted,
+      playbackRate: this.player.playbackRate,
+      loop: this.player.loop,
+      src: this.player.src,
+      lang: this.player.lang,
+      version: this.player.version,
+      state: this.player.state,
+      ended: this.player.ended,
+      paused: this.player.paused,
+      networkState: this.player.networkState,
+      readyState: this.player.readyState,
+      isFullscreen: this.player.isFullscreen,
+      isCssFullscreen: this.player.isCssfullScreen,
+      isSeeking: this.player.isSeeking,
+      isActive: this.player.isActive,
+    };
+  }
+
+  init(url: IPlayerOptions["url"], options: XgplayerOptions) {
+    let playerOptions: IPlayerOptions = {
+      el: this.el,
+      url,
+    };
+
+    if (options.music) {
+      playerOptions = {
+        ...playerOptions,
+        presets: [MusicPreset],
+        plugins: [Mobile, Progress, Play, Playbackrate, Time, Volume],
+        ...options,
+      };
+    } else {
+      playerOptions = {
+        ...playerOptions,
+        ...options,
+      };
+    }
+
+    if (window.MasaBlazor.xgplayerPlugins) {
+      playerOptions.plugins = [
+        ...playerOptions.plugins,
+        ...window.MasaBlazor.xgplayerPlugins,
+      ];
+
+      playerOptions = {
+        ...playerOptions,
+        ...window.MasaBlazor.xgplayerPluginOptions,
+      };
+    }
+
+    this.player = new Xgplayer(playerOptions);
+  }
+
+  destroy() {
+    this.player.destroy();
+    this.player = null;
+  }
+}
+
+export function init(
+  selector: string,
+  url: IPlayerOptions["url"],
+  options: XgplayerOptions
+) {
+  const instance = new XgplayerProxy(selector, url, options);
+  return instance;
+}

src/Component/BlazorComponent/Extensions/OneOf/StringNumberExtensions.cs

@@ -1,4 +1,6 @@
-namespace BlazorComponent
+using System.Runtime;
+
+namespace BlazorComponent
 {
     public static class StringNumberExtensions
     {
@@ -16,6 +18,11 @@ public static string ToUnit(this StringNumber? stringNumber, string unit = "px")
             );
         }
 
+        public static string? ToUnitOrNull(this StringNumber? stringNumber, string unit = "px")
+        {
+            return stringNumber == null ? null : stringNumber.ToUnit(unit);
+        }
+
         // TODO: ConvertToUnit更接近vuetify源码
         // TODO: 是否可以把上面的ToUnit删掉