release: trtc-education-electron v1.0.3

CHANGELOG.md

@@ -1,3 +1,9 @@
+# 1.0.3 (2022-4-2)
+
+## Feature
+
+- 支持进入课堂前，检测和选择设备。
+
 # 1.0.2 (2022-2-22)
 
 ## Feature

build/app/package.json

@@ -1,8 +1,8 @@
 {
   "name": "trtc-education-electron",
-  "productName": "TRTCElectronEducation",
+  "productName": "TRTC-Education-Electron",
   "version": "1.0.3",
-  "description": "TRTC Electron Education based on Tencent RTC, Tencent IM and Electron for teachers and students interacting and coordinating remotely",
+  "description": "TRTC Education Electron based on Tencent RTC, Tencent IM and Electron for teachers and students interacting and coordinating remotely",
   "main": "./dist/main/main.js",
   "author": {
     "name": "Tencent Cloud",

src/renderer/components/class-device-detector/base-components/index.scss

@@ -0,0 +1,35 @@
+@import '../../../assets/style/variables.scss';
+.button {
+  padding: 6px 16px;
+  border-radius: 4px;
+  border: 0;
+  outline: none;
+  background-color: transparent;
+  user-select: none;
+  font-size: 0.875rem;
+  min-width: 64px;
+  box-sizing: border-box;
+  font-weight: 500;
+  line-height: 1.75;
+  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+    box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+    border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+}
+.outlined {
+  padding: 5px 15px;
+  border: 1px solid #006eff;
+  color: #006eff;
+  cursor: pointer;
+}
+.contained {
+  cursor: pointer;
+  color: $color-white;
+  background-color: #006eff;
+  box-shadow: 0px 3px 1px -2px rgb(0 0 0 / 20%),
+    0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%);
+}
+.disabled {
+  box-shadow: none;
+  color: rgba(0, 0, 0, 0.26);
+  background-color: rgba(0, 0, 0, 0.12);
+}

src/renderer/components/class-device-detector/base-components/index.tsx

@@ -0,0 +1,25 @@
+import React, { useEffect } from 'react';
+import './index.scss';
+
+interface ButtonProps {
+  type: string;
+  onClick: () => void;
+  className: string;
+  children: React.ReactNode | null;
+}
+function Button(props: ButtonProps) {
+  const { type, onClick, className, children } = props;
+  useEffect(() => {}, []);
+
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={`button ${type} ${className}`}
+    >
+      {children}
+    </button>
+  );
+}
+
+export default Button;

src/renderer/components/class-device-detector/cameraDetector.tsx

@@ -0,0 +1,83 @@
+import a18n from 'a18n';
+import React, { useState, useEffect, useRef } from 'react';
+import './index.scss';
+import DeviceSelect from './deviceSelect';
+import { tuiRoomCore } from '../../core/room-core';
+import Button from './base-components/index';
+
+const currentDetector = 'camera';
+interface CameraDetectorProps {
+  activeDetector: any;
+  handleCompleted: any;
+}
+function CameraDetector(props: CameraDetectorProps) {
+  const { activeDetector, handleCompleted } = props;
+  const [cameraLabel, setCameraLabel] = useState('');
+  const [cameraID, setCameraID] = useState(
+    tuiRoomCore.getCurrentCamera()?.deviceId
+  );
+  const [choseDevice, setChoseDevice] = useState(null);
+  const ref = useRef(null);
+
+  const initStream = async () => {
+    if (ref.current) {
+      tuiRoomCore.startCameraDeviceTest(ref.current);
+    }
+  };
+
+  useEffect(() => {
+    if (activeDetector === currentDetector && cameraID) {
+      initStream();
+    }
+    return () => {
+      if (activeDetector === currentDetector) {
+        tuiRoomCore.stopCameraDeviceTest();
+      }
+    };
+  }, [activeDetector]);
+
+  const handleCameraChange = async (cameraDevice: any) => {
+    setChoseDevice(cameraDevice);
+    const { deviceId, deviceName } = cameraDevice;
+    tuiRoomCore.setCurrentCamera(deviceId);
+    setCameraID(deviceId);
+    setCameraLabel(deviceName);
+  };
+
+  const handleError = () => {
+    handleCompleted('error', cameraLabel);
+  };
+
+  const handleSuccess = () => {
+    handleCompleted('success', cameraLabel);
+  };
+
+  return (
+    activeDetector === currentDetector && (
+      <div className="testing-body">
+        <div className="device-list">
+          <span className="device-list-title">{a18n('摄像头选择')}</span>
+          <DeviceSelect
+            deviceType="camera"
+            choseDevice={choseDevice}
+            onChange={handleCameraChange}
+          />
+        </div>
+        <div id="camera-video" className="camera-video" ref={ref} />
+        <div className="testing-info-container">
+          <div className="testing-info">{a18n('是否可以清楚的看到自己？')}</div>
+          <div className="button-list">
+            <Button type="outlined" onClick={handleError} className="">
+              {a18n('看不到')}
+            </Button>
+            <Button type="contained" onClick={handleSuccess} className="">
+              {a18n('看的到')}
+            </Button>
+          </div>
+        </div>
+      </div>
+    )
+  );
+}
+
+export default CameraDetector;

src/renderer/components/class-device-detector/detectorReport.tsx

@@ -0,0 +1,134 @@
+import a18n from 'a18n';
+import React from 'react';
+import {
+  CameraIcon,
+  MicIcon,
+  SpeakerIcon,
+  NetworkIcon,
+  NETWORK_QUALITY,
+} from './utils';
+import Button from './base-components/index';
+
+interface DetectorReportProps {
+  reportData: any;
+  handleReset: any;
+  handleClose: any;
+}
+function DetectorReport(props: DetectorReportProps) {
+  const { reportData, handleReset, handleClose } = props;
+  return (
+    <div className="device-testing-report">
+      <div className="testing-title">{a18n('检测报告')}</div>
+      <div className="device-report-list">
+        <div className="device-report">
+          <div className="device-info">
+            <span className="report-icon">{CameraIcon}</span>
+            <div className="device-name">{reportData.camera.results}</div>
+          </div>
+          <div
+            className={`${
+              reportData.camera.type === 'success' ? 'green' : 'red'
+            }`}
+          >
+            {reportData.camera.type === 'success' ? a18n('正常') : a18n('异常')}
+          </div>
+        </div>
+        <div className="device-report">
+          <div className="device-info">
+            <span className="report-icon">{MicIcon}</span>
+            <div className="device-name">{reportData.microphone.results}</div>
+          </div>
+          <div
+            className={`${
+              reportData.microphone.type === 'success' ? 'green' : 'red'
+            }`}
+          >
+            {reportData.microphone.type === 'success'
+              ? a18n('正常')
+              : a18n('异常')}
+          </div>
+        </div>
+        {reportData.speaker && (
+          <div className="device-report">
+            <div className="device-info">
+              <span className="report-icon">{SpeakerIcon}</span>
+              <div className="device-name">{reportData.speaker.results}</div>
+            </div>
+            <div
+              className={`${
+                reportData.speaker.type === 'success' ? 'green' : 'red'
+              }`}
+            >
+              {reportData.speaker.type === 'success'
+                ? a18n('正常')
+                : a18n('异常')}
+            </div>
+          </div>
+        )}
+        {reportData.network && (
+          <div className="device-report">
+            <div className="device-info">
+              <span className="report-icon">{NetworkIcon}</span>
+              <div className="device-name">{a18n('网络延时')}</div>
+            </div>
+            <div
+              className={`${
+                reportData.network.result.rtt <= 200 ? 'green' : 'red'
+              }`}
+            >
+              {`${reportData.network.result.rtt}ms`}
+            </div>
+          </div>
+        )}
+        {reportData.network && (
+          <div className="device-report">
+            <div className="device-info">
+              <span className="report-icon">{NetworkIcon}</span>
+              <div className="device-name">{a18n('上行网络质量')}</div>
+            </div>
+            <div
+              className={`${
+                reportData.network.result.uplinkQuality > 0 &&
+                reportData.network.result.uplinkQuality < 4
+                  ? 'green'
+                  : 'red'
+              }`}
+            >
+              {/* @ts-ignore */}
+              {a18n(NETWORK_QUALITY[reportData.network.result.uplinkQuality])}
+            </div>
+          </div>
+        )}
+        {reportData.network && (
+          <div className="device-report">
+            <div className="device-info">
+              <span className="report-icon">{NetworkIcon}</span>
+              <div className="device-name">{a18n('下行网络质量')}</div>
+            </div>
+            <div
+              className={`${
+                reportData.network.result.downlinkQuality > 0 &&
+                reportData.network.result.downlinkQuality < 4
+                  ? 'green'
+                  : 'red'
+              }`}
+            >
+              {/* @ts-ignore */}
+              {a18n(NETWORK_QUALITY[reportData.network.result.downlinkQuality])}
+            </div>
+          </div>
+        )}
+      </div>
+      <div className="device-report-footer">
+        <Button type="outlined" onClick={handleReset} className="">
+          {a18n('重新检测')}
+        </Button>
+        <Button type="contained" onClick={handleClose} className="">
+          {a18n('完成检测')}
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export default DetectorReport;