feat(Meeting): add Meeting component (#448)

* 增加jitsi meet会议室功能

* 删除调试信息

* 移除log

* refactor: 代码格式化

---------

Co-authored-by: jx <jx@jvxiang.com>

Author: ArgoZhang

BootstrapBlazor.Extensions.sln

@@ -186,6 +186,8 @@ Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "BootstrapBlazor.Graph", "sr
 EndProject
 Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "BootstrapBlazor.Html2Pdf.Playwright", "src\components\BootstrapBlazor.Html2Pdf.Playwright\BootstrapBlazor.Html2Pdf.Playwright.csproj", "{F3043A78-1942-4524-BDC4-7E88F56DF3D5}"
 EndProject
+Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "BootstrapBlazor.JitsiMeet", "src\components\BootstrapBlazor.JitsiMeet\BootstrapBlazor.JitsiMeet.csproj", "{08458CA3-BF81-48E8-870D-9389DC037808}"
+EndProject
 Global
 	GlobalSection(SolutionConfigurationPlatforms) = preSolution
 		Debug|Any CPU = Debug|Any CPU
@@ -504,6 +506,10 @@ Global
 		{F3043A78-1942-4524-BDC4-7E88F56DF3D5}.Debug|Any CPU.Build.0 = Debug|Any CPU
 		{F3043A78-1942-4524-BDC4-7E88F56DF3D5}.Release|Any CPU.ActiveCfg = Release|Any CPU
 		{F3043A78-1942-4524-BDC4-7E88F56DF3D5}.Release|Any CPU.Build.0 = Release|Any CPU
+		{08458CA3-BF81-48E8-870D-9389DC037808}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{08458CA3-BF81-48E8-870D-9389DC037808}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{08458CA3-BF81-48E8-870D-9389DC037808}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{08458CA3-BF81-48E8-870D-9389DC037808}.Release|Any CPU.Build.0 = Release|Any CPU
 	EndGlobalSection
 	GlobalSection(SolutionProperties) = preSolution
 		HideSolutionNode = FALSE
@@ -591,6 +597,7 @@ Global
 		{1FDDF0AD-7AB6-4706-A183-26C680817BB4} = {FF1089BE-C704-4374-B629-C57C08E1798F}
 		{CED55D86-57CF-CB0D-E880-370C44C0DB1F} = {FF1089BE-C704-4374-B629-C57C08E1798F}
 		{F3043A78-1942-4524-BDC4-7E88F56DF3D5} = {FF1089BE-C704-4374-B629-C57C08E1798F}
+		{08458CA3-BF81-48E8-870D-9389DC037808} = {FF1089BE-C704-4374-B629-C57C08E1798F}
 	EndGlobalSection
 	GlobalSection(ExtensibilityGlobals) = postSolution
 		SolutionGuid = {D5EB1960-6F30-4CE1-B375-EAE1F787D6FF}

src/components/BootstrapBlazor.JitsiMeet/BootstrapBlazor.JitsiMeet.csproj

@@ -0,0 +1,20 @@
+<Project Sdk="Microsoft.NET.Sdk.Razor">
+
+  <PropertyGroup>
+    <Version>9.0.0</Version>
+  </PropertyGroup>
+
+  <PropertyGroup>
+    <PackageTags>Bootstrap Blazor WebAssembly wasm UI Components Meeting</PackageTags>
+    <Description>Bootstrap UI components extensions of Meeting</Description>
+  </PropertyGroup>
+
+  <ItemGroup>
+    <PackageReference Include="BootstrapBlazor" Version="$(BBVersion)" />
+  </ItemGroup>
+
+  <ItemGroup>
+    <Using Include="Microsoft.JSInterop" />
+  </ItemGroup>
+
+</Project>

src/components/BootstrapBlazor.JitsiMeet/Meet.razor

@@ -0,0 +1,4 @@
+@inherits BootstrapModuleComponentBase
+@attribute [JSModuleAutoLoader("./_content/BootstrapBlazor.JitsiMeet/Meet.razor.js", JSObjectReference = true)]
+
+<div @attributes="@AdditionalAttributes" id="@Id"></div>

src/components/BootstrapBlazor.JitsiMeet/Meet.razor.cs

@@ -0,0 +1,59 @@
+using Microsoft.AspNetCore.Components;
+
+namespace BootstrapBlazor.Components;
+
+/// <summary>
+/// Meet 组件用于显示会议室
+/// </summary>
+public partial class Meet
+{
+    /// <summary>
+    /// 获得/设置 服务器地址
+    /// </summary>
+    [Parameter]
+    [EditorRequired]
+    public string? Domain { get; set; }
+
+    /// <summary>
+    /// 获得/设置 会议信息
+    /// </summary>
+    [EditorRequired]
+    [Parameter]
+    public MeetOption? Option { get; set; }
+
+    /// <summary>
+    /// 获得/设置 会议室初始化完成事件
+    /// </summary>
+    [Parameter]
+    public Action? OnLoad { get; set; }
+
+    /// <summary>
+    /// <inheritdoc/>
+    /// </summary>
+    /// <returns></returns>
+    protected override async Task InvokeInitAsync()
+    {
+        await InvokeVoidAsync("init", Id, Interop, Domain, Option);
+    }
+
+    /// <summary>
+    /// 执行命令
+    /// </summary>
+    /// <param name="command"></param>
+    /// <param name="args"></param>
+    /// <returns></returns>
+    public Task ExecuteCommand(string command, object? args = null)
+    {
+        return InvokeVoidAsync("executeCommand", Id, command, args);
+    }
+
+    /// <summary>
+    /// 会议室加载完成回调
+    /// </summary>
+    [JSInvokable]
+    public void OnLoadCallBack()
+    {
+        OnLoad?.Invoke();
+    }
+}
+

src/components/BootstrapBlazor.JitsiMeet/Meet.razor.js

@@ -0,0 +1,37 @@
+import { addScript } from '../BootstrapBlazor/modules/utility.js';
+import Data from '../BootstrapBlazor/modules/data.js';
+
+export async function init(id, invoke, domain, options) {
+    await addScript('./_content/BootstrapBlazor.JitsiMeet/external_api.js');
+
+    const el = document.getElementById(id);
+    options.parentNode = el;
+    options.onload = () => {
+        invoke.invokeMethodAsync('OnLoadCallBack');
+    }
+    const api = new JitsiMeetExternalAPI(domain, options);
+    const jitsi = { el, invoke, api };
+    Data.set(id, jitsi);
+}
+
+export function dispose(id) {
+    const p = Data.get(id);
+    Data.remove(id);
+
+    if (p) {
+        const { api } = p;
+        if (api) {
+            api.dispose();
+        }
+    }
+}
+
+export function executeCommand(id, command, option) {
+    const p = Data.get(id);
+    if (p) {
+        const { api } = p;
+        if (api) {
+            api.executeCommand(command, option);
+        }
+    }
+}

src/components/BootstrapBlazor.JitsiMeet/MeetOption.cs

@@ -0,0 +1,78 @@
+// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
+// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
+// Website: https://www.blazor.zone or https://argozhang.github.io/
+
+namespace BootstrapBlazor.Components;
+
+/// <summary>
+/// IFrame 参数类
+/// </summary>
+public class MeetOption
+{
+    /// <summary>
+    /// 要加入的房间名称
+    /// </summary>
+    public string? RoomName { get; set; }
+
+    /// <summary>
+    /// 创建的 IFrame 宽度，可以是数值（像素单位）或字符串（格式：数字 + px、em、pt 或 %）
+    /// </summary>
+    public object? Width { get; set; }
+
+    /// <summary>
+    /// 创建的 IFrame 高度，可以是数值（像素单位）或字符串（格式：数字 + px、em、pt 或 %）
+    /// </summary>
+    public object? Height { get; set; }
+
+    /// <summary>
+    /// config.js 文件中选项的重写配置
+    /// </summary>
+    public object? ConfigOverwrite { get; set; }
+
+    /// <summary>
+    /// interface_config.js 文件中选项的重写配置
+    /// </summary>
+    public object? InterfaceConfigOverwrite { get; set; }
+
+    /// <summary>
+    /// JWT token
+    /// </summary>
+    public string? Jwt { get; set; }
+
+    /// <summary>
+    /// 邀请参加会议的参与者信息数组
+    /// </summary>
+    public object? Invitees { get; set; }
+
+    /// <summary>
+    /// 会议中使用的设备信息映射
+    /// </summary>
+    public object? Devices { get; set; }
+
+    /// <summary>
+    /// 参与者启动或加入会议的信息（例如，电子邮件）
+    /// </summary>
+    public UserInfo? UserInfo { get; set; }
+
+    /// <summary>
+    /// 默认会议语言(默认为中文)
+    /// </summary>
+    public string Lang { get; set; } = "zh";
+}
+
+/// <summary>
+/// 参会人员信息
+/// </summary>
+public class UserInfo
+{
+    /// <summary>
+    /// 参与者的电子邮件地址
+    /// </summary>
+    public string? Email { get; set; }
+
+    /// <summary>
+    /// 参与者的名称
+    /// </summary>
+    public string? DisplayName { get; set; }
+}
+