Merge pull request #154 from HereIsYui/master

播放器修改为iframe版本
csfwff · Oct 16, 2024 · d7807cd · d7807cd
2 parents 2c6be40 + 248193d
commit d7807cd
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 35 deletions.
diff --git a/src/main/resources/css/base.css b/src/main/resources/css/base.css
diff --git a/src/main/resources/css/mobile-base.css b/src/main/resources/css/mobile-base.css
diff --git a/src/main/resources/js/chat-room.js b/src/main/resources/js/chat-room.js
@@ -2408,16 +2408,20 @@ ${result.info.msg}
  modeIcon.setAttribute('alt','随机播放');
  }
  },
- add(e){
+ add(e,showToast = true){
  let music = e.parentElement.dataset;
+ if(music.source.startsWith('http://music.163.com/song') || music.source.startsWith('https://music.163.com/song')){
+ let sourceEle = music.source.split('=');
+ music.source = sourceEle[sourceEle.length - 1];
+ }
  let idx = this.list.findIndex(e=>e.source === music.source);
  if(idx !== -1){
  this.index = idx;
  return;
  }
  this.list.push(music);
  this.renderList();
- Util.notice("success", 2000, "已加入播放列表。");
+ showToast && Util.notice("success", 2000, "已加入播放列表。");
  },
  remove(idx){
  this.list.splice(idx,1);
@@ -2458,14 +2462,22 @@ ${result.info.msg}
  },
  play(e){
  let music = e.parentElement.dataset;
- this.add(e);
- this.ele.src = music.source;
+ this.add(e,false);
+ if(music.source.startsWith('http://music.163.com/song') || music.source.startsWith('https://music.163.com/song')){
+ let sourceEle = music.source.split('=');
+ music.source = sourceEle[sourceEle.length - 1];
+ }
+ //this.ele.src = music.source;
+ let iframeBox = document.querySelector('.music-detail');
+ iframeBox.innerHTML = '<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width="100%" height=86 src="//music.163.com/outchain/player?type=2&id='+music.source+'&auto=1&height=66"></iframe>';
  this.playing = false;
  this.togglePlay();
  !this.isShow && this.show();
  },
  playIndex(idx){
- this.ele.src = this.list[idx].source;
+ //this.ele.src = this.list[idx].source;
+ let iframeBox = document.querySelector('.music-detail');
+ iframeBox.innerHTML = '<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width="100%" height=86 src="//music.163.com/outchain/player?type=2&id='+this.list[idx].source+'&auto=1&height=66"></iframe>';
  this.playing = false;
  this.index = idx;
  this.togglePlay();
@@ -2479,11 +2491,11 @@ ${result.info.msg}
  },
  togglePlay(){
  this.playing = !this.playing;
- if(this.playing){
- this.ele.play();
- }else{
- this.ele.pause();
- }
+ // if(this.playing){
+ //  this.ele.play();
+ // }else{
+ //  this.ele.pause();
+ // }
  },
  hide(){
  this.isShow = false;

diff --git a/src/main/resources/scss/base.scss b/src/main/resources/scss/base.scss
@@ -1879,10 +1879,10 @@ a[class*=" icon-"]:hover {
 // 音乐播放器
 #musicBox{
  position: fixed;
- bottom: -50px;
+ bottom: -106px;
  left: 0;
  width: 100%;
- height: 50px;
+ height: 106px;
  background: #fff;
  box-shadow: -1px -1px 4px 1px rgba(0,0,0,.3);
  z-index: 9990;
@@ -1891,11 +1891,12 @@ a[class*=" icon-"]:hover {
  position: relative;
  margin: 0 auto;
  width: 90%;
- height: 50px;
+ height: 106px;
  min-width: 720px;
  max-width: 1300px;
  display: flex;
  padding: 5px 0;
+ align-items: center;
  .music-img{
  .music-img-item{
  width: 40px;
@@ -1910,7 +1911,7 @@ a[class*=" icon-"]:hover {
  }
  .music-detail{
  flex: 1;
- height: 40px;
+ height: 106px;
  background: #fff;
  box-sizing: border-box;
  display: flex;
@@ -1943,7 +1944,7 @@ a[class*=" icon-"]:hover {
  display: flex;
  justify-content: space-between;
  align-items: center;
- width: 120px;
+ width: 70px;
  height: 40px;
  img{
  cursor:pointer;

diff --git a/src/main/resources/scss/mobile-base.scss b/src/main/resources/scss/mobile-base.scss
@@ -3278,10 +3278,10 @@ only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-de
 // 音乐播放器
 #musicBox{
  position: fixed;
- bottom: -50px;
+ bottom: -106px;
  left: 0;
  width: 100%;
- height: 50px;
+ height: 106px;
  background: #fff;
  box-shadow: -1px -1px 4px 1px rgba(0,0,0,.3);
  z-index: 9990;
@@ -3290,7 +3290,7 @@ only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-de
  position: relative;
  margin: 0 auto;
  width: 90%;
- height: 50px;
+ height: 106px;
  min-width: 430px;
  max-width: 1300px;
  display: flex;
@@ -3309,7 +3309,7 @@ only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-de
  }
  .music-detail{
  width: 100px;
- height: 40px;
+ height: 106px;
  background: #fff;
  box-sizing: border-box;
  display: flex;

diff --git a/src/main/resources/skins/classic/chat-room.ftl b/src/main/resources/skins/classic/chat-room.ftl
@@ -179,30 +179,32 @@
 <div id="musicBox">
  <div class="music-box">
  <div class="music-controller">
- <div class="music-prev">
+ <div class="music-prev" onclick="ChatRoom.playSound.prev()">
  <img src="${staticServePath}/images/music/circle_skip_previous.png" alt="">
  </div>
- <div class="music-play" onclick="ChatRoom.playSound.togglePlay()">
- <img class="music-play-icon" src="${staticServePath}/images/music/circle_play.png" alt="">
- </div>
- <div class="music-next">
+<#-- <div class="music-play" onclick="ChatRoom.playSound.togglePlay()">-->
+<#-- <img class="music-play-icon" src="${staticServePath}/images/music/circle_play.png" alt="">-->
+<#-- </div>-->
+ <div class="music-next" onclick="ChatRoom.playSound.next()">
  <img src="${staticServePath}/images/music/circle_skip_next.png" alt="">
  </div>
  </div>
- <div class="music-img">
- <img src="${staticServePath}/images/music/cat.gif" class="music-img-item" alt="" />
- </div>
+<#-- <div class="music-img">-->
+<#-- <img src="${staticServePath}/images/music/cat.gif" class="music-img-item" alt="" />-->
+<#-- </div>-->
  <div class="music-detail">
+<#-- <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width="100%" height="52" src="//music.163.com/outchain/player?type=2&id=2635209343&auto=0&height=32"></iframe>-->
+
  <div class="music-title">摸鱼播放器v1.0</div>
  <div class="music-time"><span class="music-current">00:00</span>-<span class="music-duration">00:00</span></div>
  </div>
  <div class="music-controller">
- <div class="music-voice" style="padding: 2px;box-sizing: border-box">
- <img class="music-voice-icon" src="${staticServePath}/images/music/volume_3.png" alt="">
- <div class="music-voice-box">
- <input type="range" value="100" max="100" min="0" onchange="ChatRoom.playSound.changeVoice(this)">
- </div>
- </div>
+<#-- <div class="music-voice" style="padding: 2px;box-sizing: border-box">-->
+<#-- <img class="music-voice-icon" src="${staticServePath}/images/music/volume_3.png" alt="">-->
+<#-- <div class="music-voice-box">-->
+<#-- <input type="range" value="100" max="100" min="0" onchange="ChatRoom.playSound.changeVoice(this)">-->
+<#-- </div>-->
+<#-- </div>-->
  <div class="music-mode" style="padding: 5px;box-sizing: border-box" onclick="ChatRoom.playSound.toggleMode()">
  <img class="music-mode-icon" src="${staticServePath}/images/music/repeat.png" alt="">
  </div>