web

2025-11-28 15:18:10 +08:00
parent ad4a600af9
commit 5683f35942
188 changed files with 53680 additions and 1062 deletions
--- a/web/assets/js/livestream.js
+++ b/web/assets/js/livestream.js
@@ -0,0 +1,160 @@
+// 直播投流源管理
+const LiveStreamManager = {
+    // 初始化
+    init: function() {
+        this.loadLiveStreams();
+    },
+
+    // 加载直播投流源
+    loadLiveStreams: function() {
+        LiveStreamAPI.getActiveLiveStreams()
+            .then(data => {
+                if (data && data.length > 0) {
+                    this.renderLiveStreams(data);
+                    $('#livestreamSection').show();
+                } else {
+                    $('#livestreamSection').hide();
+                }
+            })
+            .catch(error => {
+                console.error('加载直播投流源失败:', error);
+                $('#livestreamSection').hide();
+            });
+    },
+
+    // 渲染直播投流源列表
+    renderLiveStreams: function(streams) {
+        const grid = $('#livestreamGrid');
+        grid.empty();
+
+        streams.forEach(stream => {
+            const card = this.createStreamCard(stream);
+            grid.append(card);
+        });
+    },
+
+    // 创建直播卡片
+    createStreamCard: function(stream) {
+        const platformColors = {
+            '抖音': '#000',
+            '快手': '#ff6600',
+            '淘宝': '#ff4400',
+            '京东': '#e60012',
+            '小红书': '#ff2442',
+            '视频号': '#07c160'
+        };
+
+        const platformColor = platformColors[stream.platform] || '#666';
+        const isLive = !!stream.stream_url; // 判断是否有直播源
+
+        const card = $('<div class="livestream-card"></div>');
+        
+        // 如果未开播，添加未开播样式类
+        if (!isLive) {
+            card.addClass('not-live');
+        }
+
+        // 封面图片
+        if (stream.cover_image) {
+            card.append(`
+                <img src="${stream.cover_image}" 
+                     alt="${stream.title}" 
+                     class="cover-image" 
+                     onerror="this.style.display='none'; this.nextElementSibling.style.display='flex'">
+                <div class="placeholder-cover" style="display: none;">
+                    📺
+                </div>
+            `);
+        } else {
+            card.append(`
+                <div class="placeholder-cover">
+                    📺
+                </div>
+            `);
+        }
+
+        // 直播标识或未开播标识
+        if (isLive) {
+            card.append('<div class="live-badge">LIVE</div>');
+        } else {
+            card.append('<div class="offline-badge">未开播</div>');
+        }
+
+        // 平台标识
+        card.append(`
+            <div class="platform-badge" style="background-color: ${platformColor};">
+                ${stream.platform}
+            </div>
+        `);
+
+        // 卡片内容
+        const btnText = isLive ? '观看直播' : '暂未开播';
+        const btnClass = isLive ? 'watch-btn' : 'watch-btn disabled';
+        
+        const content = $(`
+            <div class="card-content">
+                <h3 class="card-title">${stream.title}</h3>
+                <p class="card-description">${stream.description || (isLive ? '欢迎来到直播间' : '主播暂时不在，敬请期待')}</p>
+                <div class="card-footer">
+                    <div class="view-count">
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
+                            <circle cx="12" cy="12" r="3"></circle>
+                        </svg>
+                        <span>${this.formatViewCount(stream.view_count)}</span>
+                    </div>
+                    <button class="${btnClass}">${btnText}</button>
+                </div>
+            </div>
+        `);
+
+        card.append(content);
+
+        // 只有开播时才添加点击事件
+        if (isLive) {
+            card.on('click', () => {
+                this.openLiveStream(stream);
+            });
+        } else {
+            // 未开播时点击提示
+            card.on('click', () => {
+                Toast.show('该平台暂未开播，敬请期待', 'info');
+            });
+        }
+
+        return card;
+    },
+
+    // 格式化观看次数
+    formatViewCount: function(count) {
+        if (!count || count === 0) return '0';
+        if (count < 1000) return count.toString();
+        if (count < 10000) return (count / 1000).toFixed(1) + 'K';
+        if (count < 100000) return (count / 10000).toFixed(1) + 'W';
+        return (count / 10000).toFixed(0) + 'W';
+    },
+
+    // 打开直播投流源
+    openLiveStream: function(stream) {
+        // 增加观看次数
+        LiveStreamAPI.incrementViewCount(stream.id)
+            .then(() => {
+                console.log('观看次数已增加');
+            })
+            .catch(error => {
+                console.error('增加观看次数失败:', error);
+            });
+
+        // 在新窗口打开直播URL
+        if (stream.stream_url) {
+            window.open(stream.stream_url, '_blank');
+        } else {
+            Toast.show('直播地址无效', 'error');
+        }
+    }
+};
+
+// 页面加载完成后初始化
+$(document).ready(function() {
+    LiveStreamManager.init();
+});