Skip to content

Commit

Permalink
增加搜索功能
Browse files Browse the repository at this point in the history 
1. 增加歌曲搜索功能，防止点错歌
2. 增加输入框显示在屏幕底部功能，防止页面滚动后找不到输入框（手机排版兼容）
3. 增加静音和解除静音功能
  • Loading branch information
@kasuganosoras
kasuganosoras committed Nov 8, 2019
1 parent 43b9f9a commit b9b23b5
Showing 1 changed file with 56 additions and 10 deletions.
66 changes: 56 additions & 10 deletions index.html
View file
Expand Up @@ -21,9 +21,9 @@
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.zerodream.net/css/materialize.min.css">
<link rel="stylesheet" href="https://cdn.zerodream.net/font-awesome/css/font-awesome.min.css">
<style type="text/css">body{font-size:15px;font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;font-weight:400;}hr{border:2px solid rgba(0,0,0,0.1);}.background-black{background:rgba(0,0,0,0.3);width:100%;height:100%;position:absolute;}.topbar-fixed{z-index:1;position:fixed;top:0px;left:0px;}.container{margin-top:80px;}.logo-text{font-size:22px ! important;font-weight:300;position: relative;top: -2px;}.description{font-size:18px;}.table tr td,.table tr th{padding-left:16px;padding-right:16px;font-weight:400;font-size:15px;}h1,h2,h3,h4,h5{font-weight:400;}.normal-text{font-size:15px;}.input{width:100%;}#chatdata{margin-top:16px;margin-bottom:16px;height:50vh;overflow-y:auto;}#chatdata .sysmsg{padding:4px 12px 4px 12px;border-radius:12px;margin:4px 0px 4px 0px;display:inline-block;background:rgba(0,0,0,0.5);color:#FFF;}#chatdata .chat{width:100%;margin-top:12px;}#chatdata .chat .headimg{display:inline-block;width:65px;text-align:center;vertical-align:top;}#chatdata .chat .headimg img{width:45px;transition-duration:0.25s;}#chatdata .chat .headimg img:hover{box-shadow:0px 0px 8px rgba(0,0,0,0.5);}#chatdata .chat .msgbox{display:inline-block;padding-left:6px;min-width:45px;max-width:calc(100% - 10px);}#chatdata .chat .msgbox small{display:block;}#chatdata .chat .msgbox .msg img{max-width:100%;max-height:100%;}#chatdata .chat .msgbox .msg{margin-top:4px;padding:12px;background:rgba(0,0,0,0.6);border-radius:8px;word-break:break-all;display:inline-block;min-width:45px;}#chatdata .chat .hiddentime{opacity:0;transition-duration:0.25s;}#chatdata .chat .hiddentime:hover{opacity:1;}#chatdata .hidechat{display:none;}.full-width{width:100%;}#musicname,#musiclrc{word-break:break-all;}#blur-img{position:fixed;height:120vh;left:-10%;width:120vw;overflow:hidden;top:-10%;z-index:-1;}.blur-mask{display:none;position:absolute;width:100%;height:100%;background-color:#000;filter:alpha(opacity=30);-moz-opacity:0.3;opacity:0.3;top:0;left:0;overflow:hidden;}.blured-img,#blurimgsrc{width:100%;height:100%;}.table tr td,.table tr th{white-space:nowrap;}::-webkit-scrollbar{width:10px;height:10px;background:rgba(0,0,0,0);}::-webkit-scrollbar-thumb{background:#009688;border-radius:8px;margin-left:2px;margin-right:2px;}::-webkit-scrollbar-corner{background:rgba(0,0,0,0);}</style>
<style type="text/css">body{font-size:15px;font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;font-weight:400;}hr{border:2px solid rgba(0,0,0,0.1);}.background-black{background:rgba(0,0,0,0.3);width:100%;height:100%;position:absolute;}.topbar-fixed{z-index:1;position:fixed;top:0px;left:0px;}.container{margin-top:80px;}.logo-text{font-size:22px ! important;font-weight:300;position: relative;top: -2px;}.description{font-size:18px;}.table tr td,.table tr th{padding-left:16px;padding-right:16px;font-weight:400;font-size:15px;}h1,h2,h3,h4,h5{font-weight:400;}.normal-text{font-size:15px;}.input{width:100%;}#chatdata{margin-top:16px;margin-bottom:16px;height:50vh;overflow-y:auto;}#chatdata .sysmsg{padding:4px 12px 4px 12px;border-radius:12px;margin:4px 0px 4px 0px;display:inline-block;background:rgba(0,0,0,0.5);color:#FFF;}#chatdata .chat{width:100%;margin-top:12px;}#chatdata .chat .headimg{display:inline-block;width:65px;text-align:center;vertical-align:top;}#chatdata .chat .headimg img{width:45px;transition-duration:0.25s;}#chatdata .chat .headimg img:hover{box-shadow:0px 0px 8px rgba(0,0,0,0.5);}#chatdata .chat .msgbox{display:inline-block;padding-left:6px;min-width:45px;max-width:calc(100% - 10px);}#chatdata .chat .msgbox small{display:block;}#chatdata .chat .msgbox .msg img{max-width:100%;max-height:100%;}#chatdata .chat .msgbox .msg{margin-top:4px;padding:12px;background:rgba(0,0,0,0.6);border-radius:8px;word-break:break-all;display:inline-block;min-width:45px;}#chatdata .chat .hiddentime{opacity:0;transition-duration:0.25s;}#chatdata .chat .hiddentime:hover{opacity:1;}#chatdata .hidechat{display:none;}.full-width{width:100%;}#musicname,#musiclrc{word-break:break-all;}#blur-img{position:fixed;height:120vh;left:-10%;width:120vw;overflow:hidden;top:-10%;z-index:-1;}.blur-mask{display:none;position:absolute;width:100%;height:100%;background-color:#000;filter:alpha(opacity=30);-moz-opacity:0.3;opacity:0.3;top:0;left:0;overflow:hidden;}.blured-img,#blurimgsrc{width:100%;height:100%;}.table tr td,.table tr th{white-space:nowrap;}::-webkit-scrollbar{width:10px;height:10px;background:rgba(0,0,0,0);}::-webkit-scrollbar-thumb{background:#009688;border-radius:8px;margin-left:2px;margin-right:2px;}::-webkit-scrollbar-corner{background:rgba(0,0,0,0);}.actionInput a{cursor:pointer;}.livechat{margin-bottom:80px;}</style>
</head>
<body class="blue-grey darken-4 white-text" onclick="javascript:$(faces).fadeOut();">
<body class="blue-grey darken-4 white-text" onclick="checkElement(event)">
<div id="blur-img" style="opacity: 1;">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="blurred_flv8ppoyf" class="blured-img" viewBox="0 0 2304 978" preserveAspectRatio="none">
<filter id="blur_flv8ppoyf">
Expand Down Expand Up @@ -63,9 +63,12 @@
<li><a class="waves-effect" href="https://t.me/Akkariins" target="_blank">Telegram</a></li>
<li><div class="divider"></div></li>
<li><a class="subheader">社交媒体</a></li>
<li><a class="waves-effect" href="https://twitter.com/KasuganoSoras">Twitter</a></li>
<li><a class="waves-effect" href="https://facebook.com/KasuganoSoras">Facebook</a></li>
<li><a class="waves-effect" href="https://github.com/KasuganoSoras">GitHub</a></li>
<li><a class="waves-effect" href="https://twitter.com/KasuganoSoras" target="_blank">Twitter</a></li>
<li><a class="waves-effect" href="https://facebook.com/KasuganoSoras" target="_blank">Facebook</a></li>
<li><a class="waves-effect" href="https://github.com/KasuganoSoras" target="_blank">GitHub</a></li>
<li><a class="subheader">关于本项目</a></li>
<li><a class="waves-effect" href="https://www.v2ex.com/t/617224" target="_blank">V2EX</a></li>
<li><a class="waves-effect" href="https://github.com/kasuganosoras/SyncMusic" target="_blank">GitHub</a></li>
</ul>
<div class="container">
<div class="row">
Expand All @@ -89,13 +92,13 @@ <h5>歌词</h5>
<br>
<h5>播放列表</h5>
<p>以下为等待播放的歌曲</p>
<div style="overflow-x: auto;">
<div style="overflow: auto;max-height:512px;">
<table class="table responsive-table" id="musicList"></table>
</div>
<audio src="" id="musicControl" style="width: 0px;height: 0px;opacity: 0;" autoplay>
</div>
</div>
<div class="col s12 m4">
<div class="col s12 m4 livechat">
<h5>实时聊天</h5>
<p>当前一共在线 <online id="online-user">0</online> 人</p>
<div id="chatdata"><button onclick="connect()" class="btn btn-primary">连接服务器</button></div>
Expand All @@ -105,11 +108,16 @@ <h5>实时聊天</h5>
<button onclick="sendmsg()" id="sendmsgbtn" class="btn btn-primary full-width">发送</button>
</span>
</div>
<p><a href="javascript:$(faces).fadeIn();">[ 查看可用表情包 ]</a>&nbsp;&nbsp;<a href="javascript:msginput.value='投票切歌';sendmsg();">[ 投票切歌 ]</a></p>
<p class="actionInput">
<a onclick="openedEmoji=true;$(faces).fadeIn();" id="openfaces">[ 发送表情 ]</a>&nbsp;&nbsp;
<a onclick="msginput.value='投票切歌';sendmsg();">[ 投票切歌 ]</a>&nbsp;&nbsp;
<a onclick="checkInput();" id="opensearch">[ 搜索音乐 ]</a>
</p>
<p>提示：输入 “点歌 歌名” 即可点歌。<br>例如输入：点歌 See You Again<br>支持输入网易云音乐 ID 来点歌</p>
<p>遇到不好听的歌可以输入 “投票切歌”，当投票人数超过在线人数的 30% 时就会切歌。</p>
<p>点播过于难听的歌曲例如 LostRiver 等将会被管理员切歌或从播放列表删除。</p>
<p>输入 “设置昵称 名字” 即可设置自己的显示昵称，仅限当前客户端的 IP 地址有效。</p>
<iframe src="/search.php" style="display: none;border: 0px;width: 100%;height: 512px;position: relative;top: -345px;background: #F1F1F1;border: 12px solid rgba(255,255,255,0.0);border-radius: 8px;box-shadow: 0px 0px 16px rgba(0,0,0,0.8);" id="search"></iframe>
<iframe src="/face.html?s=3" style="display: none;border: 0px;width: 70vw;height: 70vh;position: fixed;top: 15vh;left: 15vw;background: #F1F1F1;border: 12px solid rgba(255,255,255,0.0);border-radius: 8px;box-shadow: 0px 0px 16px rgba(0,0,0,0.8);" id="faces"></iframe>
</div>
</div>
Expand All @@ -129,17 +137,43 @@ <h5>实时聊天</h5>
var next_lrc;
var rotate = 0;
var paused = false;
var openedEmoji = false;
var lastVol = 0;
var last_input = "";
var inputGroupCss = "position: fixed;width:100%;bottom: 0px;left: 0px;padding-bottom:12px;padding-left: 12px;padding-right:12px;background:rgba(39,50,56,0.85);box-shadow: 0px 0px 8px rgba(0,0,0,0.5);";

// 搜索功能
function checkInput() {
var userInput = $("#msginput").val();
userInput = userInput.replace(/点歌 /g, "");
if(userInput != "") {
search.src = "search.php?s=" + encodeURIComponent(userInput);
setTimeout("$(search).fadeIn();", 500);
openedEmoji = true;
}
}

// 暂停音乐
function setPause() {
if(paused) {
musicControl.volume = 1;
musicControl.volume = lastVol;
paused = false;
} else {
lastVol = musicControl.volume;
musicControl.volume = 0;
paused = true;
}
}

// 关闭窗口
function checkElement(event) {
if(openedEmoji && event.target != faces && event.target != openfaces && event.target != search && event.target != opensearch) {
$(faces).fadeOut();
$(search).fadeOut();
openedEmoji = false;
}
}

// 系统消息
function print(msg) {
$("#chatdata").append("<center><span class='sysmsg'>" + msg + "</span></center>");
Expand Down Expand Up @@ -180,6 +214,7 @@ <h5>实时聊天</h5>
// 读取音乐
function music(data) {
// 获取音乐标题 复用
// 原本 pull request 这里加了个通知后面考虑还是去掉了，因为会多次显示刷屏
let music_title = data.artists + " - " + data.name;
document.title = music_title + " - SyncMusic - 在线点歌";
musicControl.src = data.file;
Expand All @@ -188,7 +223,6 @@ <h5>实时聊天</h5>
musicpic.src = data.image;
rotate = 0;
$("#blurimgsrc").attr("xlink:href", data.image);
print("正在播放：" + music_title);
$(musicpic).fadeIn();
lrcObj = parseLyric(data.lrcs);
setTimeout(function() {
Expand Down Expand Up @@ -254,6 +288,10 @@ <h5>实时聊天</h5>
websocket.onopen = function (event) {
$("#chatdata").html("");
ws_connected = true;
var userNick = window.localStorage.getItem("username");
if(userNick != null && userNick != undefined) {
websocket.send('{"type":"msg","data":"设置昵称 ' + userNick + '"}');
}
};
websocket.onclose = function (event) {
ws_connected = false;
Expand Down Expand Up @@ -288,6 +326,9 @@ <h5>实时聊天</h5>
case "online":
$("#online-user").html(json.data);
break;
case "setname":
window.localStorage.setItem("username", json.data);
break;
default:
print("Unknown message type: " + json.type);
}
Expand Down Expand Up @@ -327,6 +368,11 @@ <h5>实时聊天</h5>
rotate = rotate + 1;
musicpic.style.transform = "rotate(" + rotate + "deg)";
}
if(document.body.clientWidth <= 600) {
$(".input-group").attr("style", inputGroupCss);
} else {
$(".input-group").attr("style", "");
}
}, 100);
}
}
Expand Down

0 comments on commit b9b23b5

Please sign in to comment.