open-source-mirrors
/
podgrab
mirror of https://github.com/akhilrex/podgrab
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity
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.
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'master'
${ noResults }
podgrab/client/player.html

1059 lines
33 KiB
Raw Permalink Normal View History Unescape

added podcast player
4 years ago
<!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 {
speed finally working
4 years ago
width: 30%;
added podcast player
4 years ago
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;
speed finally working
4 years ago
float: left; }
added podcast player
4 years ago
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"); }
speed finally working
4 years ago
div#control-container div#repeat-container .speed {
cursor: pointer;
font-size: 23px;
float:left;
line-height: 0.9;
margin-left: 10px;
color:#00A0FF;
}
added podcast player
4 years ago
@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 {
speed finally working
4 years ago
width: 40%;
added podcast player
4 years ago
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 {
speed finally working
4 years ago
width: 30%;
added podcast player
4 years ago
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) {
speed finally working
4 years ago
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%;
}
added podcast player
4 years ago
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; }
speed finally working
4 years ago
div#amplitude-player div#repeat-container div#repeat {
display: none; }
added podcast player
4 years ago
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 {
speed finally working
4 years ago
margin-left: 0px;
margin-right: 10px;
added podcast player
4 years ago
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;
}
basic hygeine fixes
4 years ago
[v-cloak] {
display: none;
}
added podcast player
4 years ago
</style>
</head>
<body>
<div class="container">
{{template "navbar" .}}
<br />{{$setting := .setting}}
basic hygeine fixes
4 years ago
<div id="app" v-cloak>
added podcast player
4 years ago
<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">
display hours in playback progress time
3 years ago
<span class="amplitude-current-hours" ></span>:<span class="amplitude-current-minutes" ></span>:<span class="amplitude-current-seconds"></span>
added podcast player
4 years ago
</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">
fixes #75 correct playback time
4 years ago
<span class="amplitude-duration-hours"></span>:<span class="amplitude-duration-minutes"></span>:<span class="amplitude-duration-seconds"></span>
added podcast player
4 years ago
</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>
speed finally working
4 years ago
<div class="speed" @click="changeSpeed">${speed}X</div>
added podcast player
4 years ago
</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>
fix breaking slashes and show summary on player
4 years ago
<br>
<div class="song-summary">
<span data-amplitude-song-info="summary"></span>
</div>
added podcast player
4 years ago
</div>
</div>
</div>
<!-- End Left Side Player -->
<!-- Right Side Player -->
<div id="amplitude-right">
add to playlist isworking
4 years ago
<div v-for="(item,index) in allItems" class="song amplitude-song-container amplitude-play-pause" :data-amplitude-song-index="index" :title="item.Title">
added podcast player
4 years ago
<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">
add to playlist isworking
4 years ago
<span class="song-title">${item.Title}</span>
<span class="song-date">${getFormattedLastEpisodeDate(item)}</span>
<span class="song-artist">${item.Podcast.Title}</span>
added podcast player
4 years ago
</div>
add to playlist isworking
4 years ago
<span class="song-duration">${ formatDuration(item.Duration)}</span>
added podcast player
4 years ago
</div>
add to playlist isworking
4 years ago
added podcast player
4 years ago
</div>
<!-- End Right Side Player -->
</div>
<!-- End Amplitdue Player -->
</div>
add to playlist isworking
4 years ago
</div>
added podcast player
4 years ago
</div>
</div>
{{template "scripts"}}
<script src="/webassets/amplitude.min.js"></script>
add to playlist isworking
4 years ago
<style>
.song {
background-color: inherit;
}
.song:not(.amplitude-active-song-container):hover .play-button-container{
display: block!important;;
}
.song:hover{
background-color:#00A0FF ;
}
</style>
added podcast player
4 years ago
<script>
add to playlist isworking
4 years ago
var app = new Vue({
delimiters: ["${", "}"],
el: "#app",
speed finally working
4 years ago
watch:{
speed(newSpeed){
Amplitude.setPlaybackSpeed(newSpeed);
resume also working :)
4 years ago
if(localStorage){
localStorage.speed= newSpeed;
}
speed finally working
4 years ago
}
},
add to playlist isworking
4 years ago
methods:{
resume also working :)
4 years ago
removeSongTime(songId){
if(localStorage){
support older browsers
4 years ago
var songTimes=localStorage.songTimes;
resume also working :)
4 years ago
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){
support older browsers
4 years ago
var songTimes=localStorage.songTimes;
resume also working :)
4 years ago
if(!songTimes){
songTimes={};
}else{
songTimes= JSON.parse(localStorage.songTimes);
}
songTimes[songId]=time;
localStorage.songTimes=JSON.stringify(songTimes);
}
},
getSavedSongTime(){
if(localStorage){
support older browsers
4 years ago
var song=Amplitude.getActiveSongMetadata();
var songTimes=localStorage.songTimes;
resume also working :)
4 years ago
if(!songTimes){
songTimes={};
}else{
songTimes= JSON.parse(localStorage.songTimes);
}
if(songTimes.hasOwnProperty(song.id)){
return songTimes[song.id];
}
}
return 0;
},
speed finally working
4 years ago
changeSpeed(){
support older browsers
4 years ago
var currentSpeedIndex= this.speedOptions.indexOf(this.speed);
var nextIndex=0;
speed finally working
4 years ago
if(currentSpeedIndex===-1 || currentSpeedIndex===this.speedOptions.length-1){
nextIndex=0;
}else{
nextIndex=currentSpeedIndex+1;
}
this.speed=this.speedOptions[nextIndex];
},
add to playlist isworking
4 years ago
getSongsFromItems(items){
return items.map(x=>{
total archive - download podcast image as well
4 years ago
var image = x.LocalImage;
if(!image){
image=x.Image;
}
support older browsers
4 years ago
var toReturn= {
add to playlist isworking
4 years ago
id:x.ID,
name:x.Title,
fix breaking player
4 years ago
url:"/podcastitems/"+x.ID+"/file",
total archive - download podcast image as well
4 years ago
cover_art_url:image,
add to playlist isworking
4 years ago
artist:x.Podcast.Title,
fix breaking slashes and show summary on player
4 years ago
summary:x.Summary,
add to playlist isworking
4 years ago
album: new Date(x.PubDate.substr(0,10)).toDateString()
}
play episodes even if not downloaded
4 years ago
if(!toReturn.url){
toReturn.url=x.FileURL;
}
return toReturn;
add to playlist isworking
4 years ago
});
},
getFormattedLastEpisodeDate(item){
support older browsers
4 years ago
var dt=new Date(Date.parse(item.PubDate.substr(0,10)));
add to playlist isworking
4 years ago
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(){
support older browsers
4 years ago
var volume=50;
fix legacy broswer issues on iOS
4 years ago
if(localStorage && localStorage.playerVolume){
Persist volume
4 years ago
volume=parseInt(localStorage.playerVolume)
}
resume also working :)
4 years ago
const self=this;
add to playlist isworking
4 years ago
Amplitude.init({
"songs": this.songs,
"start_song":0,
"autoplay": true,
Persist volume
4 years ago
"volume":volume,
add to playlist isworking
4 years ago
"callbacks": {
fix volume issue
3 years ago
'song_change':function(){
if(localStorage && localStorage.playerVolume){
volume=parseInt(localStorage.playerVolume)
Amplitude.setVolume(volume);
}
},
resume also working :)
4 years ago
'timeupdate':function(){
support older browsers
4 years ago
var secs=Math.floor(Amplitude.getSongPlayedSeconds());
resume also working :)
4 years ago
if(secs%10===0){
song=Amplitude.getActiveSongMetadata();
mark episode as played if 20% is listened
4 years ago
if(Amplitude.getSongPlayedPercentage()>20){
markSongAsPlayed(song.id)
}
resume also working :)
4 years ago
if(Amplitude.getSongPlayedPercentage()>95){
self.removeSongTime(song.id)
}else{
self.saveSongTime(song.id,secs);
}
}
},
Persist volume
4 years ago
'volumechange':function(){
volume=Amplitude.getVolume();
if(localStorage){
localStorage.playerVolume= volume.toString();
}
},
add to playlist isworking
4 years ago
'play': function(){
resume also working :)
4 years ago
add to playlist isworking
4 years ago
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(){
resume also working :)
4 years ago
if(localStorage && localStorage.speed){
self.speed=parseFloat(localStorage.speed);
}
time= self.getSavedSongTime();
mark episode as played if 20% is listened
4 years ago
// console.log(time)
resume also working :)
4 years ago
if(time>0){
Amplitude.skipTo(time,0)
add to playlist isworking
4 years ago
}
resume also working :)
4 years ago
add to playlist isworking
4 years ago
},
'ended':function(){
console.log(Amplitude.getActiveSongMetadata());
}
},
waveforms: {
sample_rate: 50
}
});
},
data:{
speed finally working
4 years ago
speed:1,
Some pointes mentioned in #63
4 years ago
speedOptions:[0.75,1,1.1,1.25,1.5,1.75,2,2.5,3],
resume also working :)
4 years ago
songLoaded:[],
add to playlist isworking
4 years ago
socket:null,
allItems: {{ .podcastItems }},
}
});
added podcast player
4 years ago
support older browsers
4 years ago
var songElements = document.getElementsByClassName('song');
added podcast player
4 years ago
for( var i = 0; i < songElements.length; i++ ){
songElements[i].addEventListener('click', function(){
this.querySelectorAll('.play-button-container')[0].style.display = 'none';
});
}
support older browsers
4 years ago
var markedAsPlayed=[];
mark episode as played if 20% is listened
4 years ago
function markSongAsPlayed(id) {
support older browsers
4 years ago
var endpoint = "markPlayed";
mark episode as played if 20% is listened
4 years ago
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;
}
added podcast player
4 years ago
</script>
</body>
</html>