add 视频页面

update 用户管理

Web/html/body/user.html

@@ -31,22 +31,48 @@
     $('#header').load("/html/header.html");
 
     function createUser() {
-        layer.open({
-            type: 2,
-            title: "添加新房间",
-            area: ['600px', '500px'],
-            content: '/html/ui/createConfig.html?roomId='
+      layer.open({
+        type: 2,
+        title: "添加新房间",
+        area: ['600px', '500px'],
+        content: '/html/ui/createConfig.html?roomId='
 
-        });
+      });
     }
-    function refreshCookie(data){
+    function refreshCookie(data) {
       console.log(data)
     }
+    function createRoom() {
+      login()
+        .then(data => {
+          if (data.status === 300) {
+            layer.open({
+              type: 1, // page 层类型
+              area: ['320px', '400px'],
+              title: '打开B站客户端扫码登陆',
+              shade: 0.6, // 遮罩透明度
+              shadeClose: false, // 点击遮罩区域，关闭弹层
+              maxmin: true, // 允许全屏最小化
+              anim: 1, // 0-6 的动画形式，-1 不开启
+              content: '<div style="padding: 32px;text-align: center;" id="qrdiv">登陆后刷新</div>',
+              success: function (layero, index, that) {
+                new QRCode(document.getElementById("qrdiv"), data.data.qrcode);
+              }
+            });
+          } else if (data.status === 301) {
+            setTimeout(() => {
+              createRoom()
+            }, 100);
+          }
+        })
+
+    }
   </script>
-<script src="/layui/layui.js"></script>
-<script src="/js/jquery-3.2.1.js"></script>
-<script src="/js/CommonConfig.js"></script>
-<script src="/js/httpUtils.js"></script>
+  <script src="/layui/layui.js"></script>
+  <script src="/js/jquery-3.2.1.js"></script>
+  <script src="/js/CommonConfig.js"></script>
+  <script src="/js/httpUtils.js"></script>
+  <script src="/js/qrcode.min.js"></script>
   <script>
 
 
@@ -55,41 +81,41 @@
       var dropdown = layui.dropdown;
       var layer = layui.layer;
       var table = layui.table;
-    
-      table.render({
-            elem: '#roomList',
-            url: '/user/list',
-            toolbar: '#toolbarDemo',
 
-            totalRow: true, // 开启合计行
-            page: true,
-            response: {
-                statusCode: 100 // 重新规定成功的状态码为 200，table 组件默认为 0
-            },
-            parseData: function (res) {
-                return {
-                    "code": res.status, //解析接口状态
-                    "msg": res.message, //解析提示文本
-                    "data": res.data, //解析数据列表
-                    "count": res.count
-                };
-            },
-            cols: [[
-                { type: 'checkbox', fixed: 'left' },
-                { field: 'uid', title: 'UID', width: 150, sort: true, fixed: 'left', templet: '<div><a href="https://space.bilibili.com/{{= d.uid}}" target="_blank">{{= d.uid}}</a>' },
-                { field: 'uname', title: '用户名', width: 150, fixed: 'left' },
-                { field: 'face', title: '头像', width: 80, templet: '<div><image src="" onerror="showImage(\'{{= d.face }}\',this);"  style="width: 30px;height: 30px;"></div>' },
-                { field: 'status', title: '状态', width: 150,templet:'<div> {{= d.status}} <button class="layui-btn layui-btn-xs" onclick="refreshCookie(\'{{= d.uid }}\')">刷新cookie</button>'},
-                { field: 'sql_time', title: '添加时间', width: 190 },
-                { fixed: "right", title: "操作", width: 80, align: "center", toolbar: "#toolDemo" }
-            ]],
-            done: function () {
-                
-            },
-            error: function (res, msg) {
-                console.log(res, msg)
-            }
-        });
+      table.render({
+        elem: '#roomList',
+        url: '/user/list',
+        toolbar: '#toolbarDemo',
+
+        totalRow: true, // 开启合计行
+        page: true,
+        response: {
+          statusCode: 100 // 重新规定成功的状态码为 200，table 组件默认为 0
+        },
+        parseData: function (res) {
+          return {
+            "code": res.status, //解析接口状态
+            "msg": res.message, //解析提示文本
+            "data": res.data, //解析数据列表
+            "count": res.count
+          };
+        },
+        cols: [[
+          { type: 'checkbox', fixed: 'left' },
+          { field: 'uid', title: 'UID', width: 150, sort: true, fixed: 'left', templet: '<div><a href="https://space.bilibili.com/{{= d.uid}}" target="_blank">{{= d.uid}}</a>' },
+          { field: 'uname', title: '用户名', width: 150, fixed: 'left' },
+          { field: 'face', title: '头像', width: 80, templet: '<div><image src="" onerror="showImage(\'{{= d.face }}\',this);"  style="width: 30px;height: 30px;"></div>' },
+          { field: 'status', title: '状态', width: 150, templet: '<div> {{= d.status}} <button class="layui-btn layui-btn-xs" onclick="refreshCookie(\'{{= d.uid }}\')">刷新cookie</button>' },
+          { field: 'sql_time', title: '添加时间', width: 190 },
+          { fixed: "right", title: "操作", width: 80, align: "center", toolbar: "#toolDemo" }
+        ]],
+        done: function () {
+
+        },
+        error: function (res, msg) {
+          console.log(res, msg)
+        }
+      });
 
 
 

Web/html/body/video.html

@@ -6,6 +6,11 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
     <title>视频中心</title>
     <link rel="stylesheet" href="/layui/css/layui.css">
+    <style>
+        canvas {
+            width: 600px;
+        }
+    </style>
 </head>
 
 <body class="layui-bg-gray">
@@ -21,20 +26,34 @@
                 </div>
             </div>
         </div>
-        <div class="layui-col-xs9">
-            <div class="grid-demo">
-                <video id="videoElement" style="width: 80%; margin-top: 16px;" controls></video>
+        <div class="layui-col-xs7">
+            <div class="grid-demo" id="container" style="margin-top: 16px; width: 100%;">
+                <video id="videoElement" controls style="width: 100%;"></video>
             </div>
         </div>
+        <div class="layui-col-xs2" style="margin-left: 16px; width: 22%; margin-top: 16px;">
+            <p style="font-size: 4;font-weight: bold; text-align: center;">Super&nbsp;Chat&nbsp;列表</p>
+            <div class="flow-demo" id="flow" style="height: 60vh; overflow: auto;"></div>
+        </div>
     </div>
+    <div class="layui-row">
+        <div class="layui-col-xs2">&nbsp;</div>
+        <div class="layui-form layui-col-xs1">
+            <input type="checkbox" id="danmuCheckBox" title="弹幕" lay-skin="tag" lay-filter="danmuCheckBox" on checked>
+        </div>
 
+        <div class="layui-col-xs5" style="text-align: center;">
+            &nbsp; <div id="slider" lay-options="{value: 100,input:true}"></div>
+            <span>弹幕透明度</span>
+        </div>
 
+    </div>
 </body>
 <script id="menulist" type="text/html">
     <ul class="layui-tab-title">
 
     {{#  layui.each(Object.keys(d), function(index, item){ }}
-    <li class="layui-menu-item-group layui-menu-item-down" lay-options="{type: 'group'}">
+    <li class="layui-menu-item-group layui-menu-item-up" lay-options="{type: 'group'}">
         <div class="layui-menu-body-title">
             {{= item}} <i class="layui-icon layui-icon-up"></i>
         </div>
@@ -54,27 +73,138 @@
     
     </ul>
   </script>
+
+<script id="superChatCard" type="text/html">
+    {{#  layui.each(d, function(index, item){ }}
+    <li>
+     
+        <div class="layui-bg-gray" style="padding: 16px;">
+          <div class="layui-row layui-col-space16">
+            <div class="layui-card" style=" background-color: {{= item.backgroundBottomColor }};">
+              <div class="layui-card-header" ><img src="#" onerror="showImage('{{= item.userAvatar}}',this)" style="width: 40px; height: 40px;"/><a href="https://space.bilibili.com/{{= item.uid}}" target="_blank"><span style="color: {{= item.userNameColor}};">{{= item.userName}}</span></a>  
+                <span style="float: right;">金额:{{= item.price}}¥</span>
+              </div>
+              <div class="layui-card-body">
+                <p style="color: {{= item.message_font_color}} ;">{{= item.message}}</p>
+                <hr>
+                <p style="color: {{= item.message_font_color}} ;">{{= item.message_trans}}</p>
+              </div>
+            </div>
+          </div>
+        </div>
+     
+    </li>
+      {{#  }); }}
+  </script>
+
+
+
 <script src="/js/jquery-3.2.1.js"></script>
 <script src="/js/CommonConfig.js"></script>
 <script src="/js/httpUtils.js"></script>
 <script src="/layui/layui.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/hls.js@1"></script>
+<script src="/js/hls.js"></script>
+<script src="/js/fly-barrage.iife.js"></script>
+<script src="/js/lodash.min.js"></script>
 
 
 <script>
     headerModel = 2;
     $('#header').load("/html/header.html");
+    // 获取弹幕渲染器 class
+    const { BarrageRenderer } = FlyBarrage;
+    // 获取 video 元素引用
+    const video = document.getElementById('videoElement');
+    var barrageRenderer;
+    var danmuConfig = {}
+    video.volume = 0.1;
+    function initBarrageRenderer() {
+        const barrages = [];
+        danmuConfig = {
+            heightReduce: 60,
+            speed: 100,
+            fontWeight: 'bold',
+        }
+        barrageRenderer = new BarrageRenderer({
+            container: 'container',
+            video: video,
+            barrages,
+            renderConfig: danmuConfig,
+        });
+        // 给 video 元素绑定 play 事件，回调函数内部调用渲染器实例的 play 方法
+        video.addEventListener('play', () => {
+            barrageRenderer.play();
+        });
+        // 给 video 元素绑定 pause 事件，回调函数内部调用渲染器实例的 pause 方法
+        video.addEventListener('pause', () => {
+            barrageRenderer.pause();
+        });
+        video.addEventListener('timeupdate', function () {
+            // 当前播放时间（秒）
+            const currentTime = this.currentTime;
+            // 视频总时长（秒）
+            const duration = this.duration;
+            // 计算播放进度百分比
+            const progressPercentage = (currentTime / duration) * 100;
+            if (currentTime % 10 === 0) {
+                console.log("到10秒")
+            }
+        });
+        // container 尺寸发生了变化的话，需要调用渲染器实例的 resize 方法
+        // 这里需要借助 lodash 的防抖函数封装一下，不要太过频繁的调用 resize
+        window.onresize = _.debounce(() => {
+            barrageRenderer.resize();
+        }, 150);
+    }
+
+    $('#danmuCheckBox').get(0).addEventListener('input', function () {
+        if (this.checked) {
+            console.log('复选框被选中');
+        } else {
+            console.log('复选框未被选中');
+        }
+    })
 </script>
 
 
 
 <script>
-
-    var roomId = '17961';
-    layui.use(['dropdown', 'laytpl'], function () {
+    var roomId = getParam('roomId');
+    var videoId;
+    layui.use(function () {
+        var flow = layui.flow;
         var dropdown = layui.dropdown;
         var layer = layui.layer;
         var laytpl = layui.laytpl;
+        var slider = layui.slider;
+        var form = layui.form;
+        var sliderValue = 100;
+        // 单个渲染
+        slider.render({
+            elem: '#slider',
+            change: function (value) {
+                if (barrageRenderer === null || barrageRenderer === undefined) return;
+                danmuConfig['opacity'] = value / 100
+                sliderValue = value;
+                barrageRenderer.setRenderConfig(danmuConfig)
+            }
+        });
+
+        form.on('checkbox(danmuCheckBox)', function (data) {
+            var checked = data.elem.checked; // 获得 checkbox 选中状态
+
+            if (barrageRenderer === null || barrageRenderer === undefined) return;
+            if (checked) {
+                danmuConfig['opacity'] = sliderValue / 100
+            } else {
+                danmuConfig['opacity'] = 0
+            }
+
+            barrageRenderer.setRenderConfig(danmuConfig)
+        });
+
+
+
         function initTabs() {
             getVideo(roomId, 0, 0)
                 .then(data => {
@@ -83,25 +213,56 @@
 
         }
         dropdown.on('click(menusss)', function (options) {
-            console.log(options);
             // playVideo()
+            videoId = options.id;
             getPlayerVideo(roomId, options.id)
                 .then(data => {
-                    playVideo(data.data)
+                    setTimeout(function () {
+                        playVideo(data.data)
+                    }, 300)
+
                 })
 
         });
         function initMenu(data) {
             var view = $("#menuView").get(0);
             laytpl($('#menulist').get(0).innerHTML).render(data, function (html) {
-                console.log(html)
                 view.innerHTML = html;
             });
         }
 
         function init() {
+            if (!hasString(getParam('roomId'))) {
+                showAnchor();
+                return
+            }
             initTabs()
+            initBarrageRenderer();
+        }
+        function showAnchor() {
 
+            layer.open({
+                type: 2, // page 层类型
+                area: ['320px', '400px'],
+                title: '打开B站客户端扫码登陆',
+                shade: 0.6, // 遮罩透明度
+                shadeClose: false, // 点击遮罩区域，关闭弹层
+                maxmin: true, // 允许全屏最小化
+                anim: 1, // 0-6 的动画形式，-1 不开启
+                btn: ['确定', '取消'],
+                content: '/html/ui/selectAnchor.html',
+                yes: function (index, layero) {
+                    var iframeWin = window[layero.find('iframe')[0]['name']];
+                    var anchorRoomId = iframeWin.$('#anchorRoomId')[0].value;
+                    if (!hasString(anchorRoomId)) {
+                        layer.msg("请选择")
+                        return
+                    }
+                    let url = new URL(window.location.href);
+                    url.searchParams.set('roomId', anchorRoomId);
+                    window.location.href = url.toString();
+                }
+            });
         }
         function playVideo(url) {
             var video = document.getElementById('videoElement');
@@ -109,6 +270,36 @@
             var hls = new Hls();
             hls.loadSource(videoSrc);
             hls.attachMedia(video);
+            initDanmu()
+            video.addEventListener('loadedmetadata', function () {
+                // 设置视频的初始播放时间
+                video.currentTime = 0;
+            })
+        }
+        function initDanmu() {
+            barrageRenderer.setBarrages([])
+            getDanmu(getParam('roomId'), videoId)
+                .then(data => {
+                    barrageRenderer.setBarrages(data.data.danmu);
+                    initSC(data.data.superChat)
+                })
+
+        }
+        function initSC(scList) {
+            flow.load({
+                elem: '#flow', // 流加载容器
+                scrollElem: '#flow', // 滚动条所在元素，一般不用填，此处只是演示需要。
+                isAuto: true,
+                isLazyimg: false,
+                done: function (page, next) { // 加载下一页
+                    // 模拟插入
+                    console.log(scList)
+                    laytpl($('#superChatCard').get(0).innerHTML).render(scList, function (html) {
+                        console.log(html)
+                        next(html, false)
+                    });
+                }
+            });
         }
         init()
 

Web/html/ui/selectAnchor.html

@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="/layui/css/layui.css">
+</head>
+
+<body>
+    <form class="layui-form" action="">
+        <div class="layui-form-item" id="anchroList">
+        </div>
+    </form>
+</body>
+<script src="/layui/layui.js"></script>
+<script src="/js/jquery-3.2.1.js"></script>
+<script src="/js/CommonConfig.js"></script>
+<script src="/js/httpUtils.js"></script>
+
+<script id="anchorListModel" type="text/html">
+        <select id="anchorRoomId" name="modules" lay-verify="required" lay-search>
+          <option value="">直接选择或搜索选择</option>
+          {{#  layui.each(d.data, function(index, item){ }}
+            <option value="{{= item.live_room_id }}">[{{= item.live_room_id}}]{{= item.anchorName}}</option>
+          {{#  }); }}
+        </select>
+</script>
+<script>
+    layui.use(['laytpl', 'form'], function () {
+        var laytpl = layui.laytpl;
+        var form = layui.form;
+        getAllConfig(-1, -1)
+            .then(data => {
+                console.log(data)
+                var view = $("#anchroList").get(0);
+                laytpl($('#anchorListModel').get(0).innerHTML).render(data, function (html) {
+                    view.innerHTML = html;
+                    form.render('select');
+                });
+            })
+    })
+</script>