This repository has been archived by the owner on Sep 24, 2019. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
64 lines (59 loc) · 2.9 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<html>
<head>
<title>Iono Playground</title>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css">
<script defer src="https://p2.iono.fm/bundle/0.0.51/player.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://vuejs.org/js/vue.js"></script>
</head>
<body>
<div v-cloak id='app' class="container">
<div class="column add-bottom">
<div id="mainwrap">
<button class='button is-rounded' @click='togglePlay()'>{{playButtonText}}</button>
<button class='button is-rounded' @click='toggleMute()'>{{muteButtonText}}</button>
<div style='float:right'>
<span>Volume: {{volume}}</span>
<circle-slider style='float:right' :min="0" :max='100' :side="50" v-model="volume"> </circle-slider>
</div>
<div id="nowPlay">
<span id="npAction"></span>
<span id="npTitle"></span>
</div>
<div id="audiowrap">
<progress @click='progressBarClicked()' id='progress-bar'
class="progress is-primary" value="0" max="1"></progress>
<span>{{ position | formatDuration }} / {{ duration | formatDuration }}</span>
<div id="chapters">
<h4>Chapters</h4>
<ul id="chaptersList">
<li :class="{active: chapterText === chapter.text}" v-for="chapter in chapters">{{chapter.text}}</li>
</ul>
</div>
<div id="tracks">
<a @click="previousPlaylistItem()" id="btnPrev">←</a><a
@click="nextPlaylistItem()" id="btnNext">→</a>
</div>
</div>
<div id="plwrap">
<ul id="plList">
<li @click="playlistItemSelect(index)" :class="{ plSel: currentPlaylistIndex === index }"
:key='index' v-for="(p, index) in playlist">
<div class="plItem">
<span class="plNum">{{index + 1}}</span>
<span class="plTitle">{{ p.metadata.title }}</span>
<span class="plLength">{{ p.metadata.duration | formatDuration}}</span>
</div>
</li>
</ul>
</div>
</div>
</div>
<button @click='logInfo()'>Console Log Info</button>
<h6 class="text-muted">Tracking events:</h6>
<pre class="pre-scrollable"><code>{{events}}</code></pre>
</div>
<script src="./index.js"></script>
</body>
</html>