You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1059 lines
33 KiB
1059 lines
33 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>{{.title}} - PodGrab</title>
|
|
{{template "commoncss" .}}
|
|
|
|
<style>
|
|
/*
|
|
1. Base
|
|
*/
|
|
|
|
/*
|
|
2. Components
|
|
*/
|
|
div#amplitude-player {
|
|
background: #FFFFFF;
|
|
box-shadow: 0 2px 12px 8px rgba(0, 0, 0, 0.1);
|
|
margin: auto;
|
|
margin-top: 20px;
|
|
margin-bottom: 20px;
|
|
display: flex;
|
|
max-width: 900px; }
|
|
|
|
/* Small only */
|
|
@media screen and (max-width: 39.9375em) {
|
|
div#amplitude-player {
|
|
flex-direction: column; } }
|
|
/* Medium only */
|
|
@media screen and (min-width: 40em) and (max-width: 63.9375em) {
|
|
div#amplitude-player {
|
|
max-height: 715px; } }
|
|
/* Large and up */
|
|
@media screen and (min-width: 64em) {
|
|
div#amplitude-player {
|
|
max-height: 715px; } }
|
|
div#amplitude-left {
|
|
padding: 0px;
|
|
border-right: 1px solid #CFD8DC;
|
|
width: 50%;
|
|
display: flex;
|
|
flex-direction: column; }
|
|
div#amplitude-left img.album-art {
|
|
width: 100%; }
|
|
div#amplitude-left div#player-left-bottom {
|
|
flex: 1;
|
|
background-color:inherit;
|
|
padding: 20px 10px; }
|
|
div#amplitude-left div#player-left-bottom div#volume-container:after {
|
|
content: "";
|
|
display: table;
|
|
clear: both; }
|
|
|
|
/* Small only */
|
|
@media screen and (max-width: 39.9375em) {
|
|
div#amplitude-player div#amplitude-left {
|
|
width: 100%; }
|
|
div#amplitude-player div#amplitude-left img[amplitude-song-info="cover_art_url"] {
|
|
width: auto;
|
|
height: auto; } }
|
|
div#amplitude-right {
|
|
padding: 0px;
|
|
overflow-y: scroll;
|
|
width: 50%;
|
|
display: flex;
|
|
flex-direction: column; }
|
|
div#amplitude-right div.song {
|
|
cursor: pointer;
|
|
padding: 10px; }
|
|
div#amplitude-right div.song div.song-now-playing-icon-container {
|
|
float: left;
|
|
width: 20px;
|
|
background: inherit;
|
|
height: 20px;
|
|
margin-right: 10px; }
|
|
div#amplitude-right div.song div.song-now-playing-icon-container img.now-playing {
|
|
display: none;
|
|
margin-top: 15px; }
|
|
div#amplitude-right div.song div.play-button-container {
|
|
display: none;
|
|
background: url("/webassets/list-play-light.png") no-repeat;
|
|
width: 22px;
|
|
height: 22px;
|
|
margin-top: 10px; }
|
|
div#amplitude-right div.song div.play-button-container:hover {
|
|
background: url("/webassets/list-play-hover.png") no-repeat; }
|
|
div#amplitude-right div.song.amplitude-active-song-container div.song-now-playing-icon-container img.now-playing {
|
|
display: block;background-color: inherit; }
|
|
div#amplitude-right div.song.amplitude-active-song-container:hover div.play-button-container {
|
|
display: none; }
|
|
div#amplitude-right div.song div.song-meta-data {
|
|
float: left;
|
|
background: inherit;
|
|
width: calc( 100% - 110px ); }
|
|
div#amplitude-right div.song div.song-meta-data span.song-title {
|
|
|
|
font-size: 16px;
|
|
display: block;
|
|
font-weight: 300;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
background: inherit;
|
|
text-overflow: ellipsis; }
|
|
div#amplitude-right div.song div.song-meta-data span.song-date {
|
|
|
|
font-size: 12px;
|
|
display: block;
|
|
font-weight: 300;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
background: inherit;
|
|
text-overflow: ellipsis; }
|
|
div#amplitude-right div.song div.song-meta-data span.song-artist {
|
|
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
display: block;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
background: inherit;
|
|
text-overflow: ellipsis; }
|
|
div#amplitude-right div.song img.bandcamp-grey {
|
|
float: left;
|
|
display: block;
|
|
margin-top: 10px; }
|
|
div#amplitude-right div.song img.bandcamp-white {
|
|
float: left;
|
|
display: none;
|
|
margin-top: 10px; }
|
|
div#amplitude-right div.song span.song-duration {
|
|
float: left;
|
|
width: 55px;
|
|
text-align: center;
|
|
line-height: 45px;
|
|
color: #607D8B;
|
|
background: inherit;
|
|
font-size: 16px;
|
|
font-weight: 500; }
|
|
div#amplitude-right div.song:after {
|
|
content: "";
|
|
display: table;
|
|
clear: both; }
|
|
|
|
/* Small only */
|
|
@media screen and (max-width: 39.9375em) {
|
|
div#amplitude-player div#amplitude-right {
|
|
width: 100%; } }
|
|
div#progress-container {
|
|
width: 70%;
|
|
float: left;
|
|
position: relative;
|
|
height: 20px;
|
|
cursor: pointer;
|
|
/*
|
|
IE 11
|
|
*/ }
|
|
div#progress-container:hover input[type=range].amplitude-song-slider::-webkit-slider-thumb {
|
|
display: block; }
|
|
div#progress-container:hover input[type=range].amplitude-song-slider::-moz-range-thumb {
|
|
visibility: visible; }
|
|
div#progress-container progress#song-played-progress {
|
|
width: 100%;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 8px;
|
|
right: 0;
|
|
width: 100%;
|
|
z-index: 60;
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
appearance: none;
|
|
height: 4px;
|
|
border-radius: 5px;
|
|
background: transparent;
|
|
border: none;
|
|
/* Needed for Firefox */ }
|
|
@media all and (-ms-high-contrast: none) {
|
|
div#progress-container *::-ms-backdrop, div#progress-container progress#song-played-progress {
|
|
color: #00A0FF;
|
|
border: none;
|
|
background-color: #CFD8DC; } }
|
|
@supports (-ms-ime-align: auto) {
|
|
div#progress-container progress#song-played-progress {
|
|
color: #00A0FF;
|
|
border: none; } }
|
|
div#progress-container progress#song-played-progress[value]::-webkit-progress-bar {
|
|
background: none;
|
|
border-radius: 5px; }
|
|
div#progress-container progress#song-played-progress[value]::-webkit-progress-value {
|
|
background-color: #00A0FF;
|
|
border-radius: 5px; }
|
|
div#progress-container progress#song-played-progress::-moz-progress-bar {
|
|
background: none;
|
|
border-radius: 5px;
|
|
background-color: #00A0FF;
|
|
height: 5px;
|
|
margin-top: -2px; }
|
|
div#progress-container progress#song-buffered-progress {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 8px;
|
|
right: 0;
|
|
width: 100%;
|
|
z-index: 10;
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
appearance: none;
|
|
height: 4px;
|
|
border-radius: 5px;
|
|
background: transparent;
|
|
border: none;
|
|
background-color: #D7DEE3; }
|
|
div#progress-container progress#song-buffered-progress[value]::-webkit-progress-bar {
|
|
background-color: #CFD8DC;
|
|
border-radius: 5px; }
|
|
div#progress-container progress#song-buffered-progress[value]::-webkit-progress-value {
|
|
background-color: #78909C;
|
|
border-radius: 5px;
|
|
transition: width .1s ease; }
|
|
div#progress-container progress#song-buffered-progress::-moz-progress-bar {
|
|
background: none;
|
|
border-radius: 5px;
|
|
background-color: #78909C;
|
|
height: 5px;
|
|
margin-top: -2px; }
|
|
div#progress-container progress::-ms-fill {
|
|
border: none; }
|
|
@-moz-document url-prefix() {
|
|
div#progress-container progress#song-buffered-progress {
|
|
top: 9px;
|
|
border: none; } }
|
|
@media all and (-ms-high-contrast: none) {
|
|
div#progress-container *::-ms-backdrop, div#progress-container progress#song-buffered-progress {
|
|
color: #78909C;
|
|
border: none; } }
|
|
@supports (-ms-ime-align: auto) {
|
|
div#progress-container progress#song-buffered-progress {
|
|
color: #78909C;
|
|
border: none; } }
|
|
div#progress-container input[type=range] {
|
|
-webkit-appearance: none;
|
|
width: 100%;
|
|
margin: 7.5px 0;
|
|
position: absolute;
|
|
z-index: 9999;
|
|
top: -7px;
|
|
height: 20px;
|
|
cursor: pointer;
|
|
background-color: transparent; }
|
|
div#progress-container input[type=range]:focus {
|
|
outline: none; }
|
|
div#progress-container input[type=range]::-webkit-slider-runnable-track {
|
|
width: 100%;
|
|
height: 0px;
|
|
cursor: pointer;
|
|
box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
|
|
background: #0075a9;
|
|
border-radius: 0px;
|
|
border: 0px solid #010101; }
|
|
div#progress-container input[type=range]::-webkit-slider-thumb {
|
|
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
|
|
border: 1px solid #00a0ff;
|
|
height: 15px;
|
|
width: 15px;
|
|
border-radius: 16px;
|
|
background: #00a0ff;
|
|
cursor: pointer;
|
|
-webkit-appearance: none;
|
|
margin-top: -7.5px; }
|
|
div#progress-container input[type=range]:focus::-webkit-slider-runnable-track {
|
|
background: #00adfb; }
|
|
div#progress-container input[type=range]::-moz-range-track {
|
|
width: 100%;
|
|
height: 0px;
|
|
cursor: pointer;
|
|
box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
|
|
background: #0075a9;
|
|
border-radius: 0px;
|
|
border: 0px solid #010101; }
|
|
div#progress-container input[type=range]::-moz-range-thumb {
|
|
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
|
|
border: 1px solid #00a0ff;
|
|
height: 15px;
|
|
width: 15px;
|
|
border-radius: 16px;
|
|
background: #00a0ff;
|
|
cursor: pointer; }
|
|
div#progress-container input[type=range]::-ms-track {
|
|
width: 100%;
|
|
height: 0px;
|
|
cursor: pointer;
|
|
background: transparent;
|
|
border-color: transparent;
|
|
color: transparent; }
|
|
div#progress-container input[type=range]::-ms-fill-lower {
|
|
background: #003d57;
|
|
border: 0px solid #010101;
|
|
border-radius: 0px;
|
|
box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0); }
|
|
div#progress-container input[type=range]::-ms-fill-upper {
|
|
background: #0075a9;
|
|
border: 0px solid #010101;
|
|
border-radius: 0px;
|
|
box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0); }
|
|
div#progress-container input[type=range]::-ms-thumb {
|
|
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
|
|
border: 1px solid #00a0ff;
|
|
height: 15px;
|
|
width: 15px;
|
|
border-radius: 16px;
|
|
background: #00a0ff;
|
|
cursor: pointer;
|
|
height: 0px;
|
|
display: block; }
|
|
@media all and (-ms-high-contrast: none) {
|
|
div#progress-container *::-ms-backdrop, div#progress-container input[type="range"].amplitude-song-slider {
|
|
padding: 0px; }
|
|
div#progress-container *::-ms-backdrop, div#progress-container input[type=range].amplitude-song-slider::-ms-thumb {
|
|
height: 15px;
|
|
width: 15px;
|
|
border-radius: 10px;
|
|
cursor: pointer;
|
|
margin-top: -8px; }
|
|
div#progress-container *::-ms-backdrop, div#progress-container input[type=range].amplitude-song-slider::-ms-track {
|
|
border-width: 15px 0;
|
|
border-color: transparent; }
|
|
div#progress-container *::-ms-backdrop, div#progress-container input[type=range].amplitude-song-slider::-ms-fill-lower {
|
|
background: #CFD8DC;
|
|
border-radius: 10px; }
|
|
div#progress-container *::-ms-backdrop, div#progress-container input[type=range].amplitude-song-slider::-ms-fill-upper {
|
|
background: #CFD8DC;
|
|
border-radius: 10px; } }
|
|
@supports (-ms-ime-align: auto) {
|
|
div#progress-container input[type=range].amplitude-song-slider::-ms-thumb {
|
|
height: 15px;
|
|
width: 15px;
|
|
margin-top: 3px; } }
|
|
div#progress-container input[type=range]:focus::-ms-fill-lower {
|
|
background: #0075a9; }
|
|
div#progress-container input[type=range]:focus::-ms-fill-upper {
|
|
background: #00adfb; }
|
|
|
|
div#control-container {
|
|
margin-top: 25px;
|
|
margin-top: 20px; }
|
|
div#control-container div#repeat-container {
|
|
width: 30%;
|
|
float: left;
|
|
padding-top: 20px; }
|
|
div#control-container div#repeat-container div#repeat {
|
|
width: 24px;
|
|
height: 19px;
|
|
cursor: pointer; }
|
|
div#control-container div#repeat-container div#repeat.amplitude-repeat-off {
|
|
background: url("/webassets/repeat-off.svg"); }
|
|
div#control-container div#repeat-container div#repeat.amplitude-repeat-on {
|
|
background: url("/webassets/repeat-on.svg"); }
|
|
div#control-container div#repeat-container div#shuffle {
|
|
width: 23px;
|
|
height: 19px;
|
|
cursor: pointer;
|
|
float: left; }
|
|
div#control-container div#repeat-container div#shuffle.amplitude-shuffle-off {
|
|
background: url("/webassets/shuffle-off.svg"); }
|
|
div#control-container div#repeat-container div#shuffle.amplitude-shuffle-on {
|
|
background: url("/webassets/shuffle-on.svg"); }
|
|
div#control-container div#repeat-container .speed {
|
|
|
|
cursor: pointer;
|
|
font-size: 23px;
|
|
float:left;
|
|
line-height: 0.9;
|
|
margin-left: 10px;
|
|
color:#00A0FF;
|
|
}
|
|
@media all and (-ms-high-contrast: none) {
|
|
div#control-container *::-ms-backdrop, div#control-container div#control-container {
|
|
margin-top: 40px;
|
|
float: none; } }
|
|
div#control-container div#central-control-container {
|
|
width: 40%;
|
|
float: left; }
|
|
div#control-container div#central-control-container div#central-controls {
|
|
width: 130px;
|
|
margin: auto; }
|
|
div#control-container div#central-control-container div#central-controls div#previous {
|
|
display: inline-block;
|
|
width: 40px;
|
|
height: 40px;
|
|
cursor: pointer;
|
|
background: url("/webassets/prev.svg");
|
|
background-repeat: no-repeat;
|
|
float: left;
|
|
margin-top: 10px;
|
|
margin-right: -5px; }
|
|
div#control-container div#central-control-container div#central-controls div#play-pause {
|
|
display: inline-block;
|
|
width: 60px;
|
|
height: 60px;
|
|
cursor: pointer;
|
|
float: left; }
|
|
div#control-container div#central-control-container div#central-controls div#play-pause.amplitude-paused {
|
|
background: url("/webassets/play.svg"); }
|
|
div#control-container div#central-control-container div#central-controls div#play-pause.amplitude-playing {
|
|
background: url("/webassets/pause.svg"); }
|
|
div#control-container div#central-control-container div#central-controls div#next {
|
|
display: inline-block;
|
|
width: 40px;
|
|
height: 40px;
|
|
cursor: pointer;
|
|
background: url("/webassets/next.svg");
|
|
background-repeat: no-repeat;
|
|
float: left;
|
|
margin-top: 10px;
|
|
margin-left: -5px; }
|
|
div#control-container div#volume-container {
|
|
width: 30%;
|
|
float: left;
|
|
padding-top: 20px; }
|
|
div#control-container div#volume-container div#shuffle-right {
|
|
width: 23px;
|
|
height: 19px;
|
|
cursor: pointer;
|
|
margin: auto; }
|
|
div#control-container div#volume-container div#shuffle-right.amplitude-shuffle-off {
|
|
background: url("/webassets/shuffle-off.svg"); }
|
|
div#control-container div#volume-container div#shuffle-right.amplitude-shuffle-on {
|
|
background: url("/webassets/shuffle-on.svg"); }
|
|
div#control-container div.amplitude-mute {
|
|
cursor: pointer;
|
|
width: 25px;
|
|
height: 19px;
|
|
float: left; }
|
|
div#control-container div.amplitude-mute.amplitude-not-muted {
|
|
background: url("/webassets/volume.svg");
|
|
background-repeat: no-repeat; }
|
|
div#control-container div.amplitude-mute.amplitude-muted {
|
|
background: url("/webassets/mute.svg");
|
|
background-repeat: no-repeat; }
|
|
|
|
div#control-container:after {
|
|
content: "";
|
|
display: table;
|
|
clear: both; }
|
|
|
|
/* Small only */
|
|
@media screen and (max-width: 39.9375em) {
|
|
div#control-container div#central-control-container {
|
|
width: 50%;
|
|
}
|
|
div#control-container div#repeat-container {
|
|
width: 25%;
|
|
}
|
|
div#control-container div#volume-container {
|
|
width: 25%;
|
|
}
|
|
div#amplitude-player div#repeat-container div#repeat {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
float: none; }
|
|
div#amplitude-player div#repeat-container div#shuffle {
|
|
display: none; }
|
|
div#amplitude-player div#repeat-container div#repeat {
|
|
display: none; }
|
|
div#amplitude-player div#volume-container div.volume-controls {
|
|
display: none; }
|
|
div#amplitude-player div#volume-container div#shuffle-right {
|
|
display: block; } }
|
|
/* Medium only */
|
|
@media screen and (min-width: 40em) and (max-width: 63.9375em) {
|
|
div#amplitude-player div#repeat-container div#repeat {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
float: none; }
|
|
div#amplitude-player div#repeat-container div#shuffle {
|
|
display: none; }
|
|
div#amplitude-player div#volume-container div.volume-controls {
|
|
display: none; }
|
|
div#amplitude-player div#volume-container div#shuffle-right {
|
|
display: block; } }
|
|
/* Large and up */
|
|
@media screen and (min-width: 64em) {
|
|
nav{
|
|
display: none;
|
|
}
|
|
div#amplitude-player div#repeat-container div#repeat {
|
|
margin-left: 0px;
|
|
margin-right: 10px;
|
|
float: left; }
|
|
div#amplitude-player div#volume-container div#shuffle-right {
|
|
display: none; } }
|
|
input[type=range].amplitude-volume-slider {
|
|
-webkit-appearance: none;
|
|
width: calc( 100% - 33px);
|
|
float: left;
|
|
margin-top: 10px;
|
|
margin-left: 5px; }
|
|
|
|
@-moz-document url-prefix() {
|
|
input[type=range].amplitude-volume-slider {
|
|
margin-top: 0px; } }
|
|
@supports (-ms-ime-align: auto) {
|
|
input[type=range].amplitude-volume-slider {
|
|
margin-top: 3px;
|
|
height: 12px;
|
|
background-color: rgba(255, 255, 255, 0) !important;
|
|
z-index: 999;
|
|
position: relative; }
|
|
|
|
div.ms-range-fix {
|
|
height: 1px;
|
|
background-color: #A9A9A9;
|
|
width: 67%;
|
|
float: right;
|
|
margin-top: -6px;
|
|
z-index: 9;
|
|
position: relative; } }
|
|
@media all and (-ms-high-contrast: none) {
|
|
*::-ms-backdrop, input[type=range].amplitude-volume-slider {
|
|
margin-top: -24px;
|
|
background-color: rgba(255, 255, 255, 0) !important; } }
|
|
input[type=range].amplitude-volume-slider:focus {
|
|
outline: none; }
|
|
|
|
input[type=range].amplitude-volume-slider::-webkit-slider-runnable-track {
|
|
width: 75%;
|
|
height: 1px;
|
|
cursor: pointer;
|
|
animate: 0.2s;
|
|
background: #CFD8DC; }
|
|
|
|
input[type=range].amplitude-volume-slider::-webkit-slider-thumb {
|
|
height: 10px;
|
|
width: 10px;
|
|
border-radius: 10px;
|
|
background: #00A0FF;
|
|
cursor: pointer;
|
|
margin-top: -4px;
|
|
-webkit-appearance: none; }
|
|
|
|
input[type=range].amplitude-volume-slider:focus::-webkit-slider-runnable-track {
|
|
background: #CFD8DC; }
|
|
|
|
input[type=range].amplitude-volume-slider::-moz-range-track {
|
|
width: 100%;
|
|
height: 1px;
|
|
cursor: pointer;
|
|
animate: 0.2s;
|
|
background: #CFD8DC; }
|
|
|
|
input[type=range].amplitude-volume-slider::-moz-range-thumb {
|
|
height: 10px;
|
|
width: 10px;
|
|
border-radius: 10px;
|
|
background: #00A0FF;
|
|
cursor: pointer;
|
|
margin-top: -4px; }
|
|
|
|
input[type=range].amplitude-volume-slider::-ms-track {
|
|
width: 100%;
|
|
height: 1px;
|
|
cursor: pointer;
|
|
animate: 0.2s;
|
|
background: transparent;
|
|
/*leave room for the larger thumb to overflow with a transparent border */
|
|
border-color: transparent;
|
|
border-width: 15px 0;
|
|
/*remove default tick marks*/
|
|
color: transparent; }
|
|
|
|
input[type=range].amplitude-volume-slider::-ms-fill-lower {
|
|
background: #CFD8DC;
|
|
border-radius: 10px; }
|
|
|
|
input[type=range].amplitude-volume-slider::-ms-fill-upper {
|
|
background: #CFD8DC;
|
|
border-radius: 10px; }
|
|
|
|
input[type=range].amplitude-volume-slider::-ms-thumb {
|
|
height: 10px;
|
|
width: 10px;
|
|
border-radius: 10px;
|
|
background: #00A0FF;
|
|
cursor: pointer;
|
|
margin-top: 2px; }
|
|
|
|
input[type=range].amplitude-volume-slider:focus::-ms-fill-lower {
|
|
background: #CFD8DC; }
|
|
|
|
input[type=range].amplitude-volume-slider:focus::-ms-fill-upper {
|
|
background: #CFD8DC; }
|
|
|
|
input[type=range].amplitude-volume-slider::-ms-tooltip {
|
|
display: none; }
|
|
|
|
div#time-container span.current-time {
|
|
color: #607D8B;
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
float: left;
|
|
width: 15%;
|
|
text-align: center; }
|
|
div#time-container span.duration {
|
|
color: #607D8B;
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
float: left;
|
|
width: 15%;
|
|
text-align: center; }
|
|
|
|
div#time-container:after {
|
|
content: "";
|
|
display: table;
|
|
clear: both; }
|
|
|
|
div#meta-container {
|
|
text-align: center;
|
|
margin-top: 5px; }
|
|
div#meta-container span.song-name {
|
|
display: block;
|
|
/* color: #272726; */
|
|
font-size: 20px;
|
|
font-family: 'Open Sans', sans-serif;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis; }
|
|
div#meta-container div.song-artist-album {
|
|
/* color: #607D8B; */
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
font-family: 'Open Sans', sans-serif;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis; }
|
|
div#meta-container div.song-artist-album span {
|
|
display: block; }
|
|
|
|
/*
|
|
3. Layout
|
|
*/
|
|
|
|
div.amplitude-wave-form{
|
|
margin-top: -14px;
|
|
}
|
|
|
|
div.amplitude-wave-form svg{
|
|
stroke: #00a0ff;
|
|
height: 50px;
|
|
width: 100%;
|
|
stroke-width: .5px;
|
|
}
|
|
div.amplitude-wave-form svg g{
|
|
stroke: #00a0ff;
|
|
height: 50px;
|
|
width: 100%;
|
|
}
|
|
div.amplitude-wave-form svg g path{
|
|
stroke: #00a0ff;
|
|
height: 50px;
|
|
width: 100%;
|
|
}
|
|
|
|
div#large-visualization{
|
|
width: 100%;
|
|
background-color: black;
|
|
visibility: hidden;
|
|
}
|
|
[v-cloak] {
|
|
display: none;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
{{template "navbar" .}}
|
|
|
|
<br />{{$setting := .setting}}
|
|
<div id="app" v-cloak>
|
|
<div id="blue-playlist-container">
|
|
|
|
<!-- Amplitude Player -->
|
|
<div id="amplitude-player">
|
|
|
|
<!-- Left Side Player -->
|
|
<div id="amplitude-left">
|
|
<img data-amplitude-song-info="cover_art_url" class="album-art"/>
|
|
<div class="amplitude-visualization" id="large-visualization">
|
|
|
|
</div>
|
|
<div id="player-left-bottom">
|
|
<div id="time-container">
|
|
<span class="current-time">
|
|
<span class="amplitude-current-minutes" ></span>:<span class="amplitude-current-seconds"></span>
|
|
</span>
|
|
<div id="progress-container">
|
|
|
|
<input type="range" class="amplitude-song-slider"/>
|
|
<progress id="song-played-progress" class="amplitude-song-played-progress"></progress>
|
|
<progress id="song-buffered-progress" class="amplitude-buffered-progress" value="0"></progress>
|
|
</div>
|
|
<span class="duration">
|
|
<span class="amplitude-duration-minutes"></span>:<span class="amplitude-duration-seconds"></span>
|
|
</span>
|
|
</div>
|
|
|
|
<div id="control-container">
|
|
<div id="repeat-container">
|
|
<div class="amplitude-repeat" id="repeat"></div>
|
|
<div class="amplitude-shuffle amplitude-shuffle-off" id="shuffle"></div>
|
|
<div class="speed" @click="changeSpeed">${speed}X</div>
|
|
</div>
|
|
|
|
<div id="central-control-container">
|
|
<div id="central-controls">
|
|
<div class="amplitude-prev" id="previous"></div>
|
|
<div class="amplitude-play-pause" id="play-pause"></div>
|
|
<div class="amplitude-next" id="next"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="volume-container">
|
|
<div class="volume-controls">
|
|
<div class="amplitude-mute amplitude-not-muted"></div>
|
|
<input type="range" class="amplitude-volume-slider"/>
|
|
<div class="ms-range-fix"></div>
|
|
</div>
|
|
<div class="amplitude-shuffle amplitude-shuffle-off" id="shuffle-right"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="meta-container">
|
|
<span data-amplitude-song-info="name" class="song-name"></span>
|
|
|
|
<div class="song-artist-album">
|
|
<span data-amplitude-song-info="artist"></span>
|
|
<span data-amplitude-song-info="album"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Left Side Player -->
|
|
|
|
<!-- Right Side Player -->
|
|
<div id="amplitude-right">
|
|
|
|
<div v-for="(item,index) in allItems" class="song amplitude-song-container amplitude-play-pause" :data-amplitude-song-index="index" :title="item.Title">
|
|
<div class="song-now-playing-icon-container">
|
|
<div class="play-button-container">
|
|
|
|
</div>
|
|
<img class="now-playing" src="/webassets//now-playing.svg"/>
|
|
</div>
|
|
<div class="song-meta-data">
|
|
<span class="song-title">${item.Title}</span>
|
|
<span class="song-date">${getFormattedLastEpisodeDate(item)}</span>
|
|
<span class="song-artist">${item.Podcast.Title}</span>
|
|
|
|
</div>
|
|
<span class="song-duration">${ formatDuration(item.Duration)}</span>
|
|
</div>
|
|
|
|
</div>
|
|
<!-- End Right Side Player -->
|
|
</div>
|
|
<!-- End Amplitdue Player -->
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
{{template "scripts"}}
|
|
<script src="/webassets/amplitude.min.js"></script>
|
|
|
|
<style>
|
|
.song {
|
|
background-color: inherit;
|
|
|
|
}
|
|
.song:not(.amplitude-active-song-container):hover .play-button-container{
|
|
display: block!important;;
|
|
}
|
|
|
|
.song:hover{
|
|
background-color:#00A0FF ;
|
|
}
|
|
</style>
|
|
<script>
|
|
|
|
|
|
var app = new Vue({
|
|
delimiters: ["${", "}"],
|
|
el: "#app",
|
|
watch:{
|
|
speed(newSpeed){
|
|
Amplitude.setPlaybackSpeed(newSpeed);
|
|
if(localStorage){
|
|
localStorage.speed= newSpeed;
|
|
}
|
|
}
|
|
},
|
|
methods:{
|
|
removeSongTime(songId){
|
|
|
|
if(localStorage){
|
|
let songTimes=localStorage.songTimes;
|
|
if(!songTimes){
|
|
songTimes={};
|
|
}else{
|
|
songTimes= JSON.parse(localStorage.songTimes);
|
|
}
|
|
if(songTimes.hasOwnProperty(songId)){
|
|
delete songTimes[songId];
|
|
localStorage.songTimes=JSON.stringify(songTimes);
|
|
}
|
|
|
|
}
|
|
}
|
|
,saveSongTime(songId,time){
|
|
|
|
if(localStorage){
|
|
let songTimes=localStorage.songTimes;
|
|
if(!songTimes){
|
|
songTimes={};
|
|
}else{
|
|
songTimes= JSON.parse(localStorage.songTimes);
|
|
}
|
|
songTimes[songId]=time;
|
|
localStorage.songTimes=JSON.stringify(songTimes);
|
|
|
|
|
|
}
|
|
},
|
|
getSavedSongTime(){
|
|
|
|
if(localStorage){
|
|
let song=Amplitude.getActiveSongMetadata();
|
|
let songTimes=localStorage.songTimes;
|
|
if(!songTimes){
|
|
songTimes={};
|
|
}else{
|
|
songTimes= JSON.parse(localStorage.songTimes);
|
|
}
|
|
if(songTimes.hasOwnProperty(song.id)){
|
|
return songTimes[song.id];
|
|
}
|
|
|
|
}
|
|
return 0;
|
|
},
|
|
changeSpeed(){
|
|
let currentSpeedIndex= this.speedOptions.indexOf(this.speed);
|
|
let nextIndex=0;
|
|
if(currentSpeedIndex===-1 || currentSpeedIndex===this.speedOptions.length-1){
|
|
nextIndex=0;
|
|
}else{
|
|
nextIndex=currentSpeedIndex+1;
|
|
}
|
|
this.speed=this.speedOptions[nextIndex];
|
|
|
|
},
|
|
getSongsFromItems(items){
|
|
return items.map(x=>{
|
|
let toReturn= {
|
|
id:x.ID,
|
|
name:x.Title,
|
|
url:x.DownloadPath,
|
|
cover_art_url:x.Image,
|
|
artist:x.Podcast.Title,
|
|
album: new Date(x.PubDate.substr(0,10)).toDateString()
|
|
}
|
|
if(!toReturn.url){
|
|
toReturn.url=x.FileURL;
|
|
}
|
|
return toReturn;
|
|
});
|
|
},
|
|
getFormattedLastEpisodeDate(item){
|
|
let dt=new Date(Date.parse(item.PubDate.substr(0,10)));
|
|
return dt.toDateString()
|
|
},
|
|
formatDuration(total) {
|
|
if (total <= 0) {
|
|
return ""
|
|
}
|
|
mins = total / 60
|
|
mins=Math.floor(mins)
|
|
secs = total % 60
|
|
hrs = 0
|
|
if (mins >= 60) {
|
|
hrs = mins / 60
|
|
mins = mins % 60
|
|
}
|
|
|
|
hrs=Math.floor(hrs)
|
|
if (hrs > 0) {
|
|
return `${hrs}:${mins}:${secs}`
|
|
}
|
|
return `${mins}:${secs}`
|
|
},
|
|
},
|
|
computed:{
|
|
songs(){
|
|
return this.getSongsFromItems(this.allItems)
|
|
}
|
|
},
|
|
updated(){
|
|
Amplitude.bindNewElements();
|
|
},
|
|
|
|
created(){
|
|
const self=this;
|
|
this.socket= getWebsocketConnection(function(event){
|
|
const message= getWebsocketMessage("RegisterPlayer","")
|
|
self.socket.send(message);
|
|
},x=>{
|
|
if(!x.data){
|
|
return
|
|
}
|
|
payload= JSON.parse(x.data);
|
|
if(payload.messageType=="Enqueue"){
|
|
newItems=JSON.parse(payload.payload);
|
|
newItems.forEach(x=>{this.allItems.push(x)});
|
|
newSongs=self.getSongsFromItems(newItems);
|
|
newSongs.forEach(x=>{Amplitude.addSong(x)});
|
|
}
|
|
});
|
|
},
|
|
mounted(){
|
|
let volume=50;
|
|
if(localStorage?.playerVolume){
|
|
volume=parseInt(localStorage.playerVolume)
|
|
}
|
|
const self=this;
|
|
Amplitude.init({
|
|
"songs": this.songs,
|
|
"start_song":0,
|
|
"autoplay": true,
|
|
"volume":volume,
|
|
"callbacks": {
|
|
// 'song_change':function(){
|
|
// song = Amplitude.getActiveSongMetadata();
|
|
// if(self.songLoaded.indexOf(song.id)!==-1){
|
|
// return;
|
|
// }
|
|
// time= self.getSavedSongTime();
|
|
// console.log('change',time)
|
|
// if(time>0){
|
|
// self.songLoaded.push(song.id);
|
|
// Amplitude.skipTo(time,song.index);
|
|
// setTimeout(() => {
|
|
// self.songLoaded=self.songLoaded.splice(self.songLoaded.indexOf(song.id),1)
|
|
// }, 500);
|
|
// }
|
|
// },
|
|
'timeupdate':function(){
|
|
|
|
let secs=Math.floor(Amplitude.getSongPlayedSeconds());
|
|
if(secs%10===0){
|
|
song=Amplitude.getActiveSongMetadata();
|
|
if(Amplitude.getSongPlayedPercentage()>20){
|
|
markSongAsPlayed(song.id)
|
|
}
|
|
if(Amplitude.getSongPlayedPercentage()>95){
|
|
self.removeSongTime(song.id)
|
|
}else{
|
|
|
|
self.saveSongTime(song.id,secs);
|
|
}
|
|
}
|
|
},
|
|
'volumechange':function(){
|
|
volume=Amplitude.getVolume();
|
|
if(localStorage){
|
|
localStorage.playerVolume= volume.toString();
|
|
}
|
|
},
|
|
'play': function(){
|
|
|
|
document.getElementById('album-art').style.visibility = 'hidden';
|
|
document.getElementById('large-visualization').style.visibility = 'visible';
|
|
},
|
|
|
|
'pause': function(){
|
|
document.getElementById('album-art').style.visibility = 'visible';
|
|
document.getElementById('large-visualization').style.visibility = 'hidden';
|
|
},
|
|
'initialized':function(){
|
|
|
|
if(localStorage && localStorage.speed){
|
|
self.speed=parseFloat(localStorage.speed);
|
|
}
|
|
|
|
time= self.getSavedSongTime();
|
|
// console.log(time)
|
|
if(time>0){
|
|
Amplitude.skipTo(time,0)
|
|
}
|
|
|
|
},
|
|
'ended':function(){
|
|
console.log(Amplitude.getActiveSongMetadata());
|
|
}
|
|
},
|
|
waveforms: {
|
|
sample_rate: 50
|
|
}
|
|
});
|
|
|
|
},
|
|
data:{
|
|
speed:1,
|
|
speedOptions:[0.75,1,1.1,1.25,1.5,1.75,2],
|
|
songLoaded:[],
|
|
socket:null,
|
|
allItems: {{ .podcastItems }},
|
|
}
|
|
});
|
|
|
|
|
|
|
|
let songElements = document.getElementsByClassName('song');
|
|
|
|
for( var i = 0; i < songElements.length; i++ ){
|
|
songElements[i].addEventListener('click', function(){
|
|
this.querySelectorAll('.play-button-container')[0].style.display = 'none';
|
|
});
|
|
}
|
|
|
|
let markedAsPlayed=[];
|
|
|
|
|
|
function markSongAsPlayed(id) {
|
|
let endpoint = "markPlayed";
|
|
if(markedAsPlayed.indexOf(id)!==-1){
|
|
return;
|
|
}
|
|
markedAsPlayed.push(id);
|
|
axios
|
|
.get("/podcastitems/" + id + "/" + endpoint, {
|
|
isPlayed: status,
|
|
})
|
|
.then(function (response) {
|
|
})
|
|
.catch(function (error) {
|
|
})
|
|
.then(function () {});
|
|
return false;
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|