Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
gkgkhssy opened this issue Mar 9, 2024 · 2 comments
Open

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

gkgkhssy opened this issue Mar 9, 2024 · 2 comments

Comments

@gkgkhssy
Copy link

gkgkhssy commented Mar 9, 2024

简述

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

感谢反馈!是很不错的建议!(`・ω・´)

目前受限于学业原因更新到下个版本中还是需要一些时间...(´;ω;`)

感谢对本项目的支持!(`・ω・´)

@gkgkhssy
Copy link
Author

gkgkhssy commented Mar 9, 2024

按照自己的节奏来就好 []~( ̄▽ ̄)~*

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants