[Feature] 新增一些功能,优化使用体验
Opened this issue · 2 comments
gkgkhssy commented
简述
添加了如下功能:
1,双击全屏
2,初始展开歌单
3,增加键盘操作逻辑
自己用的时候想到的一些功能
细节
<style>
body {
/* 禁止复制,防止双击选中 */
user-select: none;
}
</style>
<script>
$(() => {
// 全局变量
var mouseClick = false; // 鼠标点击开关
var keyClick = true; // 键盘点击开关
// 页面主体点击事件
$("body").click((event) => {
// 如果点击的不是页面主体(点击了功能组件),则直接返回,
if ($(event.target)[0].nodeName != "BODY") return;
// 防误触,点击一次后短暂解锁
if (!mouseClick && document.fullscreenElement == null) {
mouseClick = true;
setTimeout(() => {
mouseClick = false;
}, 300);
return;
}
// 进入全屏,如果播放列表和播放器同时展开,则收起列表
if (document.fullscreenElement == null) { // 如果没有全屏则进入全屏
document.documentElement.requestFullscreen();
} else if (!$(".aplayer-list-hide").length && !$(".aplayer-narrow").length) {
$(".aplayer-icon-menu").click();
} else if (!$(".aplayer-narrow").length) { // 如果播放器展开则收起
// 如果是移动端则不收起播放器
if (/(iPhone|iPad|iPod|Android|webOS|BlackBerry|Opera Mini|IEMobile)/i.test(navigator.userAgent)) return;
$(".aplayer-miniswitcher").click();
}
});
// 监听键盘输入
$(document).keydown((event) => {
let key = event.key;
if (key == "k") { keyClick = keyClick == true ? false : true; } // 切换快捷键开关
if (!keyClick) return;
switch (key) {
case " ": // 播放|暂停
case "Enter":
// 未在首页则点击播放器的开始|暂停,否则点击开始(开始学习)
if (!$("#scene_top").is(":visible")) $(".aplayer-icon-play").click();
else $("#btt_start").click();
break;
case "ArrowRight": // 点击右键展开播放器
if ($(".aplayer-narrow").length) $(".aplayer-miniswitcher").click();
break;
case "ArrowLeft": // 点击左键收起播放器
if (!$(".aplayer-list-hide").length) { // 有列表则先收列表(平滑显示)
$(".aplayer-icon-menu").click();
setTimeout(() => {
$(".aplayer-miniswitcher").click();
}, 400);
} else if (!$(".aplayer-narrow").length) $(".aplayer-miniswitcher").click();
break;
case "ArrowUp": // 点击上键展开歌曲列表
if ($(".aplayer-list-hide").length && !$(".aplayer-narrow").length) $(".aplayer-icon-menu").click();
// 如果未展开播放器,则先展开播放器,再展开列表
else if ($(".aplayer-narrow").length) {
$(".aplayer-miniswitcher").click();
setTimeout(() => {
$(".aplayer-icon-menu").click();
}, 200);
}
break;
case "ArrowDown": // 点击下键收起歌曲列表
if (!$(".aplayer-list-hide").length && !$(".aplayer-narrow").length) $(".aplayer-icon-menu").click();
break;
case "a": // 上一曲
$(".aplayer-icon-back").click();
break;
case "d": // 下一曲
$(".aplayer-icon-forward").click();
break;
case "b": // 切换顺序或无序播放
$(".aplayer-icon-order").click();
break;
case "n": // 切换循环模式
$(".aplayer-icon-loop").click();
break;
case "m": // 开关歌词
$(".aplayer-icon-lrc").click();
break;
case "x": // 休息(暂停计时)
//在首页则直接返回
if ($("#scene_top").is(":visible")) return;
// 未弹出休息界面则进入休息,否则结束休息
if (!$("#rest").is(":visible")) $("#bt_rest").click();
else $("#bt_restclose").click();
break;
case "f": // 全屏
$("#bt_fs").click();
// 若未全屏且暂停播放,则切换播放状态
if ((document.fullscreenElement == null && $(".aplayer-play").length)
// || (document.fullscreenElement != null && $(".aplayer-pause").length) // 或全屏且正在播放
) {
if (!$("#scene_top").is(":visible")) $(".aplayer-icon-play").click();
else $("#btt_start").click();
}
break;
case "c": // 结束学习
if (!$("#scene_top").is(":visible")) $("#bt_stop").click(); // 不在首页时返回首页
break;
default:
// console.log(key);
break;
}
});
// 初始展开
var odd = setInterval(() => {
if ($(".aplayer-miniswitcher").length != 0) {
$(".aplayer-miniswitcher").click();
setTimeout(() => {
$(".aplayer-icon-menu").click();
}, 100);
clearInterval(odd);
}
}, 500);
})
</script>
WenqiOfficial commented
感谢反馈!是很不错的建议!(`・ω・´)
目前受限于学业原因更新到下个版本中还是需要一些时间...(´;ω;`)
感谢对本项目的支持!(`・ω・´)
gkgkhssy commented
按照自己的节奏来就好 []~( ̄▽ ̄)~*