add file list tab; add web player (#439)

Makefile

@@ -14,10 +14,12 @@ $(notdir $(abspath $(wildcard src/cmd/*/))):
 		CGO_ENABLED=0 \
 		UPX_ENABLE=$(UPX_ENABLE) \
 		TAGS=$(tags) \
+		GCFLAGS=$(gcflags) \
 		./src/hack/build.sh $@
 
 .PHONY: dev
 dev: tags := "dev"
+dev: gcflags := "all=-N -l"
 dev: build
 
 .PHONY: release

src/hack/build.sh

@@ -12,7 +12,7 @@ _build() {
   ld_flags=$3
   go build \
     -tags ${TAGS:-"release"} \
-    -gcflags=${GOFLAGS:-""} \
+    -gcflags="${GCFLAGS:-""}" \
     -o ${OUTPUT_PATH}/${bin_name} \
     -ldflags="${ld_flags}" \
     ./src/cmd/${target}/

src/servers/handler.go

@@ -9,6 +9,7 @@ import (
 	"net/http"
 	"net/url"
 	"os"
+	"path/filepath"
 	"sort"
 	"strings"
 
@@ -358,3 +359,64 @@ func applyLiveRoomsByConfig(ctx context.Context, newLiveRooms []configs.LiveRoom
 func getInfo(writer http.ResponseWriter, r *http.Request) {
 	writeJSON(writer, consts.AppInfo)
 }
+
+func getFileInfo(writer http.ResponseWriter, r *http.Request) {
+	vars := mux.Vars(r)
+	path := vars["path"]
+
+	inst := instance.GetInstance(r.Context())
+	base, err := filepath.Abs(inst.Config.OutPutPath)
+	if err != nil {
+		writeJSON(writer, commonResp{
+			ErrMsg: "无效输出目录",
+		})
+		return
+	}
+
+	absPath, err := filepath.Abs(filepath.Join(base, path))
+	if err != nil {
+		writeJSON(writer, commonResp{
+			ErrMsg: "无效路径",
+		})
+		return
+	}
+	if !strings.HasPrefix(absPath, base) {
+		writeJSON(writer, commonResp{
+			ErrMsg: "异常路径",
+		})
+		return
+	}
+
+	files, err := ioutil.ReadDir(absPath)
+	if err != nil {
+		writeJSON(writer, commonResp{
+			ErrMsg: "获取目录失败",
+		})
+		return
+	}
+
+	type jsonFile struct {
+		IsFolder     bool   `json:"is_folder"`
+		Name         string `json:"name"`
+		LastModified int64  `json:"last_modified"`
+		Size         int64  `json:"size"`
+	}
+	jsonFiles := make([]jsonFile, len(files))
+	json := struct {
+		Files []jsonFile `json:"files"`
+		Path  string     `json:"path`
+	}{
+		Path: path,
+	}
+	for i, file := range files {
+		jsonFiles[i].IsFolder = file.IsDir()
+		jsonFiles[i].Name = file.Name()
+		jsonFiles[i].LastModified = file.ModTime().Unix()
+		if !file.IsDir() {
+			jsonFiles[i].Size = file.Size()
+		}
+	}
+	json.Files = jsonFiles
+
+	writeJSON(writer, json)
+}

src/servers/server.go

@@ -49,8 +49,11 @@ func initMux(ctx context.Context) *mux.Router {
 	apiRoute.HandleFunc("/lives/{id}", getLive).Methods("GET")
 	apiRoute.HandleFunc("/lives/{id}", removeLive).Methods("DELETE")
 	apiRoute.HandleFunc("/lives/{id}/{action}", parseLiveAction).Methods("GET")
+	apiRoute.HandleFunc("/file/{path:.*}", getFileInfo).Methods("GET")
 	apiRoute.Handle("/metrics", promhttp.Handler())
 
+	m.PathPrefix("/files/").Handler(http.StripPrefix("/files/", http.FileServer(http.Dir(instance.GetInstance(ctx).Config.OutPutPath))))
+
 	fs, err := webapp.FS()
 	if err != nil {
 		instance.GetInstance(ctx).Logger.Fatal(err)

src/webapp/package.json

@@ -13,14 +13,16 @@
     "@types/react-dom": "^16.9.0",
     "@types/react-router-dom": "^5.1.3",
     "antd": "^3.26.7",
+    "artplayer": "^4.6.2",
     "copy-to-clipboard": "^3.3.3",
+    "mpegts.js": "^1.7.3",
     "prismjs": "^1.29.0",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "react-router-dom": "^5.1.2",
     "react-scripts": "^3.x.x",
     "react-simple-code-editor": "^0.13.1",
-    "typescript": "~3.7.2"
+    "typescript": "~5.0.4"
   },
   "scripts": {
     "start": "react-scripts --openssl-legacy-provider start",
@@ -43,8 +45,8 @@
       "last 1 safari version"
     ]
   },
-  "proxy": "http://localhost:8080/",
+  "proxy": "http://127.0.0.1:8080/",
   "devDependencies": {
     "@types/prismjs": "^1.26.0"
   }
-}
+}

src/webapp/src/App.tsx

@@ -6,11 +6,13 @@ import RootLayout from './component/layout/index';
 import LiveList from './component/live-list/index';
 import LiveInfo from './component/live-info/index';
 import ConfigInfo from './component/config-info/index';
- 
+import FileList from './component/file-list/index';
+
 const App: React.FC = () => {
   return (
     <RootLayout>
       <Switch>
+        <Route path="/fileList/:path(.*)?" component={FileList}></Route>
         <Route path="/configInfo" component={ConfigInfo}></Route>
         <Route path="/liveInfo" component={LiveInfo}></Route>
         <Route path="/" component={LiveList}></Route>

src/webapp/src/component/file-list/file-list.css

@@ -0,0 +1,9 @@
+.ant-list-item:hover {
+    background-color: rgba(232, 232, 232);
+}
+
+#art-container {
+    background-color: rgba(0, 0, 0, 0.5);
+    height: 100%;
+    padding: 8px;
+}

src/webapp/src/component/file-list/index.tsx

@@ -0,0 +1,230 @@
+import React from "react";
+import API from "../../utils/api";
+import { Breadcrumb, Divider, Icon, Table } from "antd";
+import { Link, RouteComponentProps } from "react-router-dom";
+import Utils from "../../utils/common";
+import './file-list.css';
+import { PaginationConfig } from "antd/lib/pagination";
+import { SorterResult } from "antd/lib/table";
+import Artplayer from "artplayer";
+import mpegtsjs from "mpegts.js";
+
+const api = new API();
+
+interface MatchParams {
+    path: string | undefined;
+}
+
+interface Props extends RouteComponentProps<MatchParams> {
+}
+
+type CurrentFolderFile = {
+    is_folder: boolean;
+    name: string;
+    last_modified: number;
+    size: number;
+}
+
+interface IState {
+    parentFolders: string[];
+    currentFolderFiles: CurrentFolderFile[];
+    sortedInfo: Partial<SorterResult<CurrentFolderFile>>;
+    isPlayerVisible: boolean;
+}
+
+class FileList extends React.Component<Props, IState> {
+    constructor(props: Props) {
+        super(props);
+        this.state = {
+            parentFolders: [props.match.params.path ?? ""],
+            currentFolderFiles: [],
+            sortedInfo: {},
+            isPlayerVisible: false,
+        };
+    }
+
+    componentDidMount(): void {
+        this.requestFileList(this.props.match.params.path);
+    }
+
+    componentWillReceiveProps(nextProps: Props) {
+        this.requestFileList(nextProps.match.params.path);
+    }
+
+    setPath(path: string) {
+        const folders = path.split("/");
+        this.setState({ parentFolders: folders });
+    }
+
+    requestFileList(path: string = ""): void {
+        api.getFileList(path)
+            .then((rsp: any) => {
+                if (rsp?.files) {
+                    this.setState({
+                        currentFolderFiles: rsp.files,
+                        sortedInfo: path ? {
+                            order: "descend",
+                            columnKey: "last_modified",
+                        } : {
+                            order: "ascend",
+                            columnKey: "name"
+                        },
+                    })
+                }
+            });
+    }
+
+    showPlayer = () => {
+        this.setState({
+            isPlayerVisible: true,
+        });
+    };
+
+    hidePlayer = () => {
+        this.setState({
+            isPlayerVisible: false,
+        });
+    };
+
+    handleChange = (pagination: PaginationConfig, filtetrs: Partial<Record<keyof CurrentFolderFile, string[]>>, sorter: SorterResult<CurrentFolderFile>) => {
+        this.setState({
+            sortedInfo: sorter,
+        });
+    };
+
+    onRowClick = (record: CurrentFolderFile) => {
+        let path = record.name;
+        if (this.props.match.params.path) {
+            path = this.props.match.params.path + "/" + path;
+        }
+        if (record.is_folder) {
+            this.props.history.push("/fileList/" + path);
+        } else {
+            this.setState({
+                isPlayerVisible: true,
+            }, () => {
+                const art = new Artplayer({
+                    pip: true,
+                    setting: true,
+                    playbackRate: true,
+                    aspectRatio: true,
+                    flip: true,
+                    autoSize: true,
+                    autoMini: true,
+                    mutex: true,
+                    miniProgressBar: true,
+                    backdrop: false,
+                    fullscreen: true,
+                    fullscreenWeb: true,
+                    lang: 'zh-cn',
+                    container: '#art-container',
+                    url: `files/${path}`,
+                    customType: {
+                        flv: function (video, url) {
+                            if (mpegtsjs.isSupported()) {
+                                const flvPlayer = mpegtsjs.createPlayer({
+                                    type: "flv",
+                                    url: url,
+                                    hasVideo: true,
+                                    hasAudio: true,
+                                }, {});
+                                flvPlayer.attachMediaElement(video);
+                                flvPlayer.load();
+                            } else {
+                                if (art) {
+                                    art.notice.show = "不支持播放格式: flv";
+                                }
+                            }
+                        },
+                    },
+                });
+            });
+        }
+    };
+
+    renderParentFolderBar(): JSX.Element {
+        const rootFolderName = "输出文件路径";
+        let currentPath = "/fileList";
+        const rootBreadcrumbItem = <Breadcrumb.Item key={rootFolderName}>
+            <Link to={currentPath} onClick={this.hidePlayer}>{rootFolderName}</Link>
+        </Breadcrumb.Item>;
+        const folders = this.props.match.params.path?.split("/") || [];
+        const items = folders.map(v => {
+            currentPath += "/" + v;
+            return <Breadcrumb.Item key={v}>
+                <Link to={`${currentPath}`} onClick={this.hidePlayer}>{v}</Link>
+            </Breadcrumb.Item>
+        });
+        return <Breadcrumb>
+            {rootBreadcrumbItem}
+            {items}
+        </Breadcrumb>;
+    }
+
+    renderCurrentFolderFileList(): JSX.Element {
+        let { sortedInfo } = this.state;
+        sortedInfo = sortedInfo || {};
+        const columns = [{
+            title: "文件名",
+            dataIndex: "name",
+            key: "name",
+            sorter: (a: CurrentFolderFile, b: CurrentFolderFile) => {
+                if (a.is_folder === b.is_folder) {
+                    return a.name.localeCompare(b.name);
+                } else {
+                    return a.is_folder ? -1 : 1;
+                }
+            },
+            sortOrder: sortedInfo.columnKey === "name" && sortedInfo.order,
+            render: (text: string, record: CurrentFolderFile, index: number) => {
+                return [
+                    record.is_folder ? <Icon type="folder" theme="filled" /> : <Icon type="file" />,
+                    <Divider type="vertical" />,
+                    record.name,
+                ];
+            }
+        }, {
+            title: "文件大小",
+            dataIndex: "size",
+            key: "size",
+            sorter: (a: CurrentFolderFile, b: CurrentFolderFile) => a.size - b.size,
+            sortOrder: sortedInfo.columnKey === "size" && sortedInfo.order,
+            render: (text: string, record: CurrentFolderFile, index: number) => {
+                if (record.is_folder) {
+                    return "";
+                } else {
+                    return Utils.byteSizeToHumanReadableFileSize(record.size);
+                }
+            },
+        }, {
+            title: "最后修改时间",
+            dataIndex: "last_modified",
+            key: "last_modified",
+            sorter: (a: CurrentFolderFile, b: CurrentFolderFile) => a.last_modified - b.last_modified,
+            sortOrder: sortedInfo.columnKey === "last_modified" && sortedInfo.order,
+            render: (text: string, record: CurrentFolderFile, index: number) => Utils.timestampToHumanReadable(record.last_modified),
+        }];
+
+        return (<Table
+            columns={columns}
+            dataSource={this.state.currentFolderFiles}
+            onChange={this.handleChange}
+            pagination={{ pageSize: 50 }}
+            onRowClick={this.onRowClick}
+            scroll={{ x: 'max-content' }}
+        />);
+    }
+
+    renderArtPlayer() {
+        return <div id="art-container"></div>;
+    }
+
+    render(): JSX.Element {
+        return (<div style={{ height: "100%" }}>
+            {this.renderParentFolderBar()}
+            {this.state.isPlayerVisible ? this.renderArtPlayer() : this.renderCurrentFolderFileList()}
+        </div>);
+    }
+}
+
+export default FileList;

src/webapp/src/component/layout/index.tsx

@@ -34,6 +34,7 @@ class RootLayout extends React.Component {
                                     <Menu.Item key="1"><Link to="/">监控列表</Link></Menu.Item>
                                     <Menu.Item key="2"><Link to="/liveInfo">系统状态</Link></Menu.Item>
                                     <Menu.Item key="3"><Link to="/configInfo">设置</Link></Menu.Item>
+                                    <Menu.Item key="4"><Link to="/fileList">文件</Link></Menu.Item>
                                 </SubMenu>
                             </Menu>
                         </Sider>

src/webapp/src/component/live-list/index.tsx

@@ -4,12 +4,13 @@ import PopDialog from '../pop-dialog/index';
 import AddRoomDialog from '../add-room-dialog/index';
 import API from '../../utils/api';
 import './live-list.css';
+import { RouteComponentProps } from "react-router-dom";
 
 const api = new API();
 
 const REFRESH_TIME = 3 * 60 * 1000;
 
-interface Props {
+interface Props extends RouteComponentProps {
     refresh?: () => void
 }
 
@@ -115,6 +116,10 @@ class LiveList extends React.Component<Props, IState> {
                     }}>
                     <Button type="link" size="small">删除</Button>
                 </PopDialog>
+                <Divider type="vertical" />
+                <Button type="link" size="small" onClick={(e) => {
+                    this.props.history.push(`/fileList/${data.address}/${data.name}`);
+                }}>文件</Button>
             </span>
         ),
     };

src/webapp/src/utils/api.ts

@@ -102,6 +102,13 @@ class API {
         return utils.requestPut(`${BASE_URL}/raw-config`, json);
     }
 
+    /**
+     *
+     * @param path 获取文件目录
+     */
+    getFileList(path: string = "") {
+        return utils.requestGet(`${BASE_URL}/file/${path}`);
+    }
 }
 
 export default API;

src/webapp/src/utils/common.ts

@@ -99,6 +99,26 @@ class Utils {
     static alertError(err?: any) {
         console.error(err ? err : "Server Error!");
     }
+
+    static byteSizeToHumanReadableFileSize(size: number): string {
+        if (!size) {
+            return "0";
+        }
+        const i = Math.floor(Math.log(size) / Math.log(1024));
+        const ret = Number((size / Math.pow(1024, i)).toFixed(2)) + " " + ['B', 'kB', 'MB', 'GB', 'TB'][i];
+        return ret;
+    }
+
+    static timestampToHumanReadable(timestamp: number): string {
+        const date = new Date(timestamp * 1000);
+        const year = date.getFullYear().toString().padStart(4, "0");
+        const month = date.getMonth().toString().padStart(2, "0");
+        const day = date.getDate().toString().padStart(2, "0");
+        const hour = date.getHours().toString().padStart(2, "0");
+        const min = date.getMinutes().toString().padStart(2, "0");
+        const sec = date.getSeconds().toString().padStart(2, "0");
+        return `${year}-${month}-${day} ${hour}:${min}:${sec}`;
+    }
 }
 
 export default Utils;

src/webapp/yarn.lock

@@ -10,9 +10,9 @@
     tinycolor2 "^1.4.1"
 
 "@ant-design/create-react-context@^0.2.4":
-  version "0.2.5"
-  resolved "https://registry.yarnpkg.com/@ant-design/create-react-context/-/create-react-context-0.2.5.tgz#f5f5a9163b4772097712837397ad30e22e79f858"
-  integrity sha512-1rMAa4qgP2lfl/QBH9i78+Gjxtj9FTMpMyDGZsEBW5Kih72EuUo9958mV8PgpRkh4uwPSQ7vVZWXeyNZXVAFDg==
+  version "0.2.6"
+  resolved "https://registry.yarnpkg.com/@ant-design/create-react-context/-/create-react-context-0.2.6.tgz#4833a1e4422e5bda5211965e6fed984659c6e4a1"
+  integrity sha512-pHUuaE50/WEek4w2Q+QYVieLPIGfXM+nUsGSsg8xO6oHBw7dfd14Ws/6q3/L6eZ60zjUiv3WUlSzpWyCOXLqbQ==
   dependencies:
     gud "^1.0.0"
     warning "^4.0.3"
@@ -1758,9 +1758,9 @@
     "@types/react" "*"
 
 "@types/react-slick@^0.23.4":
-  version "0.23.4"
-  resolved "https://registry.yarnpkg.com/@types/react-slick/-/react-slick-0.23.4.tgz#c97e2a9e7e3d1933c68593b8e82752fab1e8ce53"
-  integrity sha512-vXoIy4GUfB7/YgqubR4H7RALo+pRdMYCeLgWwV3MPwl5pggTlEkFBTF19R7u+LJc85uMqC7RfsbkqPLMQ4ab+A==
+  version "0.23.10"
+  resolved "https://registry.yarnpkg.com/@types/react-slick/-/react-slick-0.23.10.tgz#56126e6e4e95cdce7771535b2811c2c1931a7caa"
+  integrity sha512-ZiqdencANDZy6sWOWJ54LDvebuXFEhDlHtXU9FFipQR2BcYU2QJxZhvJPW6YK7cocibUiNn+YvDTbt1HtCIBVA==
   dependencies:
     "@types/react" "*"
 
@@ -2391,10 +2391,17 @@ arrify@^1.0.1:
   resolved "https://registry.yarnpkg.com/arrify/-/arrify-1.0.1.tgz#898508da2226f380df904728456849c1501a4b0d"
   integrity sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0=
 
+artplayer@^4.6.2:
+  version "4.6.2"
+  resolved "https://registry.yarnpkg.com/artplayer/-/artplayer-4.6.2.tgz#d56c2887c10086f339722e025e9ece881561aaa9"
+  integrity sha512-9RMfFFy2wGgHUCnrwk+M2Z5OiLWQcBL+YzkSBwSi6IuJG6oM+TlfJJZt09RL2iag6DNQ+AUYtB879WUHxbqfIQ==
+  dependencies:
+    option-validator "^2.0.6"
+
 asap@~2.0.3, asap@~2.0.6:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46"
-  integrity sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=
+  integrity sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA==
 
 asn1.js@^5.2.0:
   version "5.4.1"
@@ -2665,7 +2672,7 @@ babel-preset-react-app@^9.1.2:
 babel-runtime@6.x, babel-runtime@^6.23.0, babel-runtime@^6.26.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
-  integrity sha1-llxwWGaOgrVde/4E/yM3vItWR/4=
+  integrity sha512-ITKNuq2wKlW1fJg9sSW52eepoYgZBggvOAHC0u/CYu/qxQ9EVzThCgR69BnSXLHjy2f7SY5zaQ4yt7H9ZVxY2g==
   dependencies:
     core-js "^2.4.0"
     regenerator-runtime "^0.11.0"
@@ -3206,11 +3213,16 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
-classnames@2.x, classnames@^2.2.0, classnames@^2.2.1, classnames@^2.2.3, classnames@^2.2.5, classnames@^2.2.6:
+classnames@2.x, classnames@^2.2.1, classnames@^2.2.3, classnames@^2.2.5, classnames@^2.2.6:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.1.tgz#dfcfa3891e306ec1dad105d0e88f4417b8535e8e"
   integrity sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==
 
+classnames@^2.2.0:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.2.tgz#351d813bf0137fcc6a76a16b88208d2560a0d924"
+  integrity sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==
+
 classnames@~2.2.6:
   version "2.2.6"
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
@@ -3371,7 +3383,7 @@ commondir@^1.0.1:
 component-classes@1.x, component-classes@^1.2.5, component-classes@^1.2.6:
   version "1.2.6"
   resolved "https://registry.yarnpkg.com/component-classes/-/component-classes-1.2.6.tgz#c642394c3618a4d8b0b8919efccbbd930e5cd691"
-  integrity sha1-xkI5TDYYpNiwuJGe/Mu9kw5c1pE=
+  integrity sha512-hPFGULxdwugu1QWW3SvVOCUHLzO34+a2J6Wqy0c5ASQkfi9/8nZcBB0ZohaEbXOQlCflMAEMmEWk7u7BVs4koA==
   dependencies:
     component-indexof "0.0.3"
 
@@ -3383,7 +3395,7 @@ component-emitter@^1.2.1:
 component-indexof@0.0.3:
   version "0.0.3"
   resolved "https://registry.yarnpkg.com/component-indexof/-/component-indexof-0.0.3.tgz#11d091312239eb8f32c8f25ae9cb002ffe8d3c24"
-  integrity sha1-EdCRMSI5648yyPJa6csAL/6NPCQ=
+  integrity sha512-puDQKvx/64HZXb4hBwIcvQLaLgux8o1CbWl39s41hrIIZDl1lJiD5jc22gj3RBeGK0ovxALDYpIbyjqDUUl0rw==
 
 compose-function@3.0.3:
   version "3.0.3"
@@ -3540,7 +3552,7 @@ core-js-pure@^3.15.0:
 core-js@^1.0.0:
   version "1.2.7"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636"
-  integrity sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY=
+  integrity sha512-ZiPp9pZlgxpWRu0M+YWbm6+aQ84XEfH1JRXvfOc/fILWI0VKhLC2LX13X1NYq4fULzLMq7Hfh43CSo2/aIaUPA==
 
 core-js@^2.4.0:
   version "2.6.12"
@@ -4144,7 +4156,7 @@ dom-align@^1.7.0:
 dom-closest@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/dom-closest/-/dom-closest-0.2.0.tgz#ebd9f91d1bf22e8d6f477876bbcd3ec90216c0cf"
-  integrity sha1-69n5HRvyLo1vR3h2u80+yQIWwM8=
+  integrity sha512-6neTn1BtJlTSt+XSISXpnOsF1uni1CHsP/tmzZMGWxasYFHsBOqrHPnzmneqEgKhpagnfnfSfbvRRW0xFsBHAA==
   dependencies:
     dom-matches ">=1.0.1"
 
@@ -4158,12 +4170,12 @@ dom-converter@^0.2.0:
 dom-matches@>=1.0.1:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/dom-matches/-/dom-matches-2.0.0.tgz#d2728b416a87533980eb089b848d253cf23a758c"
-  integrity sha1-0nKLQWqHUzmA6wibhI0lPPI6dYw=
+  integrity sha512-2VI856xEDCLXi19W+4BechR5/oIS6bKCKqcf16GR8Pg7dGLJ/eBOWVbCmQx2ISvYH6wTNx5Ef7JTOw1dRGRx6A==
 
 dom-scroll-into-view@1.x, dom-scroll-into-view@^1.2.0, dom-scroll-into-view@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/dom-scroll-into-view/-/dom-scroll-into-view-1.2.1.tgz#e8f36732dd089b0201a88d7815dc3f88e6d66c7e"
-  integrity sha1-6PNnMt0ImwIBqI14Fdw/iObWbH4=
+  integrity sha512-LwNVg3GJOprWDO+QhLL1Z9MMgWe/KAFLxVWKzjRTxNSPn8/LLDIfmuG71YHznXCqaqTjvHJDYO1MEAgX6XCNbQ==
 
 dom-serializer@0:
   version "0.2.2"
@@ -4359,7 +4371,7 @@ enhanced-resolve@^4.1.0:
 enquire.js@^2.1.6:
   version "2.1.6"
   resolved "https://registry.yarnpkg.com/enquire.js/-/enquire.js-2.1.6.tgz#3e8780c9b8b835084c3f60e166dbc3c2a3c89814"
-  integrity sha1-PoeAybi4NQhMP2DhZtvDwqPImBQ=
+  integrity sha512-/KujNpO+PT63F7Hlpu4h3pE3TokKRHN26JYmQpPyjkRD/N57R7bPDNojMXdi7uveAKjYB7yQnartCxZnFWr0Xw==
 
 entities@^2.0.0:
   version "2.2.0"
@@ -4429,6 +4441,11 @@ es6-iterator@2.0.3, es6-iterator@~2.0.3:
     es5-ext "^0.10.35"
     es6-symbol "^3.1.1"
 
+es6-promise@^4.2.5:
+  version "4.2.8"
+  resolved "https://registry.yarnpkg.com/es6-promise/-/es6-promise-4.2.8.tgz#4eb21594c972bc40553d276e510539143db53e0a"
+  integrity sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w==
+
 es6-symbol@^3.1.1, es6-symbol@~3.1.3:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/es6-symbol/-/es6-symbol-3.1.3.tgz#bad5d3c1bcdac28269f4cb331e431c78ac705d18"
@@ -4700,7 +4717,7 @@ eventemitter3@^4.0.0:
 eventlistener@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/eventlistener/-/eventlistener-0.0.1.tgz#ed2baabb852227af2bcf889152c72c63ca532eb8"
-  integrity sha1-7Suqu4UiJ68rz4iRUscsY8pTLrg=
+  integrity sha512-hXZ5N9hmp3n7ovmVgG+2vIO6KcjSU10/d0A1Ixcf0i29dxCwAGTNGrSJCfLmlvmgQD8FYzyp//S8+Hpq4Nd7uA==
 
 events@^3.0.0:
   version "3.3.0"
@@ -4915,9 +4932,9 @@ fb-watchman@^2.0.0:
     bser "2.1.1"
 
 fbjs@^0.8.15:
-  version "0.8.17"
-  resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd"
-  integrity sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90=
+  version "0.8.18"
+  resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.18.tgz#9835e0addb9aca2eff53295cd79ca1cfc7c9662a"
+  integrity sha512-EQaWFK+fEPSoibjNy8IxUtaFOMXcWsY0JaVrQoZR9zC8N2Ygf9iDITPWjUTVIax95b6I742JFLqASHfsag/vKA==
   dependencies:
     core-js "^1.0.0"
     isomorphic-fetch "^2.1.1"
@@ -4925,7 +4942,7 @@ fbjs@^0.8.15:
     object-assign "^4.1.0"
     promise "^7.1.1"
     setimmediate "^1.0.5"
-    ua-parser-js "^0.7.18"
+    ua-parser-js "^0.7.30"
 
 figgy-pudding@^3.5.1:
   version "3.5.2"
@@ -5390,7 +5407,7 @@ gzip-size@5.1.1:
 hammerjs@^2.0.8:
   version "2.0.8"
   resolved "https://registry.yarnpkg.com/hammerjs/-/hammerjs-2.0.8.tgz#04ef77862cff2bb79d30f7692095930222bf60f1"
-  integrity sha1-BO93hiz/K7edMPdpIJWTAiK/YPE=
+  integrity sha512-tSQXBXS/MWQOn/RKckawJ61vvsDpCom87JgxiYdGwHdOa0ht0vzUWDlfioofFCRU0L+6NGDt6XzbgoJvZkMeRQ==
 
 handle-thing@^2.0.0:
   version "2.0.1"
@@ -5748,12 +5765,12 @@ immer@1.10.0:
 immutable@^3.7.4:
   version "3.8.2"
   resolved "https://registry.yarnpkg.com/immutable/-/immutable-3.8.2.tgz#c2439951455bb39913daf281376f1530e104adf3"
-  integrity sha1-wkOZUUVbs5kT2vKBN28VMOEErfM=
+  integrity sha512-15gZoQ38eYjEjxkorfbcgBKBL6R7T459OuK+CpcWt7O3KF4uPCx2tD0uFETlUDIyo+1789crbMhTvQBSR5yBMg==
 
 immutable@~3.7.4:
   version "3.7.6"
   resolved "https://registry.yarnpkg.com/immutable/-/immutable-3.7.6.tgz#13b4d3cb12befa15482a26fe1b2ebae640071e4b"
-  integrity sha1-E7TTyxK++hVIKib+Gy665kAHHks=
+  integrity sha512-AizQPcaofEtO11RZhPPHBOJRdo/20MKQF9mBLnVkBoyHi1/zXK8fzVdnEpSV9gxqtnh6Qomfp3F0xT5qP/vThw==
 
 import-cwd@^2.0.0:
   version "2.1.0"
@@ -6208,7 +6225,7 @@ is-root@2.1.0:
 is-stream@^1.0.1, is-stream@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
-  integrity sha1-EtSj3U5o4Lec6428hBc66A2RykQ=
+  integrity sha512-uQPm8kcs47jx38atAcWTVxyltQYoPT68y9aWYdV6yWXSyW8mzSat0TL6CiWdZeCdF3KrAvpVtnHbTv4RN+rqdQ==
 
 is-string@^1.0.5, is-string@^1.0.6:
   version "1.0.6"
@@ -6274,7 +6291,7 @@ isobject@^3.0.0, isobject@^3.0.1:
 isomorphic-fetch@^2.1.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz#611ae1acf14f5e81f729507472819fe9733558a9"
-  integrity sha1-YRrhrPFPXoH3KVB0coGf6XM1WKk=
+  integrity sha512-9c4TNAKYXM5PRyVcwUZrF3W09nQ+sO7+jydgs4ZGW9dhsLG2VOlISJABombdQqQRXCwuYG3sYV/puGf5rp0qmA==
   dependencies:
     node-fetch "^1.0.1"
     whatwg-fetch ">=0.10.0"
@@ -6937,7 +6954,7 @@ kind-of@^5.0.0:
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-5.1.0.tgz#729c91e2d857b7a419a1f9aa65685c4c33f5845d"
   integrity sha512-NGEErnH6F2vUuXDh+OlbcKW7/wOcfdRHaZ7VWtqCztfHri/++YKmP51OdWeGPuqCOba6kk2OTe5d02VmTB80Pw==
 
-kind-of@^6.0.0, kind-of@^6.0.2:
+kind-of@^6.0.0, kind-of@^6.0.2, kind-of@^6.0.3:
   version "6.0.3"
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-6.0.3.tgz#07c05034a6c349fa06e24fa35aa76db4580ce4dd"
   integrity sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==
@@ -7116,7 +7133,7 @@ lodash.templatesettings@^4.0.0:
 lodash.throttle@^4.0.0:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
-  integrity sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ=
+  integrity sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ==
 
 lodash.uniq@^4.5.0:
   version "4.5.0"
@@ -7472,6 +7489,14 @@ move-concurrently@^1.0.1:
     rimraf "^2.5.4"
     run-queue "^1.0.3"
 
+mpegts.js@^1.7.3:
+  version "1.7.3"
+  resolved "https://registry.yarnpkg.com/mpegts.js/-/mpegts.js-1.7.3.tgz#a422ed501d778fa86f9eef98d71fd62fc013f262"
+  integrity sha512-kqZ1C1IsbAQN72cK8vMrzKeM7hwrwSBbFAwVAc7PPweOeoZxCANrc7fAVDKMfYUzxdNkMTnec9tVmlxmKZB0TQ==
+  dependencies:
+    es6-promise "^4.2.5"
+    webworkify-webpack "^2.1.5"
+
 ms@2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
@@ -7875,6 +7900,13 @@ optimize-css-assets-webpack-plugin@5.0.3:
     cssnano "^4.1.10"
     last-call-webpack-plugin "^3.0.0"
 
+option-validator@^2.0.6:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/option-validator/-/option-validator-2.0.6.tgz#a314dae65e26db5f948ef0ff96fc88f18bb76ed6"
+  integrity sha512-tmZDan2LRIRQyhUGvkff68/O0R8UmF+Btmiiz0SmSw2ng3CfPZB9wJlIjHpe/MKUZqyIZkVIXCrwr1tIN+0Dzg==
+  dependencies:
+    kind-of "^6.0.3"
+
 optionator@^0.8.1, optionator@^0.8.3:
   version "0.8.3"
   resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.8.3.tgz#84fa1d036fe9d3c7e21d99884b601167ec8fb495"
@@ -9035,7 +9067,16 @@ prompts@^2.0.1:
     kleur "^3.0.3"
     sisteransi "^1.0.5"
 
-prop-types@15.x, prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.6, prop-types@^15.5.7, prop-types@^15.5.8, prop-types@^15.5.9, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@15.x, prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.6, prop-types@^15.5.7, prop-types@^15.5.8, prop-types@^15.5.9, prop-types@^15.6.0:
+  version "15.8.1"
+  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
+  integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
+  dependencies:
+    loose-envify "^1.4.0"
+    object-assign "^4.1.1"
+    react-is "^16.13.1"
+
+prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -9685,9 +9726,9 @@ react-is@^17.0.1:
   integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
 
 react-lazy-load@^3.0.13:
-  version "3.1.13"
-  resolved "https://registry.yarnpkg.com/react-lazy-load/-/react-lazy-load-3.1.13.tgz#236943f76b7084cc8458716d9632a1c9853ea5cd"
-  integrity sha512-eAVNUn3vhNj79Iv04NOCwy/sCLyqDEhL3j9aJKV7VJuRBDg6rCiB+BIWHuG7VXJGCgb//6nX/soR8PTyWRhFvQ==
+  version "3.1.14"
+  resolved "https://registry.yarnpkg.com/react-lazy-load/-/react-lazy-load-3.1.14.tgz#536047d295f578614540a5b417b70b1155f36d9a"
+  integrity sha512-7tsOItf2HmEwhEWMaA/a2XlShuya7rBxqWAR0TPMO1XSf6ybxSDI2bMV8M6vtWkveX9TlSpb0qLB7NMMpDHVDQ==
   dependencies:
     eventlistener "0.0.1"
     lodash.debounce "^4.0.0"
@@ -10434,7 +10475,7 @@ set-value@^2.0.0, set-value@^2.0.1:
 setimmediate@^1.0.4, setimmediate@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285"
-  integrity sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU=
+  integrity sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==
 
 setprototypeof@1.1.0:
   version "1.1.0"
@@ -11157,9 +11198,9 @@ tiny-warning@^1.0.0, tiny-warning@^1.0.3:
   integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
 
 tinycolor2@^1.4.1:
-  version "1.4.2"
-  resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.4.2.tgz#3f6a4d1071ad07676d7fa472e1fac40a719d8803"
-  integrity sha512-vJhccZPs965sV/L2sU4oRQVAos0pQXwsvTLkWYdqJ+a8Q5kPFzJTuOFwy7UniPli44NKQGAglksjvOcpo95aZA==
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.6.0.tgz#f98007460169b0263b97072c5ae92484ce02d09e"
+  integrity sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==
 
 tmp@^0.0.33:
   version "0.0.33"
@@ -11324,15 +11365,15 @@ typedarray@^0.0.6:
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
   integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
 
-typescript@~3.7.2:
-  version "3.7.7"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.7.7.tgz#c931733e2ec10dda56b855b379cc488a72a81199"
-  integrity sha512-MmQdgo/XenfZPvVLtKZOq9jQQvzaUAUpcKW8Z43x9B2fOm4S5g//tPtMweZUIP+SoBqrVPEIm+dJeQ9dfO0QdA==
+typescript@~5.0.4:
+  version "5.0.4"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.0.4.tgz#b217fd20119bd61a94d4011274e0ab369058da3b"
+  integrity sha512-cW9T5W9xY37cc+jfEnaUvX91foxtHkza3Nw3wkoF4sSlKn0MONdkdEndig/qPBWXNkmplh3NzayQzCiHM4/hqw==
 
-ua-parser-js@^0.7.18:
-  version "0.7.28"
-  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.28.tgz#8ba04e653f35ce210239c64661685bf9121dec31"
-  integrity sha512-6Gurc1n//gjp9eQNXjD9O3M/sMwVtN5S8Lv9bvOYBfKfDNiIIhqiyi01vMBO45u4zkDE420w/e0se7Vs+sIg+g==
+ua-parser-js@^0.7.30:
+  version "0.7.35"
+  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.35.tgz#8bda4827be4f0b1dda91699a29499575a1f1d307"
+  integrity sha512-veRf7dawaj9xaWEu9HoTVn5Pggtc/qj+kqTOFvNiN1l0YdxwC1kvel57UCjThjGa3BHBihE8/UJAHI+uQHmd/g==
 
 unbox-primitive@^1.0.1:
   version "1.0.1"
@@ -11767,6 +11808,11 @@ websocket-extensions@>=0.1.1:
   resolved "https://registry.yarnpkg.com/websocket-extensions/-/websocket-extensions-0.1.4.tgz#7f8473bc839dfd87608adb95d7eb075211578a42"
   integrity sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg==
 
+webworkify-webpack@^2.1.5:
+  version "2.1.5"
+  resolved "https://registry.yarnpkg.com/webworkify-webpack/-/webworkify-webpack-2.1.5.tgz#bf4336624c0626cbe85cf1ffde157f7aa90b1d1c"
+  integrity sha512-2akF8FIyUvbiBBdD+RoHpoTbHMQF2HwjcxfDvgztAX5YwbZNyrtfUMgvfgFVsgDhDPVTlkbb5vyasqDHfIDPQw==
+
 whatwg-encoding@^1.0.1, whatwg-encoding@^1.0.3, whatwg-encoding@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/whatwg-encoding/-/whatwg-encoding-1.0.5.tgz#5abacf777c32166a51d085d6b4f3e7d27113ddb0"

yarn.lock

@@ -0,0 +1,4 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+