From 4e4cd95431846cc6e0e2671e88dc95ffef229f00 Mon Sep 17 00:00:00 2001 From: zhaojun1998 Date: Sun, 25 Aug 2019 23:17:05 +0800 Subject: [PATCH] =?UTF-8?q?=E6=94=AF=E6=8C=81=E5=9C=A8=E7=BA=BF=E6=92=AD?= =?UTF-8?q?=E6=94=BE=E9=9F=B3=E9=A2=91,=20=E4=B8=94=E8=8E=B7=E5=8F=96?= =?UTF-8?q?=E9=9F=B3=E9=A2=91=E6=96=87=E4=BB=B6=E5=85=83=E6=95=B0=E6=8D=AE?= =?UTF-8?q?,=20=E6=AD=8C=E6=89=8B,=20=E5=B0=81=E9=9D=A2=E7=AD=89=E4=BF=A1?= =?UTF-8?q?=E6=81=AF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../common/controller/FileController.java | 5 + .../im/zhaojun/common/model/AudioInfo.java | 40 ++++ .../static/shikwasa/shikwasa.cjs.css | 2 +- .../resources/static/shikwasa/shikwasa.cjs.js | 208 +++++++++++------- .../static/shikwasa/shikwasa.min.css | 2 +- .../resources/static/shikwasa/shikwasa.min.js | 2 +- 6 files changed, 178 insertions(+), 81 deletions(-) create mode 100644 src/main/java/im/zhaojun/common/model/AudioInfo.java diff --git a/src/main/java/im/zhaojun/common/controller/FileController.java b/src/main/java/im/zhaojun/common/controller/FileController.java index 13ae273..c6c830a 100644 --- a/src/main/java/im/zhaojun/common/controller/FileController.java +++ b/src/main/java/im/zhaojun/common/controller/FileController.java @@ -111,4 +111,9 @@ public class FileController { public ResultBean getImageInfo(String url) throws Exception { return ResultBean.success(fileService.getImageInfo(url)); } + + @GetMapping("/audioInfo") + public ResultBean getAudioInfo(String url) throws Exception { + return ResultBean.success(fileService.getAudioInfo(url)); + } } diff --git a/src/main/java/im/zhaojun/common/model/AudioInfo.java b/src/main/java/im/zhaojun/common/model/AudioInfo.java new file mode 100644 index 0000000..1eff5e2 --- /dev/null +++ b/src/main/java/im/zhaojun/common/model/AudioInfo.java @@ -0,0 +1,40 @@ +package im.zhaojun.common.model; + +public class AudioInfo { + private String title; + private String artist; + private String cover; + private String src; + + public String getTitle() { + return title; + } + + public void setTitle(String title) { + this.title = title; + } + + public String getArtist() { + return artist; + } + + public void setArtist(String artist) { + this.artist = artist; + } + + public String getCover() { + return cover; + } + + public void setCover(String cover) { + this.cover = cover; + } + + public String getSrc() { + return src; + } + + public void setSrc(String src) { + this.src = src; + } +} diff --git a/src/main/resources/static/shikwasa/shikwasa.cjs.css b/src/main/resources/static/shikwasa/shikwasa.cjs.css index 78954ab..6e6ac00 100644 --- a/src/main/resources/static/shikwasa/shikwasa.cjs.css +++ b/src/main/resources/static/shikwasa/shikwasa.cjs.css @@ -1 +1 @@ -@keyframes rotate{to{transform:rotate(1turn)}}@-webkit-keyframes rotate{to{-webkit-transform:rotate(1turn)}}@-moz-keyframes rotate{to{transform:rotate(1turn)}}.shk{position:inherit;height:120px;box-sizing:border-box;display:flex;flex-flow:row nowrap;border:none;box-shadow:0 0 14px 6px hsla(0,0%,88.6%,.5);cursor:auto;font:400 18px/1.42 Pingfang SC,Hiragano,Helvetica Neue,sans-serif}.shk.Fixed{position:fixed;bottom:0;left:0;margin:0;width:100%}.shk.Fixed.Top{top:0;bottom:auto}.shk.Seeking{cursor:grabbing;cursor:-moz-grabbing;cursor:-webkit-grabbing}.shk_cover{width:120px;flex-shrink:0}.shk_cover,.shk_main{position:relative;height:100%}.shk_main{box-sizing:border-box;flex-grow:1;padding:14px 30px 10px;border:none;border-left:5px solid var(--theme-color);width:calc(100% - 120px);background-color:#fff}.shk_img{background-color:var(--theme-color);background-size:cover;background-repeat:no-repeat;height:100%;width:100%}.shk_btn{appearance:none;-webkit-appearance:none;-moz-appearance:none;background:transparent;border:none;outline:none;padding:0;cursor:pointer}.shk_cover .shk_btn{position:absolute;top:0;left:0;width:100%;height:100%;opacity:.8}.shk_cover .shk_btn:focus,.shk_cover .shk_btn:hover{opacity:1;transition:all 1s ease}.shk_cover .shk_btn svg{box-sizing:border-box}.shk_btn_play{width:100px;height:100px}.shk_btn_pause{position:absolute;bottom:10px;right:10px;width:24px;height:24px}.shk_btn_pause circle{stroke-width:6;r:38}.shk.Pause .shk_btn_play,.shk.Play .shk_btn_pause{opacity:1;visibility:visible;transition:opacity .05s ease-in .01s,visibility .01s}.shk.Pause .shk_btn_pause,.shk.Play .shk_btn_play{opacity:0;visibility:hidden;transition:opacity .01s ease-in,visibility .01s .01s}.shk_text{overflow:hidden;width:100%;color:var(--theme-color)}.shk_controls,.shk_text,.shk_time{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.shk_subtitle{font-weight:500;max-width:calc(100% - 164px);vertical-align:middle;overflow:hidden;text-overflow:clip}.shk_subtitle,.shk_title{display:inline-block;white-space:nowrap}.shk_title{font-weight:300;margin-top:2px;font-size:24px;transition:transform 0s ease-in-out}.shk_controls{position:absolute;top:8px;right:20px;z-index:1}.shk_controls .shk_btn{display:inline-block;vertical-align:middle;width:36px;height:36px;color:var(--theme-color);font-size:13px;opacity:1;transform:scale(1)}.shk_controls .shk_btn:hover{opacity:.8}.shk_main .shk_btn svg{width:16px;height:16px;padding:10px;fill:var(--theme-color);vertical-align:middle}.shk_btn.shk_btn_download svg{fill:none;stroke:var(--theme-color)}.shk_btn_backward svg,.shk_btn_forward svg{width:18px;height:18px;padding:9px}.shk.Mute svg.shk_btn_mute,svg.shk_btn_unmute{display:inline-block}.shk.Mute svg.shk_btn_unmute,svg.shk_btn_mute{display:none}.shk_bar-wrap{height:18px;padding:1px 0;position:relative;cursor:pointer}.shk_bar{position:relative;width:100%;height:3px;margin-top:7px;box-sizing:border-box;background:#e7e7e7;z-index:0}.shk_bar_loaded,.shk_bar_played{width:0;position:absolute;left:0;top:0;bottom:0}.shk_bar_loaded{background:var(--theme-color);filter:opacity(30%);z-index:1}.shk_bar_played{z-index:2}.bar-handle,.shk_bar_played{background:var(--theme-color)}.bar-handle{position:absolute;top:0;right:0;margin-top:-6px;margin-right:-8px;height:16px;width:8px;cursor:move;cursor:grab;cursor:-moz-grab;cursor:-webkit-grab}.bar-handle:active{cursor:grabbing;cursor:-moz-grabbing;cursor:-webkit-grabbing}.shk_bottom{position:absolute;right:30px;bottom:10px;font-size:0;font-weight:400;color:#555}.shk_bottom span{vertical-align:middle}.shk_loader{display:none;color:var(--theme-color)}.shk.Loading .shk_loader{display:inline-block}.shk_loader svg{width:12px;height:12px;animation:rotate 1.4s linear infinite;-webkit-animation:rotate 1.4s linear infinite;-moz-animation:rotate 1.4s linear infinite;position:relative}.shk_visuallyhidden:not(:focus):not(:active){position:absolute;width:1px;height:1px;margin:-1px;border:0;padding:0;white-space:nowrap;clip-path:inset(100%);clip:rect(0 0 0 0);overflow:hidden}.shk_time{margin-left:4px;display:inline-block}.shk_time span{font-size:12px}.shk_time_duration:before{content:"/";margin:0 4px}@media (max-width:768px){.shk.Auto{position:fixed;bottom:0;left:0;margin:0;width:100%}.shk.Auto.Top{top:0;bottom:auto}.shk{height:60px}.shk_cover{width:60px}.shk_cover .shk_btn svg{width:100%;height:100%;padding:10px}.shk_btn_pause{bottom:0;right:0}.shk_btn_pause circle{stroke-width:2;r:40}.shk_main{border-left:none;padding:5px 10px}.shk_subtitle{display:none}.shk_title{font-size:1rem;margin:0}.shk_controls{bottom:0;left:0;top:auto;right:auto}.shk_controls .shk_btn:hover{opacity:1}.shk_bar-wrap{display:none}.shk_bottom{right:10px;bottom:10px}} \ No newline at end of file +@-webkit-keyframes rotate{to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes rotate{to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.shk{position:inherit;height:120px;box-sizing:border-box;display:flex;flex-flow:row nowrap;border:none;box-shadow:0 0 14px 6px hsla(0,0%,88.6%,.5);cursor:auto;font:400 18px/1.42 Pingfang SC,Hiragano,Helvetica Neue,sans-serif}.shk.Fixed{position:fixed;bottom:0;left:0;margin:0;width:100%}.shk.Fixed.Top{top:0;bottom:auto}.shk.Seeking{cursor:-webkit-grabbing;cursor:grabbing}.shk_cover{width:120px;flex-shrink:0}.shk_cover,.shk_main{position:relative;height:100%}.shk_main{box-sizing:border-box;flex-grow:1;padding:14px 30px 10px;border:none;border-left:5px solid var(--theme-color);width:calc(100% - 120px);background-color:#fff}.shk_img{background-color:var(--theme-color);background-size:cover;background-repeat:no-repeat;height:100%;width:100%}.shk_btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:none;outline:none;padding:0;cursor:pointer}.shk_cover .shk_btn{position:absolute;top:0;left:0;width:100%;height:100%;opacity:.8}.shk_cover .shk_btn:focus,.shk_cover .shk_btn:hover{opacity:1;transition:all 1s ease}.shk_cover .shk_btn svg{box-sizing:border-box}.shk_btn_play{width:100px;height:100px}.shk_btn_pause{position:absolute;bottom:10px;right:10px;width:24px;height:24px}.shk_btn_pause circle{stroke-width:6;r:38}.shk.Pause .shk_btn_play,.shk.Play .shk_btn_pause{opacity:1;visibility:visible;transition:opacity .05s ease-in .01s,visibility .01s}.shk.Pause .shk_btn_pause,.shk.Play .shk_btn_play{opacity:0;visibility:hidden;transition:opacity .01s ease-in,visibility .01s .01s}.shk_text{overflow:hidden;width:100%;color:var(--theme-color)}.shk_controls,.shk_text,.shk_time{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.shk_subtitle{font-weight:500;max-width:calc(100% - 164px);vertical-align:middle;overflow:hidden;text-overflow:clip}.shk_subtitle,.shk_title{display:inline-block;white-space:nowrap}.shk_title{font-weight:300;margin-top:2px;font-size:24px;transition:-webkit-transform 0s ease-in-out;transition:transform 0s ease-in-out;transition:transform 0s ease-in-out,-webkit-transform 0s ease-in-out}.shk_controls{position:absolute;top:8px;right:20px;z-index:1}.shk_controls .shk_btn{display:inline-block;vertical-align:middle;width:36px;height:36px;color:var(--theme-color);font-size:13px;opacity:1;-webkit-transform:scale(1);transform:scale(1)}.shk_controls .shk_btn:hover{opacity:.8}.shk_main .shk_btn svg{width:16px;height:16px;padding:10px;fill:var(--theme-color);vertical-align:middle}.shk_btn.shk_btn_download svg{fill:none;stroke:var(--theme-color)}.shk_btn_backward svg,.shk_btn_forward svg{width:18px;height:18px;padding:9px}.shk.Mute svg.shk_btn_mute,svg.shk_btn_unmute{display:inline-block}.shk.Mute svg.shk_btn_unmute,svg.shk_btn_mute{display:none}.shk_bar-wrap{height:18px;padding:1px 0;position:relative;cursor:pointer}.shk_bar{position:relative;width:100%;height:3px;margin-top:7px;box-sizing:border-box;background:#e7e7e7;z-index:0}.shk_bar_loaded,.shk_bar_played{width:0;position:absolute;left:0;top:0;bottom:0}.shk_bar_loaded{background:var(--theme-color);-webkit-filter:opacity(30%);filter:opacity(30%);z-index:1}.shk_bar_played{z-index:2}.bar-handle,.shk_bar_played{background:var(--theme-color)}.bar-handle{position:absolute;top:0;right:0;margin-top:-6px;margin-right:-8px;height:16px;width:8px;cursor:move;cursor:-webkit-grab;cursor:grab}.bar-handle:active{cursor:-webkit-grabbing;cursor:grabbing}.shk_bottom{position:absolute;right:30px;bottom:10px;font-size:0;font-weight:400;color:#555}.shk_bottom span{vertical-align:middle}.shk_loader{display:none;color:var(--theme-color)}.shk.Loading .shk_loader{display:inline-block}.shk_loader svg{width:12px;height:12px;-webkit-animation:rotate 1.4s linear infinite;animation:rotate 1.4s linear infinite;position:relative}.shk_visuallyhidden:not(:focus):not(:active){position:absolute;width:1px;height:1px;margin:-1px;border:0;padding:0;white-space:nowrap;-webkit-clip-path:inset(100%);clip-path:inset(100%);clip:rect(0 0 0 0);overflow:hidden}.shk_time{margin-left:4px;display:inline-block}.shk_time span{font-size:12px}.shk_time_duration:before{content:"/";margin:0 4px}.shk_icons{display:none}@media (max-width:768px){.shk.Auto{position:fixed;bottom:0;left:0;margin:0;width:100%}.shk.Auto.Top{top:0;bottom:auto}.shk{height:60px}.shk_cover{width:60px}.shk_cover .shk_btn svg{width:100%;height:100%;padding:10px}.shk_btn_pause{bottom:0;right:0}.shk_btn_pause circle{stroke-width:2;r:40}.shk_main{border-left:none;padding:5px 10px}.shk_subtitle{display:none}.shk_title{font-size:1rem;margin:0}.shk_controls{bottom:0;left:0;top:auto;right:auto}.shk_controls .shk_btn:hover{opacity:1}.shk_bar-wrap{display:none}.shk_bottom{right:10px;bottom:10px}} \ No newline at end of file diff --git a/src/main/resources/static/shikwasa/shikwasa.cjs.js b/src/main/resources/static/shikwasa/shikwasa.cjs.js index 280327b..9122c0d 100644 --- a/src/main/resources/static/shikwasa/shikwasa.cjs.js +++ b/src/main/resources/static/shikwasa/shikwasa.cjs.js @@ -1,6 +1,8 @@ 'use strict'; -var playerElement = "
loading --:-- --:--
"; +var playerTemplate = "
loading --:-- --:--
"; + +var iconTemplate = " "; const CONFIG = { container: document.querySelector('body'), @@ -9,7 +11,7 @@ const CONFIG = { position: 'bottom', }, download: true, - transitionDuration: 5000, + transitionSpeed: 3, themeColor: '#00869B', autoPlay: false, muted: false, @@ -37,17 +39,20 @@ function numToString(num) { return float.slice(-1) === '0' ? float.slice(0, -1) :float } -function carousel(el, distance = 0, duration = 5000, pause = 2000) { +function carousel(el, distance = 0, speed = 3, pause = 2000) { + let carouselTimeout, carouselInterval; + const duration = distance / speed * 100; const interval = duration + pause; function transform() { el.style.transitionDuration = `${duration / 1000}s`; - el.style.transform = `translateX(${distance}px)`; - setTimeout(() => { + el.style.transform = `translateX(-${distance}px)`; + carouselTimeout = setTimeout(() => { el.style.transform = 'translateX(0px)'; }, interval); } transform(); - return setInterval(() => transform(), interval * 2) + carouselInterval = setInterval(() => transform(), interval * 2); + return [carouselTimeout, carouselInterval] } function handleOptions(options) { @@ -59,7 +64,18 @@ function handleOptions(options) { if (!result) { options.fixed.type = CONFIG.fixed.type; } - options.transitionDuration = +options.transitionDuration || CONFIG.transitionDuration; + if (options.transitionSpeed) { + let speed = parseInt(options.transitionSpeed); + if (isNaN(speed)) { + options.transitionSpeed = CONFIG.transitionSpeed; + } else { + speed = Math.max(speed, 1); + speed = Math.min(speed, 5); + options.transitionSpeed = speed; + } + } else { + options.transitionSpeed = CONFIG.transitionSpeed; + } options.themeColor = options.themeColor || CONFIG.themeColor; options.autoPlay = options.autoPlay || CONFIG.autoPlay; options.muted = options.muted || CONFIG.muted; @@ -88,34 +104,62 @@ function handleOptions(options) { return options } -class Template { - constructor(container, options) { - if (!container) return - this.playBtn = container.querySelector('.shk_cover .shk_btn'); - this.downloadBtn = container.querySelector('.shk_btn_download'); - this.fwdBtn = container.querySelector('.shk_btn_forward'); - this.bwdBtn = container.querySelector('.shk_btn_backward'); - this.speedBtn = container.querySelector('.shk_btn_speed'); - this.muteBtn = container.querySelector('.shk_btn_volume'); - this.artist = container.querySelector('.shk_subtitle'); - this.texts = container.querySelector('.shk_text'); - this.title = container.querySelector('.shk_title'); - this.subtitle = container.querySelector('.shk_subtitle'); - this.currentTime = container.querySelector('.shk_time_now'); - this.duration = container.querySelector('.shk_time_duration'); - this.bar = container.querySelector('.shk_bar'); - this.barWrap = container.querySelector('.shk_bar-wrap'); - this.audioPlayed = container.querySelector('.shk_bar_played'); - this.audioLoaded = container.querySelector('.shk_bar_loaded'); - this.handle = container.querySelector('.bar-handle'); - this.cover = container.querySelector('.shk_img'); +let carouselTimeout, carouselInterval; +class Template { + constructor(options) { + this.mounted = false; + this.icons = document.createElement('div'); + this.icons.classList.add('shk_icons'); + this.icons.innerHTML = iconTemplate; + this.initVariable(); + this.initOptions(options); + } + + initVariable() { + this.el = document.createElement('div'); + this.el.classList.add('shk'); + this.el.innerHTML = playerTemplate; + this.playBtn = this.el.querySelector('.shk_cover .shk_btn'); + this.downloadBtn = this.el.querySelector('.shk_btn_download'); + this.fwdBtn = this.el.querySelector('.shk_btn_forward'); + this.bwdBtn = this.el.querySelector('.shk_btn_backward'); + this.speedBtn = this.el.querySelector('.shk_btn_speed'); + this.muteBtn = this.el.querySelector('.shk_btn_volume'); + this.artist = this.el.querySelector('.shk_subtitle'); + this.texts = this.el.querySelector('.shk_text'); + this.title = this.el.querySelector('.shk_title'); + this.subtitle = this.el.querySelector('.shk_subtitle'); + this.currentTime = this.el.querySelector('.shk_time_now'); + this.duration = this.el.querySelector('.shk_time_duration'); + this.bar = this.el.querySelector('.shk_bar'); + this.barWrap = this.el.querySelector('.shk_bar-wrap'); + this.audioPlayed = this.el.querySelector('.shk_bar_played'); + this.audioLoaded = this.el.querySelector('.shk_bar_loaded'); + this.handle = this.el.querySelector('.bar-handle'); + this.cover = this.el.querySelector('.shk_img'); + } + + initOptions(options) { + this.transitionSpeed = options.transitionSpeed; + this.el.style = `--theme-color: ${options.themeColor}`; + this.el.style.boxShadow = `0px 0px 14px 6px ${options.themeColor}20`; this.audioPlayed.style.color = options.themeColor + '70'; - if (options.download && options.audio && options.audio.src) { - this.downloadBtn.href= options.audio.src; + options.autoPlay ? this.el.classList.add('Play') : this.el.classList.add('Pause'); + if (options.download && options.audio && options.audio.src) { + this.downloadBtn.href = options.audio.src; } else { this.downloadBtn.remove(); } + if (options.fixed.type !== 'static') { + options.fixed.type === 'fixed' ? this.el.classList.add('Fixed') : this.el.classList.add('Auto'); + if (options.fixed.position === 'top') { + this.el.classList.add('Top'); + } + } + if (options.muted) { + this.el.classList.add('Mute'); + } if (options.audio) { this.update(options.audio); } @@ -124,9 +168,42 @@ class Template { update(audio) { this.cover.style.backgroundImage = `url(${audio.cover})`; this.title.innerHTML = audio.title; + if (this.mounted) { + this.textScroll(); + } this.artist.innerHTML = audio.artist; this.currentTime.innerHTML = '00:00'; this.duration.innerHTML = audio.duration ? secondToTime(audio.duration) : '00:00'; + this.downloadBtn.href= audio.src; + } + + textScroll() { + if (carouselInterval) { + clearInterval(carouselInterval); + clearTimeout(carouselTimeout); + } + const titleOverflow = this.title.offsetWidth - this.texts.offsetWidth; + if (titleOverflow > 0) { + [carouselTimeout, carouselInterval] = carousel(this.title, titleOverflow, this.transitionSpeed); + } else { + this.title.style.transform = 'none'; + this.title.style.transitionDuration = '0s'; + } + } + + mount(container) { + container.innerHTML = ''; + container.append(this.el); + container.append(this.icons); + this.mounted = true; + this.textScroll(); + } + + destroy() { + if (clearInterval) { + clearInterval(carouselInterval); + clearTimeout(carouselTimeout); + } } } @@ -144,7 +221,7 @@ class Bar { } } -let carouselInterval, pressSpace; +let pressSpace; const isMobile = /mobile/i.test(window.navigator.userAgent); const dragStart = isMobile ? 'touchstart' : 'mousedown'; const dragMove = isMobile ? 'touchmove' : 'mousemove'; @@ -152,19 +229,16 @@ const dragEnd = isMobile ? 'touchend' : 'mouseup'; class Player { constructor(options) { - this.el = document.createElement('div'); - this.el.classList.add('shk'); - this.options = handleOptions(options); this.inited = false; + this.dragging = false; + this.options = handleOptions(options); this.muted = this.options.muted; this.initUI(); this.initKeyEvents(); - this.dragging = false; this.currentSpeed = 1; this.currentTime = 0; this.initAudio(); - this.mount(this.options.container); - this.afterMount(); + this.template.mount(this.options.container); } get duration() { @@ -176,30 +250,14 @@ class Player { } initUI() { - this.el.innerHTML = playerElement; - this.el.style = `--theme-color: ${this.options.themeColor}`; - this.el.style.boxShadow = `0px 0px 14px 6px ${this.options.themeColor}20`; - this.template = new Template(this.el, this.options); + this.template = new Template(this.options); + this.el = this.template.el; this.bar = new Bar(this.template); - this.initOptions(); - this.initButtons(); - this.initBar(); + this.initButtonEvents(); + this.initBarEvents(); } - initOptions() { - if (this.options.fixed.type !== 'static' ) { - this.options.fixed.type === 'fixed' ? this.el.classList.add('Fixed') : this.el.classList.add('Auto'); - if (this.options.fixed.position === 'top') { - this.el.classList.add('Top'); - } - } - if (this.options.muted) { - this.el.classList.add('Mute'); - } - this.options.autoPlay ? this.el.classList.add('Play') : this.el.classList.add('Pause'); - } - - initButtons() { + initButtonEvents() { this.template.playBtn.addEventListener('click', () => { this.toggle(); }); @@ -229,14 +287,13 @@ class Player { }); } - initBar() { + initBarEvents() { const dragStartHandler = () => { this.el.classList.add('Seeking'); this.dragging = true; document.addEventListener(dragMove, dragMoveHandler); document.addEventListener(dragEnd, dragEndHandler); }; - const dragMoveHandler = (e) => { let percentage = ((e.clientX || e.changedTouches[0].clientX) - this.template.barWrap.getBoundingClientRect().left) / this.template.barWrap.clientWidth; percentage = Math.min(percentage, 1); @@ -245,15 +302,13 @@ class Player { this.currentTime = percentage * this.duration; this.template.currentTime.innerHTML = secondToTime(this.currentTime); }; - - const dragEndHandler = (e) => { + const dragEndHandler = () => { this.dragging = false; this.el.classList.remove('Seeking'); this.seek(this.currentTime); document.removeEventListener(dragMove, dragMoveHandler); document.removeEventListener(dragEnd, dragEndHandler); }; - const instantSeek = (e) => { if (this.dragging) return dragMoveHandler(e); @@ -401,33 +456,30 @@ class Player { updateAudio(src) { this.audio.src = src; - this.audio.autoplay = false; this.audio.preload = this.options.preload; - this.audio.autoplay = this.options.autoPlay; this.audio.muted = this.muted; + if (this.options.autoplay && this.muted) { + this.audio.autoplay = this.options.autoPlay; + } this.audio.currentTime = this.currentTime; this.audio.playbackRate = this.currentSpeed; } - mount(container) { - container.append(this.el); - } - - afterMount() { - const titleOverflow = this.template.title.offsetWidth - this.template.texts.offsetWidth; - if (titleOverflow > 0) { - carouselInterval = carousel(this.template.title, -titleOverflow, this.options.transitionDuration); - } - } - - destroy() { + destroyAudio() { this.audio.pause(); this.audio.src = ''; this.audio.load(); this.audio = null; - clearInterval(carouselInterval); + } + + destroy() { + this.destroyAudio(); + this.template.destroy(); + this.container.innerHTML = ''; document.removeEventListener('keyup', pressSpace); } } +console.log(`%c🍊%c Shikwasa Podcast Player v1.0.6 %c https://jessuni.github.io/shikwasa/`,'background-color:#00869B40;padding:4px;','background:#00869B80;color:#fff;padding:4px 0','padding: 2px 0;'); + module.exports = Player; diff --git a/src/main/resources/static/shikwasa/shikwasa.min.css b/src/main/resources/static/shikwasa/shikwasa.min.css index 78954ab..acb3951 100644 --- a/src/main/resources/static/shikwasa/shikwasa.min.css +++ b/src/main/resources/static/shikwasa/shikwasa.min.css @@ -1 +1 @@ -@keyframes rotate{to{transform:rotate(1turn)}}@-webkit-keyframes rotate{to{-webkit-transform:rotate(1turn)}}@-moz-keyframes rotate{to{transform:rotate(1turn)}}.shk{position:inherit;height:120px;box-sizing:border-box;display:flex;flex-flow:row nowrap;border:none;box-shadow:0 0 14px 6px hsla(0,0%,88.6%,.5);cursor:auto;font:400 18px/1.42 Pingfang SC,Hiragano,Helvetica Neue,sans-serif}.shk.Fixed{position:fixed;bottom:0;left:0;margin:0;width:100%}.shk.Fixed.Top{top:0;bottom:auto}.shk.Seeking{cursor:grabbing;cursor:-moz-grabbing;cursor:-webkit-grabbing}.shk_cover{width:120px;flex-shrink:0}.shk_cover,.shk_main{position:relative;height:100%}.shk_main{box-sizing:border-box;flex-grow:1;padding:14px 30px 10px;border:none;border-left:5px solid var(--theme-color);width:calc(100% - 120px);background-color:#fff}.shk_img{background-color:var(--theme-color);background-size:cover;background-repeat:no-repeat;height:100%;width:100%}.shk_btn{appearance:none;-webkit-appearance:none;-moz-appearance:none;background:transparent;border:none;outline:none;padding:0;cursor:pointer}.shk_cover .shk_btn{position:absolute;top:0;left:0;width:100%;height:100%;opacity:.8}.shk_cover .shk_btn:focus,.shk_cover .shk_btn:hover{opacity:1;transition:all 1s ease}.shk_cover .shk_btn svg{box-sizing:border-box}.shk_btn_play{width:100px;height:100px}.shk_btn_pause{position:absolute;bottom:10px;right:10px;width:24px;height:24px}.shk_btn_pause circle{stroke-width:6;r:38}.shk.Pause .shk_btn_play,.shk.Play .shk_btn_pause{opacity:1;visibility:visible;transition:opacity .05s ease-in .01s,visibility .01s}.shk.Pause .shk_btn_pause,.shk.Play .shk_btn_play{opacity:0;visibility:hidden;transition:opacity .01s ease-in,visibility .01s .01s}.shk_text{overflow:hidden;width:100%;color:var(--theme-color)}.shk_controls,.shk_text,.shk_time{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.shk_subtitle{font-weight:500;max-width:calc(100% - 164px);vertical-align:middle;overflow:hidden;text-overflow:clip}.shk_subtitle,.shk_title{display:inline-block;white-space:nowrap}.shk_title{font-weight:300;margin-top:2px;font-size:24px;transition:transform 0s ease-in-out}.shk_controls{position:absolute;top:8px;right:20px;z-index:1}.shk_controls .shk_btn{display:inline-block;vertical-align:middle;width:36px;height:36px;color:var(--theme-color);font-size:13px;opacity:1;transform:scale(1)}.shk_controls .shk_btn:hover{opacity:.8}.shk_main .shk_btn svg{width:16px;height:16px;padding:10px;fill:var(--theme-color);vertical-align:middle}.shk_btn.shk_btn_download svg{fill:none;stroke:var(--theme-color)}.shk_btn_backward svg,.shk_btn_forward svg{width:18px;height:18px;padding:9px}.shk.Mute svg.shk_btn_mute,svg.shk_btn_unmute{display:inline-block}.shk.Mute svg.shk_btn_unmute,svg.shk_btn_mute{display:none}.shk_bar-wrap{height:18px;padding:1px 0;position:relative;cursor:pointer}.shk_bar{position:relative;width:100%;height:3px;margin-top:7px;box-sizing:border-box;background:#e7e7e7;z-index:0}.shk_bar_loaded,.shk_bar_played{width:0;position:absolute;left:0;top:0;bottom:0}.shk_bar_loaded{background:var(--theme-color);filter:opacity(30%);z-index:1}.shk_bar_played{z-index:2}.bar-handle,.shk_bar_played{background:var(--theme-color)}.bar-handle{position:absolute;top:0;right:0;margin-top:-6px;margin-right:-8px;height:16px;width:8px;cursor:move;cursor:grab;cursor:-moz-grab;cursor:-webkit-grab}.bar-handle:active{cursor:grabbing;cursor:-moz-grabbing;cursor:-webkit-grabbing}.shk_bottom{position:absolute;right:30px;bottom:10px;font-size:0;font-weight:400;color:#555}.shk_bottom span{vertical-align:middle}.shk_loader{display:none;color:var(--theme-color)}.shk.Loading .shk_loader{display:inline-block}.shk_loader svg{width:12px;height:12px;animation:rotate 1.4s linear infinite;-webkit-animation:rotate 1.4s linear infinite;-moz-animation:rotate 1.4s linear infinite;position:relative}.shk_visuallyhidden:not(:focus):not(:active){position:absolute;width:1px;height:1px;margin:-1px;border:0;padding:0;white-space:nowrap;clip-path:inset(100%);clip:rect(0 0 0 0);overflow:hidden}.shk_time{margin-left:4px;display:inline-block}.shk_time span{font-size:12px}.shk_time_duration:before{content:"/";margin:0 4px}@media (max-width:768px){.shk.Auto{position:fixed;bottom:0;left:0;margin:0;width:100%}.shk.Auto.Top{top:0;bottom:auto}.shk{height:60px}.shk_cover{width:60px}.shk_cover .shk_btn svg{width:100%;height:100%;padding:10px}.shk_btn_pause{bottom:0;right:0}.shk_btn_pause circle{stroke-width:2;r:40}.shk_main{border-left:none;padding:5px 10px}.shk_subtitle{display:none}.shk_title{font-size:1rem;margin:0}.shk_controls{bottom:0;left:0;top:auto;right:auto}.shk_controls .shk_btn:hover{opacity:1}.shk_bar-wrap{display:none}.shk_bottom{right:10px;bottom:10px}} \ No newline at end of file +@-webkit-keyframes rotate{to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes rotate{to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.shk{position:inherit;height:120px;box-sizing:border-box;display:flex;flex-flow:row nowrap;border:none;box-shadow:0 0 14px 6px hsla(0,0%,88.6%,.5);cursor:auto;font:400 18px/1.42 Pingfang SC,Hiragano,Helvetica Neue,sans-serif}.shk.Fixed{position:fixed;bottom:0;left:0;margin:0;width:100%}.shk.Fixed.Top{top:0;bottom:auto}.shk.Seeking{cursor:-webkit-grabbing;cursor:grabbing}.shk_cover{width:120px;flex-shrink:0}.shk_cover,.shk_main{position:relative;height:100%}.shk_main{box-sizing:border-box;flex-grow:1;padding:14px 30px 10px;border:none;width:calc(100% - 120px);background-color:#fff}.shk_img{background-color:var(--theme-color);background-size:cover;background-repeat:no-repeat;height:100%;width:100%}.shk_btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:none;outline:none;padding:0;cursor:pointer}.shk_cover .shk_btn{position:absolute;top:0;left:0;width:100%;height:100%;opacity:.8}.shk_cover .shk_btn:focus,.shk_cover .shk_btn:hover{opacity:1;transition:all 1s ease}.shk_cover .shk_btn svg{box-sizing:border-box}.shk_btn_play{width:100px;height:100px}.shk_btn_pause{position:absolute;bottom:10px;right:10px;width:24px;height:24px}.shk_btn_pause circle{stroke-width:6;r:38}.shk.Pause .shk_btn_play,.shk.Play .shk_btn_pause{opacity:1;visibility:visible;transition:opacity .05s ease-in .01s,visibility .01s}.shk.Pause .shk_btn_pause,.shk.Play .shk_btn_play{opacity:0;visibility:hidden;transition:opacity .01s ease-in,visibility .01s .01s}.shk_text{overflow:hidden;width:100%;color:var(--theme-color)}.shk_controls,.shk_text,.shk_time{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.shk_subtitle{font-weight:500;max-width:calc(100% - 164px);vertical-align:middle;overflow:hidden;text-overflow:clip}.shk_subtitle,.shk_title{display:inline-block;white-space:nowrap}.shk_title{font-weight:300;margin-top:2px;font-size:24px;transition:-webkit-transform 0s ease-in-out;transition:transform 0s ease-in-out;transition:transform 0s ease-in-out,-webkit-transform 0s ease-in-out}.shk_controls{position:absolute;top:8px;right:20px;z-index:1}.shk_controls .shk_btn{display:inline-block;vertical-align:middle;width:36px;height:36px;color:var(--theme-color);font-size:13px;opacity:1;-webkit-transform:scale(1);transform:scale(1)}.shk_controls .shk_btn:hover{opacity:.8}.shk_main .shk_btn svg{width:16px;height:16px;padding:10px;fill:var(--theme-color);vertical-align:middle}.shk_btn.shk_btn_download svg{fill:none;stroke:var(--theme-color)}.shk_btn_backward svg,.shk_btn_forward svg{width:18px;height:18px;padding:9px}.shk.Mute svg.shk_btn_mute,svg.shk_btn_unmute{display:inline-block}.shk.Mute svg.shk_btn_unmute,svg.shk_btn_mute{display:none}.shk_bar-wrap{height:18px;padding:1px 0;position:relative;cursor:pointer}.shk_bar{position:relative;width:100%;height:3px;margin-top:7px;box-sizing:border-box;background:#e7e7e7;z-index:0}.shk_bar_loaded,.shk_bar_played{width:0;position:absolute;left:0;top:0;bottom:0}.shk_bar_loaded{background:var(--theme-color);-webkit-filter:opacity(30%);filter:opacity(30%);z-index:1}.shk_bar_played{z-index:2}.bar-handle,.shk_bar_played{background:var(--theme-color)}.bar-handle{position:absolute;top:0;right:0;margin-top:-6px;margin-right:-8px;height:16px;width:8px;cursor:move;cursor:-webkit-grab;cursor:grab}.bar-handle:active{cursor:-webkit-grabbing;cursor:grabbing}.shk_bottom{position:absolute;right:30px;bottom:10px;font-size:0;font-weight:400;color:#555}.shk_bottom span{vertical-align:middle}.shk_loader{display:none;color:var(--theme-color)}.shk.Loading .shk_loader{display:inline-block}.shk_loader svg{width:12px;height:12px;-webkit-animation:rotate 1.4s linear infinite;animation:rotate 1.4s linear infinite;position:relative}.shk_visuallyhidden:not(:focus):not(:active){position:absolute;width:1px;height:1px;margin:-1px;border:0;padding:0;white-space:nowrap;-webkit-clip-path:inset(100%);clip-path:inset(100%);clip:rect(0 0 0 0);overflow:hidden}.shk_time{margin-left:4px;display:inline-block}.shk_time span{font-size:12px}.shk_time_duration:before{content:"/";margin:0 4px}.shk_icons{display:none}@media (max-width:768px){.shk.Auto{position:fixed;bottom:0;left:0;margin:0;width:100%}.shk.Auto.Top{top:0;bottom:auto}.shk{height:60px}.shk_cover{width:60px}.shk_cover .shk_btn svg{width:100%;height:100%;padding:10px}.shk_btn_pause{bottom:0;right:0}.shk_btn_pause circle{stroke-width:2;r:40}.shk_main{border-left:none;padding:5px 10px}.shk_subtitle{display:none}.shk_title{font-size:1rem;margin:0}.shk_controls{bottom:0;left:0;top:auto;right:auto}.shk_controls .shk_btn:hover{opacity:1}.shk_bar-wrap{display:none}.shk_bottom{right:10px;bottom:10px}} \ No newline at end of file diff --git a/src/main/resources/static/shikwasa/shikwasa.min.js b/src/main/resources/static/shikwasa/shikwasa.min.js index 0db6f55..f1ff5a7 100644 --- a/src/main/resources/static/shikwasa/shikwasa.min.js +++ b/src/main/resources/static/shikwasa/shikwasa.min.js @@ -1 +1 @@ -var Shikwasa=function(){'use strict';var f=Math.max,g=Math.min,h=Math.floor;function a(a){var b=Math.round;a=b(a);let c=h(a/3600),d=h((a-3600*c)/60),e=h(a-3600*c-60*d);return d=10>d?"0"+d:d,e=10>e?"0"+e:e,0===c?(c=10>c?"0"+c:c,`${d}:${e}`):`${c}:${d}:${e}`}function b(a){const b=parseFloat(a).toFixed(2);return"0"===b.slice(-1)?b.slice(0,-1):b}function c(a,b=0,c=5e3,d=2e3){function e(){a.style.transitionDuration=`${c/1e3}s`,a.style.transform=`translateX(${b}px)`,setTimeout(()=>{a.style.transform="translateX(0px)"},f)}const f=c+d;return e(),setInterval(()=>e(),2*f)}function d(a){a.container=a.container||i.container,a.fixed=a.fixed||i.fixed,a.download="boolean"==typeof a.download?a.download:i.download;const b=["auto","static","fixed"].filter(b=>b===a.fixed.type)[0];return b||(a.fixed.type=i.fixed.type),a.transitionDuration=+a.transitionDuration||i.transitionDuration,a.themeColor=a.themeColor||i.themeColor,a.autoPlay=a.autoPlay||i.autoPlay,a.muted=a.muted||i.muted,a.preload=a.preload||i.preload,a.speedOptions=a.speedOptions||i.speedOptions,Array.isArray(a.speedOptions)||(a.speedOptions=[a.speedOptions]),a.speedOptions.includes(1)||a.speedOptions.push(1),a.speedOptions=a.speedOptions.map(a=>parseFloat(a)).filter(a=>!isNaN(a)),1c-a),a.audio?(a.audio.title=a.audio.title||"Unknown Title",a.audio.artist=a.audio.artist||"Unknown Artist",a.audio.cover=a.audio.cover||null,a.audio.duration=a.audio.duration||0):console.error("audio is not specified"),a}const i={container:document.querySelector("body"),fixed:{type:"auto",position:"bottom"},download:!0,transitionDuration:5e3,themeColor:"#00869B",autoPlay:!1,muted:!1,preload:"metadata",speedOptions:[.5,.75,1.25,1.5],audio:null};class j{constructor(a,b){a&&(this.playBtn=a.querySelector(".shk_cover .shk_btn"),this.downloadBtn=a.querySelector(".shk_btn_download"),this.fwdBtn=a.querySelector(".shk_btn_forward"),this.bwdBtn=a.querySelector(".shk_btn_backward"),this.speedBtn=a.querySelector(".shk_btn_speed"),this.muteBtn=a.querySelector(".shk_btn_volume"),this.artist=a.querySelector(".shk_subtitle"),this.texts=a.querySelector(".shk_text"),this.title=a.querySelector(".shk_title"),this.subtitle=a.querySelector(".shk_subtitle"),this.currentTime=a.querySelector(".shk_time_now"),this.duration=a.querySelector(".shk_time_duration"),this.bar=a.querySelector(".shk_bar"),this.barWrap=a.querySelector(".shk_bar-wrap"),this.audioPlayed=a.querySelector(".shk_bar_played"),this.audioLoaded=a.querySelector(".shk_bar_loaded"),this.handle=a.querySelector(".bar-handle"),this.cover=a.querySelector(".shk_img"),this.audioPlayed.style.color=b.themeColor+"70",b.download&&b.audio&&b.audio.src?this.downloadBtn.href=b.audio.src:this.downloadBtn.remove(),b.audio&&this.update(b.audio))}update(b){this.cover.style.backgroundImage=`url(${b.cover})`,this.title.innerHTML=b.title,this.artist.innerHTML=b.artist,this.currentTime.innerHTML="00:00",this.duration.innerHTML=b.duration?a(b.duration):"00:00"}}class k{constructor(a){this.elements={},this.elements.audioPlayed=a.audioPlayed,this.elements.audioLoaded=a.audioLoaded}set(a,b){b=g(b,1),b=f(b,0),this.elements[a].style.width=100*b+"%"}}let l,m;const n=/mobile/i.test(window.navigator.userAgent),o=n?"touchstart":"mousedown",p=n?"touchmove":"mousemove",q=n?"touchend":"mouseup";class r{constructor(a){this.el=document.createElement("div"),this.el.classList.add("shk"),this.options=d(a),this.inited=!1,this.muted=this.options.muted,this.initUI(),this.initKeyEvents(),this.dragging=!1,this.currentSpeed=1,this.currentTime=0,this.initAudio(),this.mount(this.options.container),this.afterMount()}get duration(){return this.audio?isNaN(this.audio.duration)?0:this.audio.duration:this.options.audio.duration}initUI(){this.el.innerHTML="
loading --:-- --:--
",this.el.style=`--theme-color: ${this.options.themeColor}`,this.el.style.boxShadow=`0px 0px 14px 6px ${this.options.themeColor}20`,this.template=new j(this.el,this.options),this.bar=new k(this.template),this.initOptions(),this.initButtons(),this.initBar()}initOptions(){"static"!==this.options.fixed.type&&("fixed"===this.options.fixed.type?this.el.classList.add("Fixed"):this.el.classList.add("Auto"),"top"===this.options.fixed.position&&this.el.classList.add("Top")),this.options.muted&&this.el.classList.add("Mute"),this.options.autoPlay?this.el.classList.add("Play"):this.el.classList.add("Pause")}initButtons(){this.template.playBtn.addEventListener("click",()=>{this.toggle()}),this.template.muteBtn.addEventListener("click",()=>{this.muted=!this.muted,this.el.classList.toggle("Mute"),this.audio&&(this.audio.muted=this.muted)}),this.template.fwdBtn.addEventListener("click",()=>{const a=g(this.duration,this.currentTime+10);this.seek(a)}),this.template.bwdBtn.addEventListener("click",()=>{const a=f(0,this.currentTime-10);this.seek(a)}),this.template.speedBtn.addEventListener("click",()=>{const a=this.options.speedOptions.indexOf(this.currentSpeed),c=this.options.speedOptions;this.currentSpeed=a+1>=c.length?c[0]:c[a+1],this.template.speedBtn.innerHTML=b(this.currentSpeed)+"x",this.audio&&(this.audio.playbackRate=this.currentSpeed)})}initBar(){const b=b=>{let c=((b.clientX||b.changedTouches[0].clientX)-this.template.barWrap.getBoundingClientRect().left)/this.template.barWrap.clientWidth;c=g(c,1),c=f(0,c),this.bar.set("audioPlayed",c),this.currentTime=c*this.duration,this.template.currentTime.innerHTML=a(this.currentTime)},c=()=>{this.dragging=!1,this.el.classList.remove("Seeking"),this.seek(this.currentTime),document.removeEventListener(p,b),document.removeEventListener(q,c)};this.template.barWrap.addEventListener(q,a=>{this.dragging||(b(a),this.seek(this.currentTime))}),this.template.handle.addEventListener(o,()=>{this.el.classList.add("Seeking"),this.dragging=!0,document.addEventListener(p,b),document.addEventListener(q,c)})}initKeyEvents(){m=a=>{32===a.keyCode&&this.toggle()},document.addEventListener("keyup",m)}initAudio(){this.options.audio.src&&(this.audio=new Audio,this.initLoadingEvents(),this.initAudioEvents(),"none"!==this.options.preload&&(this.updateAudio(this.options.audio.src),this.inited=!0))}initAudioEvents(){this.audio.addEventListener("play",()=>{this.el.classList.contains("Pause")&&this.setUIPlaying()}),this.audio.addEventListener("pause",()=>{this.el.classList.contains("Pause")&&this.setUIPaused()}),this.audio.addEventListener("ended",()=>{this.setUIPaused(),this.seek(0)}),this.audio.addEventListener("durationchange",()=>{1!==this.duration&&(this.template.duration.innerHTML=a(this.duration))}),this.audio.addEventListener("progress",()=>{if(this.audio.buffered.length){const a=this.audio.buffered.length?this.audio.buffered.end(this.audio.buffered.length-1)/this.duration:0;this.bar.set("audioLoaded",a)}}),this.audio.addEventListener("timeupdate",()=>{if(!this.dragging&&h(this.currentTime)!==h(this.audio.currentTime)){this.template.currentTime.innerHTML=a(this.audio.currentTime),this.currentTime=+this.audio.currentTime;const b=this.audio.currentTime?this.audio.currentTime/this.duration:0;this.bar.set("audioPlayed",b)}})}initLoadingEvents(){const a=()=>{this.el.classList.contains("Loading")&&this.el.classList.remove("Loading")};this.audio.addEventListener("canplay",()=>{a()}),this.audio.addEventListener("canplaythrough",()=>{a()}),this.audio.addEventListener("waiting",()=>{this.el.classList.contains("Loading")||this.el.classList.add("Loading")})}setUIPlaying(){this.el.classList.add("Play"),this.el.classList.remove("Pause")}setUIPaused(){this.el.classList.add("Pause"),this.el.classList.remove("Play"),this.el.classList.remove("Loading")}play(a){if(this.inited||(this.audio.src=this.options.audio.src,this.inited=!0),a&&a.src&&(this.template.update(a),this.currentTime=0,this.updateAudio(a.src)),!!this.audio.paused){this.setUIPlaying();const a=this.audio.play();a instanceof Promise&&a.catch(a=>{("NotAllowedError"===a.name||"NotSupportedError"===a.name)&&this.pause()})}}pause(){this.audio.paused||(this.setUIPaused(),this.audio.pause())}toggle(){this.inited||(this.audio.src=this.options.audio.src,this.inited=!0),this.audio.paused?this.play():this.pause()}seek(b){b=g(b,this.duration),b=f(b,0),this.template.currentTime.innerHTML=a(b),this.audio?this.audio.currentTime=b:this.currentTime=b}updateAudio(a){this.audio.src=a,this.audio.autoplay=!1,this.audio.preload=this.options.preload,this.audio.autoplay=this.options.autoPlay,this.audio.muted=this.muted,this.audio.currentTime=this.currentTime,this.audio.playbackRate=this.currentSpeed}mount(a){a.append(this.el)}afterMount(){const a=this.template.title.offsetWidth-this.template.texts.offsetWidth;0d?"0"+d:d,e=10>e?"0"+e:e,0===c?(c=10>c?"0"+c:c,`${d}:${e}`):`${c}:${d}:${e}`}function b(a){const b=parseFloat(a).toFixed(2);return"0"===b.slice(-1)?b.slice(0,-1):b}function c(a,b=0,c=3,d=2e3){function e(){a.style.transitionDuration=`${h/1e3}s`,a.style.transform=`translateX(-${b}px)`,f=setTimeout(()=>{a.style.transform="translateX(0px)"},i)}let f,g;const h=100*(b/c),i=h+d;return e(),g=setInterval(()=>e(),2*i),[f,g]}function d(a){a.container=a.container||i.container,a.fixed=a.fixed||i.fixed,a.download="boolean"==typeof a.download?a.download:i.download;const b=["auto","static","fixed"].filter(b=>b===a.fixed.type)[0];if(b||(a.fixed.type=i.fixed.type),a.transitionSpeed){let b=parseInt(a.transitionSpeed);isNaN(b)?a.transitionSpeed=i.transitionSpeed:(b=g(b,1),b=f(b,5),a.transitionSpeed=b)}else a.transitionSpeed=i.transitionSpeed;return a.themeColor=a.themeColor||i.themeColor,a.autoPlay=a.autoPlay||i.autoPlay,a.muted=a.muted||i.muted,a.preload=a.preload||i.preload,a.speedOptions=a.speedOptions||i.speedOptions,Array.isArray(a.speedOptions)||(a.speedOptions=[a.speedOptions]),a.speedOptions.includes(1)||a.speedOptions.push(1),a.speedOptions=a.speedOptions.map(a=>parseFloat(a)).filter(a=>!isNaN(a)),1c-a),a.audio?(a.audio.title=a.audio.title||"Unknown Title",a.audio.artist=a.audio.artist||"Unknown Artist",a.audio.cover=a.audio.cover||null,a.audio.duration=a.audio.duration||0):console.error("audio is not specified"),a}const i={container:document.querySelector("body"),fixed:{type:"auto",position:"bottom"},download:!0,transitionSpeed:3,themeColor:"#00869B",autoPlay:!1,muted:!1,preload:"metadata",speedOptions:[.5,.75,1.25,1.5],audio:null};let j,k;class l{constructor(a){this.mounted=!1,this.icons=document.createElement("div"),this.icons.classList.add("shk_icons"),this.icons.innerHTML=" ",this.initVariable(),this.initOptions(a)}initVariable(){this.el=document.createElement("div"),this.el.classList.add("shk"),this.el.innerHTML="
loading --:-- --:--
",this.playBtn=this.el.querySelector(".shk_cover .shk_btn"),this.downloadBtn=this.el.querySelector(".shk_btn_download"),this.fwdBtn=this.el.querySelector(".shk_btn_forward"),this.bwdBtn=this.el.querySelector(".shk_btn_backward"),this.speedBtn=this.el.querySelector(".shk_btn_speed"),this.muteBtn=this.el.querySelector(".shk_btn_volume"),this.artist=this.el.querySelector(".shk_subtitle"),this.texts=this.el.querySelector(".shk_text"),this.title=this.el.querySelector(".shk_title"),this.subtitle=this.el.querySelector(".shk_subtitle"),this.currentTime=this.el.querySelector(".shk_time_now"),this.duration=this.el.querySelector(".shk_time_duration"),this.bar=this.el.querySelector(".shk_bar"),this.barWrap=this.el.querySelector(".shk_bar-wrap"),this.audioPlayed=this.el.querySelector(".shk_bar_played"),this.audioLoaded=this.el.querySelector(".shk_bar_loaded"),this.handle=this.el.querySelector(".bar-handle"),this.cover=this.el.querySelector(".shk_img")}initOptions(a){this.transitionSpeed=a.transitionSpeed,this.el.style=`--theme-color: ${a.themeColor}`,this.el.style.boxShadow=`0px 0px 14px 6px ${a.themeColor}20`,this.audioPlayed.style.color=a.themeColor+"70",a.autoPlay?this.el.classList.add("Play"):this.el.classList.add("Pause"),a.download&&a.audio&&a.audio.src?this.downloadBtn.href=a.audio.src:this.downloadBtn.remove(),"static"!==a.fixed.type&&("fixed"===a.fixed.type?this.el.classList.add("Fixed"):this.el.classList.add("Auto"),"top"===a.fixed.position&&this.el.classList.add("Top")),a.muted&&this.el.classList.add("Mute"),a.audio&&this.update(a.audio)}update(b){this.cover.style.backgroundImage=`url(${b.cover})`,this.title.innerHTML=b.title,this.mounted&&this.textScroll(),this.artist.innerHTML=b.artist,this.currentTime.innerHTML="00:00",this.duration.innerHTML=b.duration?a(b.duration):"00:00",this.downloadBtn.href=b.src}textScroll(){k&&(clearInterval(k),clearTimeout(j));const a=this.title.offsetWidth-this.texts.offsetWidth;0{this.toggle()}),this.template.muteBtn.addEventListener("click",()=>{this.muted=!this.muted,this.el.classList.toggle("Mute"),this.audio&&(this.audio.muted=this.muted)}),this.template.fwdBtn.addEventListener("click",()=>{const a=f(this.duration,this.currentTime+10);this.seek(a)}),this.template.bwdBtn.addEventListener("click",()=>{const a=g(0,this.currentTime-10);this.seek(a)}),this.template.speedBtn.addEventListener("click",()=>{const a=this.options.speedOptions.indexOf(this.currentSpeed),c=this.options.speedOptions;this.currentSpeed=a+1>=c.length?c[0]:c[a+1],this.template.speedBtn.innerHTML=b(this.currentSpeed)+"x",this.audio&&(this.audio.playbackRate=this.currentSpeed)})}initBarEvents(){const b=b=>{let c=((b.clientX||b.changedTouches[0].clientX)-this.template.barWrap.getBoundingClientRect().left)/this.template.barWrap.clientWidth;c=f(c,1),c=g(0,c),this.bar.set("audioPlayed",c),this.currentTime=c*this.duration,this.template.currentTime.innerHTML=a(this.currentTime)},c=()=>{this.dragging=!1,this.el.classList.remove("Seeking"),this.seek(this.currentTime),document.removeEventListener(q,b),document.removeEventListener(r,c)};this.template.barWrap.addEventListener(r,a=>{this.dragging||(b(a),this.seek(this.currentTime))}),this.template.handle.addEventListener(p,()=>{this.el.classList.add("Seeking"),this.dragging=!0,document.addEventListener(q,b),document.addEventListener(r,c)})}initKeyEvents(){n=a=>{32===a.keyCode&&this.toggle()},document.addEventListener("keyup",n)}initAudio(){this.options.audio.src&&(this.audio=new Audio,this.initLoadingEvents(),this.initAudioEvents(),"none"!==this.options.preload&&(this.updateAudio(this.options.audio.src),this.inited=!0))}initAudioEvents(){this.audio.addEventListener("play",()=>{this.el.classList.contains("Pause")&&this.setUIPlaying()}),this.audio.addEventListener("pause",()=>{this.el.classList.contains("Pause")&&this.setUIPaused()}),this.audio.addEventListener("ended",()=>{this.setUIPaused(),this.seek(0)}),this.audio.addEventListener("durationchange",()=>{1!==this.duration&&(this.template.duration.innerHTML=a(this.duration))}),this.audio.addEventListener("progress",()=>{if(this.audio.buffered.length){const a=this.audio.buffered.length?this.audio.buffered.end(this.audio.buffered.length-1)/this.duration:0;this.bar.set("audioLoaded",a)}}),this.audio.addEventListener("timeupdate",()=>{if(!this.dragging&&h(this.currentTime)!==h(this.audio.currentTime)){this.template.currentTime.innerHTML=a(this.audio.currentTime),this.currentTime=+this.audio.currentTime;const b=this.audio.currentTime?this.audio.currentTime/this.duration:0;this.bar.set("audioPlayed",b)}})}initLoadingEvents(){const a=()=>{this.el.classList.contains("Loading")&&this.el.classList.remove("Loading")};this.audio.addEventListener("canplay",()=>{a()}),this.audio.addEventListener("canplaythrough",()=>{a()}),this.audio.addEventListener("waiting",()=>{this.el.classList.contains("Loading")||this.el.classList.add("Loading")})}setUIPlaying(){this.el.classList.add("Play"),this.el.classList.remove("Pause")}setUIPaused(){this.el.classList.add("Pause"),this.el.classList.remove("Play"),this.el.classList.remove("Loading")}play(a){if(this.inited||(this.audio.src=this.options.audio.src,this.inited=!0),a&&a.src&&(this.template.update(a),this.currentTime=0,this.updateAudio(a.src)),!!this.audio.paused){this.setUIPlaying();const a=this.audio.play();a instanceof Promise&&a.catch(a=>{("NotAllowedError"===a.name||"NotSupportedError"===a.name)&&this.pause()})}}pause(){this.audio.paused||(this.setUIPaused(),this.audio.pause())}toggle(){this.inited||(this.audio.src=this.options.audio.src,this.inited=!0),this.audio.paused?this.play():this.pause()}seek(b){b=f(b,this.duration),b=g(b,0),this.template.currentTime.innerHTML=a(b),this.audio?this.audio.currentTime=b:this.currentTime=b}updateAudio(a){this.audio.src=a,this.audio.preload=this.options.preload,this.audio.muted=this.muted,this.options.autoplay&&this.muted&&(this.audio.autoplay=this.options.autoPlay),this.audio.currentTime=this.currentTime,this.audio.playbackRate=this.currentSpeed}destroyAudio(){this.audio.pause(),this.audio.src="",this.audio.load(),this.audio=null}destroy(){this.destroyAudio(),this.template.destroy(),this.container.innerHTML="",document.removeEventListener("keyup",n)}}return console.log(`%c🍊%c Shikwasa Podcast Player v1.0.6 %c https://jessuni.github.io/shikwasa/`,"background-color:#00869B40;padding:4px;","background:#00869B80;color:#fff;padding:4px 0","padding: 2px 0;"),s}();