StudyWithMiku icon indicating copy to clipboard operation
StudyWithMiku copied to clipboard

[Feature] 新增一些功能,优化使用体验

Open gkgkhssy opened this issue 4 months ago • 2 comments

简述

添加了如下功能: 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>

gkgkhssy avatar Mar 09 '24 11:03 gkgkhssy