添加桌面半透明弹幕

zephyrzoom · Aug 3, 2016 · 7a13ccd · 7a13ccd
1 parent c76fb93
commit 7a13ccd
Show file tree

Hide file tree

Showing 10 changed files with 181 additions and 10 deletions.
diff --git a/app/config.json b/app/config.json
@@ -1 +1 @@
-{"music":"true","desktopDanmu":"false"}
+{"music":"false","desktopDanmu":"false"}
diff --git a/app/main.js b/app/main.js
@@ -36,7 +36,7 @@ app.on('activate', () => {
 
 ipcMain.on('login', (event, arg) => {
     danmu = new BrowserWindow({
-        width: 300,
+        width: 350,
         height: 500,
         autoHideMenuBar: true,
         icon: __dirname + '/assets/favicon.ico',

diff --git a/app/player/playlist.txt b/app/player/playlist.txt
@@ -1,2 +1 @@
 播放列表
-1. 玫瑰
diff --git a/app/render/frameless.html b/app/render/frameless.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <title>桌面弹幕</title>
+    <script>
+        window.$ = window.jQuery = require('../js/jquery.js');
+        require('./frameless');
+    </script>
+    <style>
+        body {
+            overflow: hidden;
+            -webkit-app-region: drag;
+
+        }
+
+        button {
+            /*display: none;*/
+            -webkit-app-region: no-drag;
+            position: fixed;
+
+        }
+
+        #wrap {
+            width: 190px;
+            height: 290px;
+            border: 1px solid;
+        }
+
+    </style>
+</head>
+
+<body>
+
+    <div id="wrap">
+        <button class="lock">锁定</button>
+        <div id="danmu"></div>
+    </div>
+</body>
+
+</html>
diff --git a/app/render/frameless.js b/app/render/frameless.js
@@ -0,0 +1,27 @@
+const { ipcRenderer } = require('electron');
+
+ipcRenderer.on('danmu', (event, nn, txt) => {
+    const danmu = document.getElementById('danmu');
+    danmu.innerHTML += '<p>' + nn + ':' + txt + '</p>';
+    danmu.scrollIntoView(false);
+});
+
+$(document).ready(() => {
+    $('#wrap').hover(() => {
+            $('button').css('display', 'block');
+            $('#wrap').css('border', '1px solid');
+        }, () => {
+            $('button').css('display', 'none');
+            $('#wrap').css('border', 'none');
+        }
+    );
+    $('button').click(() => {
+        if ($('button').hasClass('lock')) {
+            $('body').css('-webkit-app-region', 'no-drag');
+            $('button').text('移动').removeClass('lock').addClass('unlock');
+        } else if ($('button').hasClass('unlock')) {
+            $('body').css('-webkit-app-region', 'drag');
+            $('button').text('锁定').removeClass('unlock').addClass('lock');
+        }
+    });
+});
diff --git a/app/render/index.js b/app/render/index.js
@@ -7,6 +7,8 @@ const danmu = require('../danmu/danmu');
 const config = require('../util/config');
 
 let cfg;
+let desktopDanmuWin;
+let settingsWin;
 
 // 处理格式化的弹幕
 function splitDanmu(totalDanmu) {
@@ -22,6 +24,12 @@ function updateMsg(nn, txt) {
     // 滚动条始终在最下面
     const pane = document.getElementById('pane');
     pane.scrollTop = pane.scrollHeight;
+
+
+    if (cfg.desktopDanmu == 'true') {
+        console.log('sended');
+        desktopDanmuWin.webContents.send('danmu', nn, txt);
+    }
 }
 
 // 更新观众人数
@@ -58,7 +66,7 @@ $(document).ready(function() {
 
     const settings = document.getElementById('settings');
     settings.addEventListener('click', (event) => {
-        let settingsWin = new BrowserWindow({
+        settingsWin = new BrowserWindow({
             width: 200,
             height: 100,
             autoHideMenuBar: true,
@@ -73,6 +81,9 @@ $(document).ready(function() {
 
     config.getConfig((data) => {
         cfg = data;
+        if (cfg.desktopDanmu == 'true') {
+            createDesktopDanmu();
+        }
     });
 });
 
@@ -81,12 +92,39 @@ ipcRenderer.on('roomid', (event, arg) => {
     setRoomId(arg);
 });
 
-
 ipcMain.on('update-config', (event, arg) => {
     cfg = arg;
-    console.log('update config', cfg);
 });
 
+
+ipcMain.on('update-desktopDanmu', (event, arg) => {
+    cfg = arg;
+    if (cfg.desktopDanmu == 'true') {
+        createDesktopDanmu();
+    } else if (cfg.desktopDanmu == 'false') {
+        desktopDanmuWin.close();
+    }
+});
+
+function createDesktopDanmu() {
+    desktopDanmuWin = new BrowserWindow({
+        width: 200,
+        height: 300,
+        autoHideMenuBar: true,
+        icon: __dirname + '../assets/favicon.ico',
+        frame: false,
+        transparent: true,
+    });
+    desktopDanmuWin.loadURL(`file://${__dirname}/frameless.html`);
+    desktopDanmuWin.setAlwaysOnTop(true);
+    // desktopDanmuWin.setIgnoreMouseEvents(true);
+    desktopDanmuWin.on('closed', () => {
+        desktopDanmuWin = null;
+        cfg.desktopDanmu = 'false';
+        settingsWin.webContents.send('close-desktopDanmu');
+    });
+}
+
 function formatMsg(msg) {
     const DANMU_TYPE = '1';
     const BAMBOO_TYPE = '206';

diff --git a/app/render/settings.js b/app/render/settings.js
@@ -38,7 +38,11 @@ $(document).ready(() => {
             cfg.desktopDanmu = 'true';
             $('#desktopDanmu').removeClass('btn-positive').addClass('btn-negative').text('关闭弹幕');
         }
-        ipcRenderer.send('update-config', cfg);
+        ipcRenderer.send('update-desktopDanmu', cfg);
         config.setConfig(cfg);
     });
 });
+
+ipcRenderer.on('close-desktopDanmu', () => {
+    $('#desktopDanmu').removeClass('btn-negative').addClass('btn-positive').text('开启弹幕');
+});
diff --git a/log/log.txt b/log/log.txt
@@ -1,3 +0,0 @@
-8/3/2016, 3:15:36 AM 点歌成功
-8/3/2016, 3:16:21 AM 切歌成功
-8/3/2016, 3:16:27 AM 点歌成功

diff --git a/test/hover.html b/test/hover.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <title></title>
+    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.0.js"></script>
+    <script>
+        $(document).ready(() => {
+            $('div').hover(() => {
+                console.log('hover');
+                $('button').css('display', 'block');
+            }, () => {
+                console.log('leave');
+                $('button').css('display', 'none');
+            });
+        });
+    </script>
+    <style>
+        button {
+            /*display: none;*/
+        }
+
+        div {
+            width: 500px;
+            height: 300px;
+            color: #fff;
+            border: 1px solid;
+        }
+    </style>
+</head>
+
+<body>
+
+    <div>
+        <button>按钮</button>
+    </div>
+</body>
+
+</html>
diff --git a/test/scroll.html b/test/scroll.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <title></title>
+        <script>
+            window.onload = () => {
+                const add = document.getElementById('add');
+                const c = document.getElementById('content');
+                add.addEventListener('click', () => {
+                    c.innerHTML += '<p>aaaaa</p>';
+                    window.scrollTo(c.scrollHeight);
+                    // c.scrollIntoView(false);
+                });
+            };
+        </script>
+    </head>
+    <body>
+
+        <div id="content">
+        </div>
+        <button id="add">add</button>
+    </body>
+</html>
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		{"music":"true","desktopDanmu":"false"}
		{"music":"false","desktopDanmu":"false"}