's'

babel.config.js

@@ -8,3 +8,6 @@ module.exports = {
     }]
   ]
 }
+
+
+

config/index.js

@@ -27,7 +27,10 @@ const config = {
   },
 
   h5: {
+    // 默认会编译为 es5，修改为 es2017 或更高
+    esnext: true,
     webpackChain(chain) {
+
       chain.output.filename("static/js/[name].[contenthash:8].js");
       chain.output.chunkFilename("static/js/[name].[contenthash:8].js");
       chain
@@ -54,6 +57,7 @@ const config = {
             simplify: true, // 开启简化，提高性能
             // 禁用对 async/await 的转换
             target: "browser", // 或设置为适合目标环境的 ECMAScript 版本
+
             disableOptimizations: true, // 禁用某些优化来避免处理 async/await
           },
           ["**/*.js", "!node_modules/**"], // 避免对 node_modules 进行混淆
@@ -125,6 +129,10 @@ const config = {
       },
       // 允许特定域名访问
       allowedHosts: ["nomadyt.com", "localhost", ".nomadyt.com"], // 允许所有 *.nomadyt.com 子域访问
+      // ⬇️ 关键配置：禁用 overlay 错误弹出
+      client: {
+        overlay: false,
+      },
     },
     htmlPluginOption: {
       favicon: path.resolve(__dirname, "..", "src", "images", "youtube.ico"), // 同样处理 favicon 路径
@@ -135,7 +143,8 @@ const config = {
       },
     },
 
-    target: ["web", "browserslist:> 0.25%, not dead"],
+    // target: ["web", "browserslist:> 0.25%, not dead"],
+    target: ["web", "es2017"], // 关键点！
   },
 };
 

package.json

@@ -45,6 +45,7 @@
     "@tarojs/shared": "3.6.20",
     "@tarojs/taro": "3.6.20",
     "animate.css": "^4.1.1",
+    "canvas-confetti": "^1.9.3",
     "github-markdown-css": "^5.6.1",
     "marked": "^14.1.2",
     "raw-loader": "^4.0.2",
@@ -56,6 +57,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.8.0",
+    "@babel/preset-env": "^7.26.9",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.5",
     "@tarojs/cli": "3.6.20",
     "@tarojs/taro-loader": "3.6.20",
@@ -72,9 +74,11 @@
     "javascript-obfuscator": "^4.1.1",
     "postcss": "^8.4.18",
     "react-refresh": "^0.11.0",
+    "regenerator-runtime": "^0.14.1",
     "stylelint": "9.3.0",
     "ts-node": "^10.9.1",
     "typescript": "^4.1.0",
+    "video.js": "^8.22.0",
     "webpack": "^5.78.0",
     "workbox-webpack-plugin": "^7.3.0"
   }

src/app.js

@@ -5,6 +5,9 @@ import './app.scss'
 import 'animate.css';
 import 'taro-ui/dist/style/index.scss' // 全局引入一次即可
 
+import 'core-js/stable';
+import 'regenerator-runtime/runtime'; // 用于支持 async/await
+
 /**
    * 有数埋点SDK 默认配置
    * 使用方法请参考文档 https://mp.zhls.qq.com/youshu-docs/develop/sdk/Taro.html
@@ -68,7 +71,7 @@ class App extends Component {
 
   // this.props.children 是将要会渲染的页面
   render () {
-    return this.props.children
+    return this.props?.children
   }
 }
 

src/index.html

@@ -20,10 +20,10 @@
   -->
 
   <!-- <link rel="icon" type="image/x-icon" href="/static/images/youtube.ico"> -->
-  <title>Youtube运营</title>
+  <title>live</title>
-  <meta name="description" content="Youtube运营笔记">
+  <meta name="description" content="live">
-  <meta property="og:description" content="Youtube运营笔记">
+  <meta property="og:description" content="live">
-  <meta name="twitter:description" content="Youtube运营笔记">
+  <meta name="twitter:description" content="live">
 
   <script><%= htmlWebpackPlugin.options.script %></script>
   <!-- 禁止缓存 -->

src/pages/index/index.config.js

@@ -1,3 +1,3 @@
 export default {
-  navigationBarTitleText: 'Youtube运营笔记'
+  navigationBarTitleText: 'live'
 }

src/pages/index/index.jsx

@@ -1,507 +1,488 @@
 import { Component } from "react";
 import Taro from "@tarojs/taro";
-import { View, Text, Image, Button } from "@tarojs/components";
+import { View, Text, Image, Button, Audio } from "@tarojs/components";
 import "./index.scss";
-import { AtTabBar } from "taro-ui";
+import React, { useCallback, useEffect, useState, useRef } from "react";
-import React, { useCallback, useEffect, useState } from "react";
-import { AtGrid } from "taro-ui";
-import { Swiper, SwiperItem } from "@tarojs/components";
-import { AtCard } from "taro-ui";
-import { AtImagePicker } from "taro-ui";
-import { AtButton } from "taro-ui";
-import { AtSearchBar } from "taro-ui";
-import { Picker } from "@tarojs/components";
-import { AtList, AtListItem, AtNavBar, AtTag, AtMessage } from "taro-ui";
 import {
-  AtModal,
+  AtList,
-  AtModalHeader,
+  AtListItem,
-  AtModalContent,
+  AtNavBar,
-  AtModalAction,
+  AtTag,
-  AtAvatar,
+  AtMessage,
-  AtAccordion,
+  AtCurtain,
 } from "taro-ui";
+
+import gif11 from "../../images/11.gif";
+
+import gif22 from "../../images/22.gif";
+import doro11 from "../../images/doro11.gif";
+import baby from "../../images/baby.mp3";
+import confetti from "canvas-confetti";
 import { AtToast } from "taro-ui";
-import { AtIcon } from "taro-ui";
+import { userinfoArr } from "./userinfoArr";
-import { VIEW } from "@tarojs/runtime";
-import "animate.css";
-import touxiang from "../../images/touxiang.png";
-import cat from "../../images/cat.jpg";
-import girl from "../../images/girl.jpg";
 
-import emoji from "../../images/emoji.png";
-import phone from "../../images/phone.png";
-import robot from "../../images/robot.png";
-import nomad from "../../images/nomad.png";
-// import book from "../../images/book.png";
-import qrcode from "../../images/qrcode.png";
-
-import meetup from "../../images/meetup.jpg";
-import bookqr from "../../images/bookqr.jpg";
-import loft from "../../images/loft.png";
-import AIGC from "../../images/AIGC.png";
-import robot192 from "../../images/robot192.png";
-import youtubesvg from "../../images/youtube.svg";
-import youtube2 from "../../images/yt2.svg";
-import youtube3 from "../../images/yt3.svg";
-import youtube4 from "../../images/yt4.svg";
-import ytGpt from "../../images/ytGpt.png";
-
-import demo from "../../images/demo.svg";
-import group from "../../images/group.svg";
-import book from "../../images/book.svg";
-
-import youtubeIco from "../../images/youtube.ico";
-import youtube from "../../images/youtube.png";
-import youtube192 from "../../images/youtube192.png";
-
-// export default class Index extends Component {
 const Index = () => {
-  const [current, setcurrent] = useState(0);
+  // ws://（或者 wss:// 对于 HTTPS 环境
-  const [openId, setopenId] = useState(null);
+  const [message, setMessage] = useState("");
-  const [wxid, setwxid] = useState(null);
+  const [status, setStatus] = useState("0"); //0无状态,1是小新
-  const [userInfo, setuserInfo] = useState({});
+  const [userInfoArr, setuserInfoArr] = useState([]); // 用户信息
+  const [giftUser, setGiftUser] = useState({}); // 用户信息
+  const [giftOpen, setGiftOpen] = useState(false); // 用户信息
 
-  const [open, setopen] = useState(false);
+  const [messageArr, setMessageArr] = useState([]);
-  const [referer, setreferer] = useState(window.document.referrer);
 
-  const [isOpened, setisOpened] = useState(false);
+  // 记录最后一次真实观众进场时间戳
-  const [meetupQR, setmeetupQR] = useState(false);
+  const lastRealJoinTime = useRef(Date.now());
 
-  const [bookToast, setbookToast] = useState(false);
-  const [meetupToast, setmeetupToast] = useState(false);
-
-  const [joinMeetup, setjoinMeetup] = useState(false);
-  const [bookpay, setbookpay] = useState(0);
-
-  const [isWeChat, setisWeChat] = useState(false);
-
-  const getOpenidFromUrl = (url) => {
-    const pattern = /[?&]openid=([^&#]+)/;
-    const match = url.match(pattern);
-    if (match) {
-      return match[1];
-    }
-    return null;
-  };
-
-  // 是否在微信客户端
-  const isWeChatFun = () => {
-    var ua = navigator.userAgent.toLowerCase();
-    if (ua.indexOf("micromessenger") != -1) {
-      setisWeChat(true);
-      return true;
-    } else {
-      setisWeChat(false);
-      return false;
-    }
-  };
-
-  // pwa安装弹窗
   // useEffect(() => {
-  //   window.addEventListener("beforeinstallprompt", (event) => {
+  //   const intervalId = setInterval(() => {
-  //     event.preventDefault();
+  //     speak(`欢迎进入直播间`);
-  //     let installPrompt = event;
+  //   }, 3000);
-  //     // 显示安装按钮
+
-  //     document.getElementById("install-btn").addEventListener("click", () => {
+  //   return () => {
-  //       installPrompt.prompt();
+  //     clearInterval(intervalId);
-  //     });
+  //   };
-  //   });
   // }, []);
 
-  // 获取openid
+  // 随机取一个观众
-  const getOpenid = () => {
+  const getRandomUser = () => {
-    // let newparams = Taro.getCurrentInstance().router.params;
+    const randomIndex = Math.floor(Math.random() * userinfoArr.length);
-    // let urlopenid = newparams.openid;
+    return {
-
+      ...userinfoArr[randomIndex],
-    // hash模式
+      animate: true,
-    // http://192.168.31.245:10086/?openid=o7LFAwR32hWGq9XOpd7ZxK1wZxq8#/pages/index/index
+      uid: Date.now() + Math.random(),
-    let hashopenid = null;
+    };
-    if (window.location.href.includes("openid")) {
-      hashopenid = getOpenidFromUrl(window.location.href);
-    } else {
-      // hashopenid = window.localStorage.getItem("openid");
-    }
-    if (!!hashopenid && hashopenid != "undefined" && hashopenid != "null") {
-      // 获取到openid
-      window.localStorage.setItem("openid", hashopenid);
-      setopenId(hashopenid);
-
-      // window.alert(hashopenid);
-      // 查询数据库是否存在openid
-      Taro.request({
-        method: "GET",
-        url: `${process.env.TARO_API_API}/user/${hashopenid}`, //仅为示例，并非真实的接口地址
-        // url: `${process.env.TARO_API_API}/user/${window.localStorage.getItem("openid")}`, //仅为示例，并非真实的接口地址
-        success: function (res) {
-          if (res?.data?.userInfo) {
-            //  有完整的用户信息userInfo
-            setuserInfo(res?.data?.userInfo);
-            window.localStorage.setItem("userInfo", userInfo);
-          }
-        },
-        complete: function (finy) {
-          // 获取wxid参数
-          getWxidFromUrl();
-        },
-      });
-    } else {
-      let nowUrl = window.location.href;
-      window.localStorage.removeItem("openid");
-      let payUrl = `https://payjs.cn/api/openid?mchid=1561724891&callback_url=${nowUrl}`;
-      window.location.href = payUrl;
-    }
   };
 
-  // 获取更新用户信息
+  // 3秒检测一次是否无人，插入假观众
-  const getUserinfo = (wxid) => {
-    Taro.request({
-      method: "GET",
-      url: `${process.env.TARO_API_API}/user/${wxid}`, //仅为示例，并非真实的接口地址
-      // url: `${process.env.TARO_API_API}/user/${window.localStorage.getItem("openid")}`, //仅为示例，并非真实的接口地址
-      success: function (res) {
-        if (res?.data?.userInfo) {
-          //判断wxid是否存在
-          if (res?.data?.userInfo?.openid) {
-            //  有完整的用户信息userInfo
-            setuserInfo(res?.data?.userInfo);
-            window.localStorage.setItem("userInfo", userInfo);
-          }
-        }
-      },
-      complete: function (finy) {},
-    });
-  };
-
-  // 获取url中的wxid
-  const getWxidFromUrl = () => {
-    const urlParams = new URLSearchParams(window.location.search);
-    const urlwxid = urlParams.get("wxid");
-    if (!!urlwxid) {
-      setwxid(urlwxid);
-      window.localStorage.setItem("wxid", wxid);
-      // 优先查询openid是否存在数据库
-      Taro.request({
-        method: "GET",
-        url: `${process.env.TARO_API_API}/user/${urlwxid}`, //仅为示例，并非真实的接口地址
-        // url: `${process.env.TARO_API_API}/user/${window.localStorage.getItem("openid")}`, //仅为示例，并非真实的接口地址
-        success: function (res) {
-          if (res?.data?.userInfo) {
-            //判断wxid是否存在
-            if (res?.data?.userInfo?.openid) {
-              // window.alert(res?.data?.userInfo?.openid);
-              // window.alert(window.localStorage.getItem("openid"));
-
-              if (
-                res?.data?.userInfo?.openid !==
-                window.localStorage.getItem("openid")
-              ) {
-                // 删除其他用户的wxid
-                window.localStorage.removeItem("userInfo");
-                window.localStorage.removeItem("openid");
-                window.localStorage.removeItem("wxid");
-                window.location.href = "http://nomad.hackrobot.cn";
-              } else {
-                //  有完整的用户信息userInfo
-                setuserInfo(res?.data?.userInfo);
-                window.localStorage.setItem("userInfo", userInfo);
-              }
-            } else {
-              // 绑定wxid与openid到数据库
-              wxidTapopenid(urlwxid);
-            }
-          } else {
-            // 新增wxid用户
-          }
-        },
-        complete: function (finy) {
-          // tg消息通知
-          tgMessage();
-        },
-      });
-    } else {
-      // tg消息通知
-      tgMessage();
-    }
-    return wxid;
-  };
-
-  // 绑定wxid与openid
-  const wxidTapopenid = (newWxid) => {
-    const userUpdateData = {
-      openid: window.localStorage.getItem("openid"), // 只更新 openid 字段
-    };
-    Taro.request({
-      method: "PUT",
-      // url: `${process.env.TARO_API_API}/user/${urlwxid}`, //仅为示例，并非真实的接口地址
-      url: `${process.env.TARO_API_API}/user/${newWxid}`, //仅为示例，并非真实的接口地址
-      data: userUpdateData,
-      header: {
-        "Content-Type": "application/json",
-      },
-      success: function (res) {},
-      fail: function (err) {},
-      complete: function (finy) {},
-    });
-  };
-
-  // 新增openid用户
-  const addopenidUser = () => {
-    const userUpdateData = {
-      openid: window.localStorage.getItem("openid"), // 只更新 openid 字段
-    };
-    Taro.request({
-      method: "GET",
-      // url: `${process.env.TARO_API_API}/user/${urlwxid}`, //仅为示例，并非真实的接口地址
-      url: `${process.env.TARO_API_API}/user/${window.localStorage.getItem(
-        "openid"
-      )}`, //仅为示例，并非真实的接口地址
-      data: userUpdateData,
-      header: {
-        "Content-Type": "application/json",
-      },
-      success: function (res) {},
-      fail: function (err) {},
-      complete: function (finy) {},
-    });
-  };
-
-  // 网页查看通知
-  const tgMessage = () => {
-    Taro.request({
-      method: "GET",
-      url: `${
-        process.env.TARO_API_API
-      }/tgMessage?openid=${window.localStorage.getItem("openid")}`, //仅为示例，并非真实的接口地址
-      // url: "https://pay.hackrobot.cn${process.env.TARO_API_API}/payh5", //仅为示例，并非真实的接口地址
-      success: function (res) {
-        // console.log("访问提醒发送成功");
-      },
-    });
-  };
-
-  const sendNtfy = () => {
-    // fetch("https://ntfy.nomadcna.com/awE5vPZI1LoRvsN1", {
-    //   method: "POST", // PUT works too
-    //   body: "Backup successful 😀",
-    // });
-
-    Taro.request({
-      method: "POST",
-      url: `${`https://ntfy.nomadcna.com/awE5vPZI1LoRvsN1`}`,
-      success: function (res) {
-        console.log("访问提醒发送成功");
-      },
-    });
-  };
-  useEffect(() => {
-    let inwechat = isWeChatFun();
-    if (inwechat) {
-      // 获取openId
-      getOpenid();
-    } else {
-      // window.alert('不在微信')
-    }
-  }, []);
 
   useEffect(() => {
-    // alert(window.localStorage.getItem("bookpay"))
+    const interval = setInterval(() => {
-    setbookpay(window.localStorage.getItem("bookpay"));
+      const now = Date.now();
-  }, []);
+      if (now - lastRealJoinTime.current > 10000) {
+        // 超过10秒无人进入
+        const fakeUser = getRandomUser();
+        console.log("⚠️ 3秒无人进入，插入假观众:", fakeUser.nick_name);
 
-  const goBack = () => {
+        setuserInfoArr((prev) => [fakeUser, ...prev]);
-    Taro.navigateBack({});
+        speak(`欢迎${fakeUser.nick_name} 进入直播间`);
-  };
 
-  const handleClick = (value) => {
+        setTimeout(() => {
-    // window.alert(value)
+          setuserInfoArr((prev) =>
-    setopen(value);
+            prev.map((u) =>
-  };
+              u.uid === fakeUser.uid ? { ...u, animate: false } : u
-
+            )
-  const payh5 = (type, total_fee = 1000) => {
-    // console.log("111");
-    Taro.request({
-      method: "POST",
-      url: `${process.env.TARO_API_API}/payh5`,
-      // url: "${process.env.TARO_API_API}/payh5",
-
-      // url: "https://pay.hackrobot.cn${process.env.TARO_API_API}/payh5", //仅为示例，并非真实的接口地址
-
-      data: {
-        callback_url: window.location.href,
-        openid: window.localStorage.getItem("openid"),
-        total_fee: total_fee, // 金额,单位:分
-        type: type, //订单类型 book/meetup/video/vip
-      },
-      header: {
-        "content-type": "application/json", // 默认值
-      },
-      success: function (res) {
-        console.log(res.data);
-        // window.alert(res.data.jsapi);
-        WeixinJSBridge.invoke(
-          "getBrandWCPayRequest",
-          {
-            // 以下6个支付参数通过payjs的jsapi接口获取
-            // appId: "wxc5205a653b0259bf",
-            // timeStamp: "1701401644",
-            // nonceStr: "KhOYB0wFV6j9qyQK",
-            // package: "prepay_id=wx01113404850024729b35f4d69b73500000",
-            // signType: "MD5",
-            // paySign: "2A823C8D47CCF871C6C65A56DC228CF8",
-            ...(res?.data?.jsapi ?? {}),
-          },
-          function (res) {
-            // 支付成功
-            if (res.err_msg == "get_brand_wcpay_request:ok") {
-              window.localStorage.setItem(type, 1); //订单类型 book/meetup/video/vip
-              WeixinJSBridge.call("closeWindow");
-            }
-          }
           );
-      },
+        }, 1000);
+
+        // 重置 lastRealJoinTime 防止一直插入假观众
+        lastRealJoinTime.current = Date.now();
+      }
+    }, 6000);
+
+    return () => clearInterval(interval);
+  }, []);
+
+  const confettiSvg = () => {
+    var scalar = 2;
+    var pineapple = confetti.shapeFromText({ text: "🍍", scalar });
+
+    confetti({
+      shapes: [pineapple],
+      scalar,
     });
   };
 
-  const goRead = () => {
+  const stars = () => {
-    Taro.navigateTo({
+    // note: you CAN only use a path for confetti.shapeFrompath(), but for
-      url: "/pages/book/index",
+    // performance reasons it is best to use it once in development and save
+    // the result to avoid the performance penalty at runtime
+
+    // pumpkin shape from https://thenounproject.com/icon/pumpkin-5253388/
+    var pumpkin = confetti.shapeFromPath({
+      path: "M449.4 142c-5 0-10 .3-15 1a183 183 0 0 0-66.9-19.1V87.5a17.5 17.5 0 1 0-35 0v36.4a183 183 0 0 0-67 19c-4.9-.6-9.9-1-14.8-1C170.3 142 105 219.6 105 315s65.3 173 145.7 173c5 0 10-.3 14.8-1a184.7 184.7 0 0 0 169 0c4.9.7 9.9 1 14.9 1 80.3 0 145.6-77.6 145.6-173s-65.3-173-145.7-173zm-220 138 27.4-40.4a11.6 11.6 0 0 1 16.4-2.7l54.7 40.3a11.3 11.3 0 0 1-7 20.3H239a11.3 11.3 0 0 1-9.6-17.5zM444 383.8l-43.7 17.5a17.7 17.7 0 0 1-13 0l-37.3-15-37.2 15a17.8 17.8 0 0 1-13 0L256 383.8a17.5 17.5 0 0 1 13-32.6l37.3 15 37.2-15c4.2-1.6 8.8-1.6 13 0l37.3 15 37.2-15a17.5 17.5 0 0 1 13 32.6zm17-86.3h-82a11.3 11.3 0 0 1-6.9-20.4l54.7-40.3a11.6 11.6 0 0 1 16.4 2.8l27.4 40.4a11.3 11.3 0 0 1-9.6 17.5z",
+      matrix: [
+        0.020491803278688523, 0, 0, 0.020491803278688523, -7.172131147540983,
+        -5.9016393442622945,
+      ],
+    });
+    // tree shape from https://thenounproject.com/icon/pine-tree-1471679/
+    var tree = confetti.shapeFromPath({
+      path: "M120 240c-41,14 -91,18 -120,1 29,-10 57,-22 81,-40 -18,2 -37,3 -55,-3 25,-14 48,-30 66,-51 -11,5 -26,8 -45,7 20,-14 40,-30 57,-49 -13,1 -26,2 -38,-1 18,-11 35,-25 51,-43 -13,3 -24,5 -35,6 21,-19 40,-41 53,-67 14,26 32,48 54,67 -11,-1 -23,-3 -35,-6 15,18 32,32 51,43 -13,3 -26,2 -38,1 17,19 36,35 56,49 -19,1 -33,-2 -45,-7 19,21 42,37 67,51 -19,6 -37,5 -56,3 25,18 53,30 82,40 -30,17 -79,13 -120,-1l0 41 -31 0 0 -41z",
+      matrix: [
+        0.03597122302158273, 0, 0, 0.03597122302158273, -4.856115107913669,
+        -5.071942446043165,
+      ],
+    });
+    // heart shape from https://thenounproject.com/icon/heart-1545381/
+    var heart = confetti.shapeFromPath({
+      path: "M167 72c19,-38 37,-56 75,-56 42,0 76,33 76,75 0,76 -76,151 -151,227 -76,-76 -151,-151 -151,-227 0,-42 33,-75 75,-75 38,0 57,18 76,56z",
+      matrix: [
+        0.03333333333333333, 0, 0, 0.03333333333333333, -5.566666666666666,
+        -5.533333333333333,
+      ],
+    });
+
+    var defaults = {
+      scalar: 2,
+      spread: 180,
+      particleCount: 30,
+      origin: { y: -0.1 },
+      startVelocity: -35,
+    };
+
+    confetti({
+      ...defaults,
+      shapes: [pumpkin],
+      colors: ["#ff9a00", "#ff7400", "#ff4d00"],
+    });
+    confetti({
+      ...defaults,
+      shapes: [tree],
+      colors: ["#8d960f", "#be0f10", "#445404"],
+    });
+    confetti({
+      ...defaults,
+      shapes: [heart],
+      colors: ["#f93963", "#a10864", "#ee0b93"],
     });
   };
 
+  useEffect(() => {
+    // var myCanvas = document.createElement("canvas");
+    // document.body.appendChild(myCanvas);
+    // var myConfetti = confetti.create(myCanvas, {
+    //   resize: true,
+    //   useWorker: true,
+    // });
+    // myConfetti({
+    //   particleCount: 100,
+    //   spread: 160,
+    //   // any other options from the global
+    //   // confetti function
+    // });
+  }, []);
+  useEffect(() => {
+    // 创建 WebSocket 连接
+    const socket = new WebSocket("ws://127.0.0.1:8888"); // 注意使用 ws://
+
+    // WebSocket 打开时触发
+    socket.onopen = () => {
+      console.log("WebSocket 连接已建立");
+      // socket.send('Hello from the client!');
+    };
+
+    // WebSocket 接收到消息时触发
+    socket.onmessage = (event) => {
+      try {
+        const data = JSON.parse(event.data);
+        console.log("data.type---", data.type);
+        if (data.type === "join") {
+          // const user = data.data; // 就是你后端推送的 user_data 字典
+          const user = {
+            ...data.data,
+            animate: true,
+            uid: Date.now() + Math.random(), // 确保唯一
+          };
+          console.log("✅ 新观众进场:", user);
+          // 更新真实观众进场时间
+          lastRealJoinTime.current = Date.now();
+
+          // setuserInfoArr((prev) => [user, ...prev]);
+          // 更新 state
+          setuserInfoArr((prev) => {
+            const updated = [user, ...prev];
+
+            // 同步到 localStorage
+            localStorage.setItem("userInfoArr", JSON.stringify(updated));
+            return updated;
+          });
+          setTimeout(() => {
+            setuserInfoArr((prev) =>
+              prev.map((u) =>
+                u.uid === user.uid ? { ...u, animate: false } : u
+              )
+            );
+          }, 1000);
+
+          // ✅ 举例使用
+          speak(`欢迎${user?.nick_name} 进入直播间`);
+        } else if (data.type === "like") {
+          const user = data.data;
+          // 粒子特效
+          // confettiSvg();
+          stars();
+        } else if (data.type === "gift") {
+          stars();
+          const user = data.data;
+          // console.log("✅ 送礼:", user);
+          speak(`谢谢${user?.nick_name} 送小星星`);
+          //特殊特效
+          setGiftUser(user);
+          setGiftOpen(true);
+          setTimeout(() => {
+            setGiftOpen(false);
+          }, 2000);
+        }
+      } catch (e) {
+        console.log("❌ 非 JSON 消息:", event.data);
+      }
+    };
+
+    // WebSocket 关闭时触发
+    socket.onclose = () => {
+      console.log("WebSocket 连接已关闭");
+    };
+
+    // WebSocket 错误时触发
+    socket.onerror = (error) => {
+      console.error("WebSocket 错误:", error);
+    };
+
+    // 清理 WebSocket 连接
+    return () => {
+      socket.close();
+    };
+  }, []);
+
+  // TTS播放语言
+  // const speak = (text) => {
+  //   const synth = window.speechSynthesis;
+  //   const speakNow = () => {
+  //     const utterance = new SpeechSynthesisUtterance(text);
+  //     utterance.lang = "zh-CN";
+  //     utterance.rate = 1;
+  //     utterance.pitch = 1;
+  //     synth.speak(utterance);
+  //   };
+
+  //   if (synth.getVoices().length === 0) {
+  //     // 有些浏览器语音列表异步加载
+  //     synth.onvoiceschanged = () => {
+  //       speakNow();
+  //     };
+  //   } else {
+  //     speakNow();
+  //   }
+  // };
+
+  const speak = (text) => {
+    if (typeof window === "undefined" || !window.speechSynthesis) {
+      console.warn("当前环境不支持 speechSynthesis");
+      return;
+    }
+
+    const synth = window.speechSynthesis;
+
+    const speakNow = () => {
+      // 防止连续播放冲突
+      synth.cancel();
+
+      const utterance = new SpeechSynthesisUtterance(text);
+      utterance.lang = "zh-CN"; // 中文语音
+      utterance.rate = 1;
+      utterance.pitch = 1;
+      utterance.volume = 1;
+
+      // ✅ 添加事件调试
+      utterance.onstart = () => console.log("开始播报:", text);
+      utterance.onend = () => console.log("播报结束");
+      utterance.onerror = (e) => console.error("播报失败:", e);
+
+      synth.speak(utterance);
+    };
+
+    if (synth.getVoices().length === 0) {
+      // ✅ 声音列表可能异步加载，监听一次
+      const handleVoicesChanged = () => {
+        console.log("voiceschanged 触发");
+        speakNow();
+        synth.removeEventListener("voiceschanged", handleVoicesChanged);
+      };
+      synth.addEventListener("voiceschanged", handleVoicesChanged);
+    } else {
+      speakNow();
+    }
+  };
+
+  useEffect(() => {
+    const unlockTTS = () => {
+      try {
+        const utterance = new SpeechSynthesisUtterance("语音已解锁");
+        utterance.lang = "zh-CN";
+        window.speechSynthesis.speak(utterance);
+      } catch (e) {
+        console.warn("TTS 解锁失败:", e);
+      }
+
+      document.removeEventListener("click", unlockTTS);
+    };
+
+    document.addEventListener("click", unlockTTS);
+  }, []);
+
+  useEffect(() => {
+    const isPC = window.innerWidth > 1600;
+
+    if (isPC) {
+      const app = document.querySelector(".index");
+      if (app) {
+        // 设置旋转后容器为屏幕高度宽、屏幕宽度高（注意：旋转后逻辑反转）
+        app.style.width = `${window.innerHeight}px`;
+        app.style.height = `${window.innerWidth}px`;
+      }
+    }
+  }, []);
+
+  useEffect(() => {
+    const innerAudioContext = Taro.createInnerAudioContext();
+    innerAudioContext.src = baby;
+    innerAudioContext.loop = true;
+
+    const handlePlay = () => {
+      innerAudioContext.play();
+      console.log("尝试播放音频");
+      document.removeEventListener("touchstart", handlePlay);
+      document.removeEventListener("click", handlePlay);
+    };
+
+    // document.addEventListener("touchstart", handlePlay, { once: true });
+    // document.addEventListener("click", handlePlay, { once: true });
+
+    return () => {
+      document.removeEventListener("touchstart", handlePlay);
+      document.removeEventListener("click", handlePlay);
+      innerAudioContext.destroy();
+    };
+  }, []);
+
   return (
-    <>
     <View className="index">
-        {/* 在线图书 */}
+      <View
-
+        className="giftKey"
-        {/* 参考资料https://readmake.com/ */}
+        style={{ color: "white", marginBottom: "20px", marginTop: "200px" }}
-        <View className="index_book  animate__animated animate__pulse">
-          <View className="index_book_left">
-            <View className="left_title">《Youtube运营笔记》</View>
-            <View className="left_text">数字游民-手册1</View>
-
-            {/* 卡片 */}
-            <View className="card">
-              <View className="cardItem">
-                <View className="cardItem_left">
-                  <Image
-                    className="cardItem_left_img youtubeSvg"
-                    src={youtubesvg}
-                  ></Image>
-                </View>
-                <View className="cardItem_right">
-                  <View className="cardItem_rightUp">出海赚美金</View>
-                  <View className="cardItem_rightDown">
-                    开通YPP合作伙伴计划
-                  </View>
-                </View>
-              </View>
-              <View className="cardItem">
-                <View className="cardItem_left">
-                  <Image className="cardItem_left_img" src={book}></Image>
-                </View>
-                <View className="cardItem_right">
-                  <View className="cardItem_rightUp">持续更新</View>
-                  <View className="cardItem_rightDown">在线电子书-免费</View>
-                </View>
-              </View>
-              <View className="cardItem">
-                <View className="cardItem_left">
-                  <Image className="cardItem_left_img" src={group}></Image>
-                </View>
-                <View className="cardItem_right">
-                  <View className="cardItem_rightUp">群聊交流</View>
-                  <View className="cardItem_rightDown">
-                    一个人走得快,一群人走的远
-                  </View>
-                </View>
-              </View>
-              {/* <View className="cardItem">
-                <View className="left_mobile">
-                  <Text>🚀 油管踩坑笔记</Text>
-                  <Text>1️⃣ YPP: 如何加入合作伙伴计划</Text>
-                  <Text>2️⃣ 基础:系统环境与静态住宅ip</Text>
-                  <Text>3️⃣ 收款:PIN码验证与外汇结算</Text>
-                  <Text>4️⃣ AI:辅助剪辑/生成视频</Text>
-                  <Text>5️⃣ -----------------</Text>
-
-                  <Text>🔥 一起实践,交流</Text>
-                </View>
-              </View> */}
-            </View>
-
-            <View className="left_btn ">
-              <AtButton
-                onClick={() => {
-                  try {
-                    sendNtfy();
-                  } catch (err) {
-                    console.error("Error sending notification:", err);
-                  }
-                  goRead();
-                }}
-                className="startRead"
-                type="primary"
-                size="small"
-                circle
       >
-                开始阅读
+        {/* <View>
-              </AtButton>
+          👍 <span style={{ fontSize: "10px" }}>{`点赞`} </span>&nbsp; ➖{" "}
-            </View>
+          <span style={{ fontSize: "12px" }}>看烟花</span>
-          </View>
+        </View> */}
-          <View className="index_book_img">
+        <View>
-            <Image
+          🩷 <span style={{ fontSize: "16px" }}>小星星</span> ➖{" "}
-              // style="width: 40%px;height:100%;background: #fff;"
+          <span style={{ fontSize: "16px" }}>看烟花</span>
-              src={ytGpt}
-            />
         </View>
       </View>
 
-        {/* <View className="group">
+      <View className="userInfoArr">
-          <View className="groupItem"></View>
+        {/* .slice(0, 5) */}
-          <View className="groupItem"></View>
+        {userInfoArr?.map((item, index) => (
-          <View className="groupItem"></View>
+          // <View
-          <View className="groupItem"></View>
+          //   key={index}
-          <View className="groupItem"></View>
+          //   className={index === 0 ? "message_item_first" : "message_item"}
-          <View className="groupItem"></View>
+          // >
-          <View className="groupItem"></View>
+          //   <span style={{ color: "white", marginTop: "20px" }}>
-          <View className="groupItem"></View>
+          //     {/* ${item?.gender === "1" ? "👨" : "👩"} */}
+          //     {`${item?.nick_name}`}
+          //   </span>
+          //   <View
+          //     className={`avatar_box ${
+          //       item.animate ? "animate__animated animate__tada" : ""
+          //     }`}
+          //   >
+          //     <Image
+          //       className="avatar_thumb"
+          //       style="width:200px;height:200px"
+          //       mode="scaleToFill"
+          //       src={item?.avatar_thumb.url_list_list?.[0]}
+          //     />
+          //   </View>
+          // </View>
+          <View
+            key={index}
+            className={index === 0 ? "message_item_first" : "message_item"}
+            style={{ whiteSpace: "pre-wrap", textAlign: "center" }} // 允许文字换行，文字居中
+          >
+            <span
+              style={{ color: "white", marginTop: "20px", display: "block" }}
+            >
+              {`${item?.nick_name}`}
+            </span>
+            <View
+              className={`avatar_box ${
+                item.animate ? "animate__animated animate__tada" : ""
+              }`}
+              style={{
+                display: "flex",
+                justifyContent: "center",
+                marginTop: 10,
+              }} // 图片居中
+            >
+              <Image
+                className="avatar_thumb"
+                style={{ width: 200, height: 200 }}
+                mode="scaleToFill"
+                src={item?.avatar_thumb.url_list_list?.[0]}
+              />
+            </View>
+          </View>
+        ))}
+      </View>
+
+      {/* <AtToast
+        className="AtToastDouyin"
+        isOpened={giftOpen}
+        text={giftUser?.nick_name ? `谢谢 ${giftUser?.nick_name} 送出礼物` : "11"}
+        icon={giftUser?.avatar_thumb?.url_list_list?.[0]}
+      ></AtToast> */}
+
+      <AtCurtain
+        isOpened={giftOpen}
+        onClose={() => setGiftOpen(false)}
+        closeBtnPosition={"top"}
+      >
+        <div className="giftCurtain">
+          <span style={{ color: "yellow", fontSize: "20px" }}>
+            谢谢{" "}
+            <span style={{ color: "white", fontSize: "30px" }}>
+              {giftUser?.nick_name}
+            </span>{" "}
+            送🩷🩷🩷🩷🩷
+          </span>
+          <Image
+            style="width:300px;height:300px"
+            src={giftUser?.avatar_thumb?.url_list_list?.[0]}
+          />
+        </div>
+      </AtCurtain>
+
+      {/* 添加doro的gif组合场景 */}
+
+      {/* <View className="gifImg">
+        <Image
+          className="index_gif"
+          mode={"scaleToFill"}
+          // src={status === "1" ? gif11 : status === "2" ? gif22 : doro11}
+          src={doro11}
+        />
       </View>  */}
 
-        <View className="svgItems">
+      {/* <View className="index_backImg">
-          <View className="svgItem">
+        <Image className="index_backImg_bg" mode={"scaleToFill"} src={iphone} />
-            {" "}
+      </View> */}
-            <View className="bookImg">
+
-              <Image
+      {/* video元素 */}
-                // style="width: 40%px;height:100%;background: #fff;"
+      {/* <View className="index_video">
-                // src={book}
+        <video
-                src={youtube2}
+          id="my-player"
-              />
+          className="video_js"
-              <View className="bookImg_text">YPP(合作伙伴计划)</View>
+          controls
-            </View>
+          preload="auto"
-            <View className="bookImg">
+          poster="//vjs.zencdn.net/v/oceans.png"
-              <Image
+          data-setup="{}"
-                // style="width: 40%px;height:100%;background: #fff;"
+        >
-                // src={book}
+          <source src={testmpkv} type="video/mp4"></source>
-                src={youtube3}
+        </video>
-              />
-              <View className="bookImg_text">💰赚美金</View>
-            </View>
-            <View className="bookImg">
-              <Image
-                // style="width: 40%px;height:100%;background: #fff;"
-                // src={book}
-                src={youtube4}
-              />
-              <View className="bookImg_text">📷自媒体</View>
-            </View>
-          </View>
-        </View>
-        {/* <View className="footer_div"></View> */}
-        {/* <View className="footer">
-          <View>Copyright © 2025 </View>
       </View> */}
     </View>
-    </>
   );
 };
 

src/pages/index/index.scss

@@ -1,298 +1,166 @@
+@media (max-width: 1000px) {
   .index {
-  // background-color: #002329;
+    width: 100vw;
+    height: 100vh;
+    // overflow: hidden; // 防止溢出
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background-color: black;
+    // justify-content: center;
+    // background-image: url('../../images/iphone.jpg');
+    // background-size: cover;        // 拉伸铺满容器
+    // background-position: center;   // 居中
+    // background-repeat: no-repeat;  // 不重复
+
+    .messageArr {
+      padding: 40px;
+      font-size: 30px;
+      display: flex;
+      flex-direction: column;
+
+      .message_item_first {
+        color: red;
+      }
+
+      .message_item {
+      }
+    }
+
+    .index_backImg {
+      width: 100%;
+      height: 100%;
+      background-color: yellowgreen;
+
+      .index_backImg_bg {
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    .index_video {
+      position: absolute;
+      top: 0px;
+      width: 400px;
+      height: 200px;
+      // display: flex;
+      // flex-direction: column;
+      // align-items: center;
+      // justify-content: center;
+      background-color: aqua;
+
+      .video_js {
+        width: 400px;
+        height: 200px;
+      }
+    }
+
+    .gifImg {
+      position: absolute;
+      bottom: 0;
+    }
+  }
+}
+
+// PC 浏览器下旋转
+@media (min-width: 1000px) {
+  html,
+  body,
+  #root,
+  #app {
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    height: 100%;
+    background-color: black;
+    box-sizing: border-box;
+  }
+  .index {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 750px; // 根据标准宽度调整
+    height: 1334px; // 保持竖屏比例
+    background-color: black;
+
+    // width: 100vw; // 使容器宽度始终填满视口
+    // height: 100vh; // 使容器高度始终填满视口
+
+    // 旋转90度
+    transform: rotate(-90deg) translate(-100vh, 0);
+    transform-origin: top left;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    // justify-content: center;
+
+    // background-image: url('../../images/iphone.jpg');
+    // background-size: cover; // 拉伸铺满容器
+    // background-position: center; // 居中
+    // background-repeat: no-repeat; // 不重复
+    // color: white;
+    // background-color: black;
+
+    .messageArr {
+      // padding: 40px;
+      font-size: 40px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+
+      .message_item_first {
+        color: red;
+      }
+
+      .message_item {
+      }
+    }
+
+    .index_backImg {
+      width: 100%;
+      height: 100%;
       // width: 100vw;
       // height: 100vh;
-  // padding-left: 100px;
-  // padding-right: 100px;
-  display: flex;
-  flex-direction: column;
-  // align-items: center;
-  // justify-content: center;
-
-  .index_book {
-    margin-top: 80px;
-    // width: 100%;
-    min-height: 300px;
-    // padding: 20px;
-    display: flex;
-    flex-direction: column-reverse;
-    align-items: center;
-    justify-content: space-between;
-    // background-color: #f0f0f0;
-    // background-color: #f0f5ff;
-    // background-color: yellow;
-    .index_book_left {
-      width: 600px;
-      min-height: 300px;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: space-around;
-      // background-color: rgb(208, 255, 0);
-      .left_title {
-        font-size: 50px;
-        font-weight: 700;
-        color: #69b1ff;
-      }
-      .left_text {
-        font-size: 30px;
-      }
-
-      .card {
-        margin-top: 20px;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        .cardItem {
-          padding: 20px;
-          // padding-top: 20px;
-          width: 500px;
-          // height: 300px;
-
-          margin-bottom: 20px;
-          display: flex;
-          flex-direction: row;
-          background-color: rgb(var(--color-gray-50) / var(--tw-bg-opacity, 1));
-          // background-color: yellow;
-          background-color: #f0f5ff;
-          border-radius: 20px;
-
-          // align-items: center;
-          // justify-content: center;
-          .cardItem_left {
-            // width: 100px;
-            // height: 100%;
-            // background-color: #69b1ff;
-            display: flex;
-            flex-direction: column;
-            // align-items: center;
-            // justify-content: center;
-            margin-right: 40px;
-            .cardItem_left_img {
-              width: 80px;
-              height:80px;
-            }
-            .youtubeSvg{
-              position: relative;
-              top: -5px;
-            }
-          }
-          .cardItem_right {
-            flex: 1;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            // background-color: red;
-            .cardItem_rightUp {
-              width: 100%;
-              height: 80px;
-              // background-color: aquamarine;
-              display: flex;
-              flex-direction: row;
-              font-weight: 700;
-              font-size: 35px;
-              // align-items: center;
-              // justify-content: center;
-            }
-            .cardItem_rightDown {
-              width: 100%;
-              // height: 200px;
-              flex: 1;
-              // background-color: red;
-              display: flex;
-              flex-direction: row;
-              // align-items: center;
-              // justify-content: center;
-              font-size: 30px;
-              flex-wrap:wrap ;
-              color: #262626;
-
-            }
-          }
-          .left_mobile {
-            margin-top: 20px;
-            // width: 100%;
-            font-size: 30px;
-            display: flex;
-            flex-direction: column;
-            // background-color: aqua;
-            // align-items: center;
-            // justify-content: space-around;
-            // background-color: yellow;
-          }
-        }
-      }
-
-      .left_btn {
-        margin-top: 40px;
-        // background-color: aqua;
-        // display: none;
-        .startRead {
-          width: 500px;
-        }
-      }
-    }
-    .index_book_img {
-      width: 400px;
-      height: 400px;
-    }
-  }
-
-  .group {
-    padding: 20px;
-    // width: 400px;
-    // height: 400px;
       background-color: yellow;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    .groupItem {
-      width: 80px;
-      height: 80px;
-      background-color: aqua;
-      border-radius: 50%;
-      margin-right: -20px;
-      // left: 10px;
-      // position: relative;
-    }
-  }
 
-  .svgItems {
+      .index_backImg_bg {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: space-around;
-    // background-color: yellow;
-    margin-top: 20px;
-    // padding: 20px;
-    .bookImg {
-      display: none;
-    }
-  }
-  .index_btn {
-    // background-color: yellow;
-    .startRead {
-      width: 200px;
-    }
-  }
-}
-
-@media (min-width: 1536px) {
-  .index {
-    // padding: 100px;
-    // height: 100vh;
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    // background-color: aqua;
-
-    .index_book {
         width: 100%;
-      max-width: 1400px;
+        height: 100%;
+        // object-fit: cover; // 确保图片铺满并保持宽高比
+      }
+    }
 
-      // max-width: 2000px;
+    .AtToastDouyin {
-      // padding: 20px;
+      z-index: 999;
-      display: flex;
+    }
-      flex-direction: row;
-      align-items: center;
-      // justify-content: center;
-      justify-content: space-between;
-      background-color: #f0f5ff;
-      border-radius: 20px;
 
-      .index_book_left {
+    .giftCurtain {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: space-around;
-        // background-color: yellow;
-        // background-color: #69b1ff;
-        .card{
-          display: none;
-        }
-        .left_mobile {
-          display: none;
-        }
-        .left_btn {
-          display: flex;
-
-          .startRead {
-            // display: flex;
-            width: 200px;
-          }
-        }
-      }
-      .index_book_img {
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
-        // background-color: yellow;
+      color: white;
-      }
+      font-size: 20px;
-    }
-
-    .group {
-      display: none;
-    }
-    .svgItems {
-      // width: 1400px;
       width: 100%;
-      max-width: 1400px;
+      height: 100%;
-      margin-top: 80px;
-      // padding: 0px;
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      justify-content: center;
-      // background-color: #69b1ff;
-      // background-color: yellow;
-      // background-color: brown;
-      .svgItem {
-        // min-width: 1400px;
-        width: 100%;
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        justify-content: space-around;
-        // background-color: #69b1ff;
-        .bookImg {
-          display: flex;
-          flex-direction: column;
-          align-items: center;
-          justify-content: center;
-          // background-color: yellow;
-          .bookImg_text {
-            margin-top: 20px;
-            font-size: 30px;
-          }
-        }
     }
+    .at-curtain__btn-close {
+      display: none !important;
     }
 
-    .index_btn {
+    // .index_video {
-      .startRead {
-        display: none;
-      }
-    }
-
-    .footer {
     //   position: absolute;
-      position: fixed;
+    //   top: 0px;
-      bottom: 0px;
+    //   width: 400px;
-      display: flex;
+    //   height: 200px;
-      flex-direction: row;
+
-      align-items: center;
+    //   .video_js {
-      justify-content: center;
+    //     width: 400px;
-      width: 100%;
+    //     height: 200px;
-      height: 60px;
+    //   }
-      // margin-bottom: 20px;
+    // }
-      font-size: 14px;
-      background-color: yellow;
-    }
   }
 }

yarn.lock

@@ -912,7 +912,7 @@
     "@babel/helper-create-regexp-features-plugin" "^7.25.9"
     "@babel/helper-plugin-utils" "^7.25.9"
 
-"@babel/preset-env@^7.11.0", "@babel/preset-env@^7.14.5":
+"@babel/preset-env@^7.11.0", "@babel/preset-env@^7.14.5", "@babel/preset-env@^7.26.9":
   version "7.26.9"
   resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.26.9.tgz#2ec64e903d0efe743699f77a10bdf7955c2123c3"
   integrity sha512-vX3qPGE8sEKEAZCWk05k3cpTAE3/nOYca++JA+Rd0z2NCNzabmYvEiSShKzm10zdquOIAVXsy2Ei/DTW34KlKQ==
@@ -1038,7 +1038,7 @@
     core-js-pure "^3.30.2"
     regenerator-runtime "^0.14.0"
 
-"@babel/runtime@^7.11.2", "@babel/runtime@^7.14.5", "@babel/runtime@^7.7.6", "@babel/runtime@^7.7.7", "@babel/runtime@^7.8.4":
+"@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.14.5", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.6", "@babel/runtime@^7.7.7", "@babel/runtime@^7.8.4":
   version "7.27.0"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.27.0.tgz#fbee7cf97c709518ecc1f590984481d5460d4762"
   integrity sha512-VtPOkrdPHZsKc/clNqyi9WUA8TINkZ4cGk63UUE3u4pmB2k+ZMQRDuIOagv8UVd6j7k0T3+RRIb7beKTebNbcw==
@@ -2617,6 +2617,46 @@
   resolved "https://registry.yarnpkg.com/@ungap/structured-clone/-/structured-clone-1.3.0.tgz#d06bbb384ebcf6c505fde1c3d0ed4ddffe0aaff8"
   integrity sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==
 
+"@videojs/http-streaming@^3.17.0":
+  version "3.17.0"
+  resolved "https://registry.yarnpkg.com/@videojs/http-streaming/-/http-streaming-3.17.0.tgz#58433aa72206afae2bb65462f023d21afd766bf4"
+  integrity sha512-Ch1P3tvvIEezeZXyK11UfWgp4cWKX4vIhZ30baN/lRinqdbakZ5hiAI3pGjRy3d+q/Epyc8Csz5xMdKNNGYpcw==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+    "@videojs/vhs-utils" "^4.1.1"
+    aes-decrypter "^4.0.2"
+    global "^4.4.0"
+    m3u8-parser "^7.2.0"
+    mpd-parser "^1.3.1"
+    mux.js "7.1.0"
+    video.js "^7 || ^8"
+
+"@videojs/vhs-utils@^4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@videojs/vhs-utils/-/vhs-utils-4.0.0.tgz#4d4dbf5d61a9fbd2da114b84ec747c3a483bc60d"
+  integrity sha512-xJp7Yd4jMLwje2vHCUmi8MOUU76nxiwII3z4Eg3Ucb+6rrkFVGosrXlMgGnaLjq724j3wzNElRZ71D/CKrTtxg==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+    global "^4.4.0"
+    url-toolkit "^2.2.1"
+
+"@videojs/vhs-utils@^4.1.1":
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/@videojs/vhs-utils/-/vhs-utils-4.1.1.tgz#44226fc5993f577490b5e08951ddc083714405cc"
+  integrity sha512-5iLX6sR2ownbv4Mtejw6Ax+naosGvoT9kY+gcuHzANyUZZ+4NpeNdKMUhb6ag0acYej1Y7cmr/F2+4PrggMiVA==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+    global "^4.4.0"
+
+"@videojs/xhr@2.7.0":
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/@videojs/xhr/-/xhr-2.7.0.tgz#e272af6e2b5448aeb400905a5c6f4818f6b6ad47"
+  integrity sha512-giab+EVRanChIupZK7gXjHy90y3nncA2phIOyG3Ne5fvpiMJzvqYwiTOnEVW2S4CoYcuKJkomat7bMXA/UoUZQ==
+  dependencies:
+    "@babel/runtime" "^7.5.5"
+    global "~4.4.0"
+    is-function "^1.0.1"
+
 "@vue/compiler-core@3.5.13":
   version "3.5.13"
   resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.5.13.tgz#b0ae6c4347f60c03e849a05d34e5bf747c9bda05"
@@ -2801,6 +2841,11 @@
     "@webassemblyjs/ast" "1.14.1"
     "@xtuc/long" "4.2.2"
 
+"@xmldom/xmldom@^0.8.3":
+  version "0.8.10"
+  resolved "https://registry.yarnpkg.com/@xmldom/xmldom/-/xmldom-0.8.10.tgz#a1337ca426aa61cef9fe15b5b28e340a72f6fa99"
+  integrity sha512-2WALfTl4xo2SkGCYRt6rDTFfk9R1czmBvUQy12gK2KuRKIpWEhcbbzy8EZXtz/jkRqHX8bFEc6FC1HjX4TUWYw==
+
 "@xtuc/ieee754@^1.2.0":
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/@xtuc/ieee754/-/ieee754-1.2.0.tgz#eef014a3145ae477a1cbc00cd1e552336dceb790"
@@ -2877,6 +2922,16 @@ adm-zip@^0.4.13:
   resolved "https://registry.yarnpkg.com/adm-zip/-/adm-zip-0.4.16.tgz#cf4c508fdffab02c269cbc7f471a875f05570365"
   integrity sha512-TFi4HBKSGfIKsK5YCkKaaFG2m4PEDyViZmEwof3MTIgzimHLto6muaHVpbrljdIvIrFZzEq/p4nafOeLcYegrg==
 
+aes-decrypter@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/aes-decrypter/-/aes-decrypter-4.0.2.tgz#90648181c68878f54093920a3b44776ec2dc4914"
+  integrity sha512-lc+/9s6iJvuaRe5qDlMTpCFjnwpkeOXp8qP3oiZ5jsj1MRg+SBVUmmICrhxHvc8OELSmc+fEyyxAuppY6hrWzw==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+    "@videojs/vhs-utils" "^4.1.1"
+    global "^4.4.0"
+    pkcs7 "^1.0.4"
+
 agent-base@6:
   version "6.0.2"
   resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-6.0.2.tgz#49fff58577cfee3f37176feab4c22e00f86d7f77"
@@ -3816,6 +3871,11 @@ caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000844, caniuse-lite@^1.0.30000864, can
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001707.tgz#c5e104d199e6f4355a898fcd995a066c7eb9bf41"
   integrity sha512-3qtRjw/HQSMlDWf+X79N206fepf4SOOU6SQLMaq/0KkZLmSjPxAkBOQQ+FxbHKfHmYLZFfdWsO3KA90ceHPSnw==
 
+canvas-confetti@^1.9.3:
+  version "1.9.3"
+  resolved "https://registry.yarnpkg.com/canvas-confetti/-/canvas-confetti-1.9.3.tgz#ef4c857420ad8045ab4abe8547261c8cdf229845"
+  integrity sha512-rFfTURMvmVEX1gyXFgn5QMn81bYk70qa0HLzcIOSVEyl57n6o9ItHeBtUSWdvKAPY0xlvBHno4/v3QPrT83q9g==
+
 capital-case@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/capital-case/-/capital-case-1.0.4.tgz#9d130292353c9249f6b00fa5852bee38a717e669"
@@ -5008,6 +5068,11 @@ dom-serializer@^1.0.1:
     domhandler "^4.2.0"
     entities "^2.0.0"
 
+dom-walk@^0.1.0:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/dom-walk/-/dom-walk-0.1.2.tgz#0c548bef048f4d1f2a97249002236060daa3fd84"
+  integrity sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w==
+
 dom7@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/dom7/-/dom7-3.0.0.tgz#b861ce5d67a6becd7aaa3ad02942ff14b1240331"
@@ -6688,6 +6753,14 @@ global-prefix@^3.0.0:
     kind-of "^6.0.2"
     which "^1.3.1"
 
+global@4.4.0, global@^4.3.1, global@^4.4.0, global@~4.4.0:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/global/-/global-4.4.0.tgz#3e7b105179006a323ed71aafca3e9c57a5cc6406"
+  integrity sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==
+  dependencies:
+    min-document "^2.19.0"
+    process "^0.11.10"
+
 globals@^11.1.0:
   version "11.12.0"
   resolved "https://registry.yarnpkg.com/globals/-/globals-11.12.0.tgz#ab8795338868a0babd8525758018c2a7eb95c42e"
@@ -7620,6 +7693,11 @@ is-fullwidth-code-point@^3.0.0:
   resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz#f116f8064fe90b3f7844a38997c0b75051269f1d"
   integrity sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==
 
+is-function@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-function/-/is-function-1.0.2.tgz#4f097f30abf6efadac9833b17ca5dc03f8144e08"
+  integrity sha512-lw7DUp0aWXYg+CBCN+JKkcE0Q2RayZnSvnZBlwgxHBQhqt5pZNVy4Ri7H9GmmXkdu7LUthszM+Tor1u/2iBcpQ==
+
 is-generator-function@^1.0.10, is-generator-function@^1.0.7:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-generator-function/-/is-generator-function-1.1.0.tgz#bf3eeda931201394f57b5dba2800f91a238309ca"
@@ -8678,6 +8756,15 @@ lru-cache@^6.0.0:
   dependencies:
     yallist "^4.0.0"
 
+m3u8-parser@^7.2.0:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/m3u8-parser/-/m3u8-parser-7.2.0.tgz#9e2eb50abb8349d248cd58842367da4acabdf297"
+  integrity sha512-CRatFqpjVtMiMaKXxNvuI3I++vUumIXVVT/JpCpdU/FynV/ceVw1qpPyyBNindL+JlPMSesx+WX1QJaZEJSaMQ==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+    "@videojs/vhs-utils" "^4.1.1"
+    global "^4.4.0"
+
 magic-string@^0.25.0, magic-string@^0.25.7:
   version "0.25.9"
   resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.25.9.tgz#de7f9faf91ef8a1c91d02c2e5314c8277dbcdd1c"
@@ -9038,6 +9125,13 @@ mimic-response@^1.0.0, mimic-response@^1.0.1:
   resolved "https://registry.yarnpkg.com/mimic-response/-/mimic-response-1.0.1.tgz#4923538878eef42063cb8a3e3b0798781487ab1b"
   integrity sha512-j5EctnkH7amfV/q5Hgmoal1g2QHFJRraOtmx0JpIqkxhBhI/lJSl1nMpQ45hVarwNETOoWEimndZ4QK0RHxuxQ==
 
+min-document@^2.19.0:
+  version "2.19.0"
+  resolved "https://registry.yarnpkg.com/min-document/-/min-document-2.19.0.tgz#7bd282e3f5842ed295bb748cdd9f1ffa2c824685"
+  integrity sha512-9Wy1B3m3f66bPPmU5hdA4DR4PB2OfDU/+GS3yAB7IQozE3tqXaVv2zOjgla7MEGSRv95+ILmOuvhLkOK6wJtCQ==
+  dependencies:
+    dom-walk "^0.1.0"
+
 min-indent@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.1.tgz#a63f681673b30571fbe8bc25686ae746eefa9869"
@@ -9182,6 +9276,16 @@ mobile-detect@^1.4.2:
   resolved "https://registry.yarnpkg.com/mobile-detect/-/mobile-detect-1.4.5.tgz#da393c3c413ca1a9bcdd9ced653c38281c0fb6ad"
   integrity sha512-yc0LhH6tItlvfLBugVUEtgawwFU2sIe+cSdmRJJCTMZ5GEJyLxNyC/NIOAOGk67Fa8GNpOttO3Xz/1bHpXFD/g==
 
+mpd-parser@^1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/mpd-parser/-/mpd-parser-1.3.1.tgz#557b6ac27411c2c177bb01e46e14440703a414a3"
+  integrity sha512-1FuyEWI5k2HcmhS1HkKnUAQV7yFPfXPht2DnRRGtoiiAAW+ESTbtEXIDpRkwdU+XyrQuwrIym7UkoPKsZ0SyFw==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+    "@videojs/vhs-utils" "^4.0.0"
+    "@xmldom/xmldom" "^0.8.3"
+    global "^4.4.0"
+
 ms@2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
@@ -9228,6 +9332,14 @@ mute-stream@0.0.8:
   resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.8.tgz#1630c42b2251ff81e2a283de96a5497ea92e5e0d"
   integrity sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==
 
+mux.js@7.1.0, mux.js@^7.0.1:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/mux.js/-/mux.js-7.1.0.tgz#aba5ed55a39cb790ef4b30b2c3ea0d2630b0264e"
+  integrity sha512-NTxawK/BBELJrYsZThEulyUMDVlLizKdxyAsMuzoCD1eFj97BVaA8D/CvKsKu6FOLYkFojN5CbM9h++ZTZtknA==
+  dependencies:
+    "@babel/runtime" "^7.11.2"
+    global "^4.4.0"
+
 mz@^2.4.0:
   version "2.7.0"
   resolved "https://registry.yarnpkg.com/mz/-/mz-2.7.0.tgz#95008057a56cafadc2bc63dde7f9ff6955948e32"
@@ -10018,6 +10130,13 @@ pirates@^4.0.1, pirates@^4.0.6:
   resolved "https://registry.yarnpkg.com/pirates/-/pirates-4.0.6.tgz#3018ae32ecfcff6c29ba2267cbf21166ac1f36b9"
   integrity sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==
 
+pkcs7@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/pkcs7/-/pkcs7-1.0.4.tgz#6090b9e71160dabf69209d719cbafa538b00a1cb"
+  integrity sha512-afRERtHn54AlwaF2/+LFszyAANTCggGilmcmILUzEjvs3XgFZT+xE6+QWQcAGmu4xajy+Xtj7acLOPdx5/eXWQ==
+  dependencies:
+    "@babel/runtime" "^7.5.5"
+
 pkg-dir@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-3.0.0.tgz#2749020f239ed990881b1f71210d51eb6523bea3"
@@ -10532,7 +10651,7 @@ process-nextick-args@^2.0.0, process-nextick-args@~2.0.0:
   resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"
   integrity sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==
 
-process@0.11.10:
+process@0.11.10, process@^0.11.10:
   version "0.11.10"
   resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
   integrity sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==
@@ -10902,7 +11021,7 @@ regenerator-runtime@0.11:
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9"
   integrity sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==
 
-regenerator-runtime@^0.14.0:
+regenerator-runtime@^0.14.0, regenerator-runtime@^0.14.1:
   version "0.14.1"
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz#356ade10263f685dda125100cd862c1db895327f"
   integrity sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==
@@ -13106,6 +13225,11 @@ url-to-options@^1.0.1:
   resolved "https://registry.yarnpkg.com/url-to-options/-/url-to-options-1.0.1.tgz#1505a03a289a48cbd7a434efbaeec5055f5633a9"
   integrity sha512-0kQLIzG4fdk/G5NONku64rSH/x32NOA39LVQqlK8Le6lvTF6GGRJpqaQFGgU+CLwySIqBSMdwYM0sYcW9f6P4A==
 
+url-toolkit@^2.2.1:
+  version "2.2.5"
+  resolved "https://registry.yarnpkg.com/url-toolkit/-/url-toolkit-2.2.5.tgz#58406b18e12c58803e14624df5e374f638b0f607"
+  integrity sha512-mtN6xk+Nac+oyJ/PrI7tzfmomRVNFIWKUbG8jdYFt52hxbiReFAXIjYskvu64/dvuW71IcB7lV8l0HvZMac6Jg==
+
 use@^3.1.0:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"
@@ -13206,6 +13330,43 @@ vfile@^2.0.0:
     unist-util-stringify-position "^1.0.0"
     vfile-message "^1.0.0"
 
+"video.js@^7 || ^8", video.js@^8.22.0:
+  version "8.22.0"
+  resolved "https://registry.yarnpkg.com/video.js/-/video.js-8.22.0.tgz#60ee2033025395df708d7cbb71fdfe5f0c4c4f0f"
+  integrity sha512-xge2kpjsvC0zgFJ1cqt+wTqsi21+huFswlonPFh7qiplypsb4FN/D2Rz6bWdG/S9eQaPHfWHsarmJL/7D3DHoA==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+    "@videojs/http-streaming" "^3.17.0"
+    "@videojs/vhs-utils" "^4.1.1"
+    "@videojs/xhr" "2.7.0"
+    aes-decrypter "^4.0.2"
+    global "4.4.0"
+    m3u8-parser "^7.2.0"
+    mpd-parser "^1.3.1"
+    mux.js "^7.0.1"
+    videojs-contrib-quality-levels "4.1.0"
+    videojs-font "4.2.0"
+    videojs-vtt.js "0.15.5"
+
+videojs-contrib-quality-levels@4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/videojs-contrib-quality-levels/-/videojs-contrib-quality-levels-4.1.0.tgz#44c2d2167114a5c8418548b10a25cb409d6cba51"
+  integrity sha512-TfrXJJg1Bv4t6TOCMEVMwF/CoS8iENYsWNKip8zfhB5kTcegiFYezEA0eHAJPU64ZC8NQbxQgOwAsYU8VXbOWA==
+  dependencies:
+    global "^4.4.0"
+
+videojs-font@4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/videojs-font/-/videojs-font-4.2.0.tgz#fbce803d347c565816e296f527e208dc65c9f235"
+  integrity sha512-YPq+wiKoGy2/M7ccjmlvwi58z2xsykkkfNMyIg4xb7EZQQNwB71hcSsB3o75CqQV7/y5lXkXhI/rsGAS7jfEmQ==
+
+videojs-vtt.js@0.15.5:
+  version "0.15.5"
+  resolved "https://registry.yarnpkg.com/videojs-vtt.js/-/videojs-vtt.js-0.15.5.tgz#567776eaf2a7a928d88b148a8b401ade2406f2ca"
+  integrity sha512-yZbBxvA7QMYn15Lr/ZfhhLPrNpI/RmCSCqgIff57GC2gIrV5YfyzLfLyZMj0NnZSAz8syB4N0nHXpZg9MyrMOQ==
+  dependencies:
+    global "^4.3.1"
+
 vinyl-file@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/vinyl-file/-/vinyl-file-3.0.0.tgz#b104d9e4409ffa325faadd520642d0a3b488b365"