-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
140 lines (109 loc) · 5.39 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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PonyvilleFM</title>
<!-- we use MUI for its modal -->
<link href="./mui.min.css" rel="stylesheet" type="text/css" />
<script src="./mui.min.js"></script>
<link rel="stylesheet" href="styles.css">
<link rel="manifest" href="/manifest.json">
<link rel="icon" href="./favicon.ico">
<!-- Theme colors -->
<meta name="apple-mobile-web-app-status-bar-style" content="#232323">
<meta name="theme-color" content="#232323" />
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/service-worker.js').then((registration) => {
console.log('Service Worker registered with scope:', registration.scope);
}).catch((error) => {
console.error('Service Worker registration failed:', error);
});
});
}
</script>
<!-- Prevent caching -->
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">
<!-- Open Graph meta tags -->
<meta property="og:title" content="PVFM Web Player">
<meta property="og:description" content="PonyvilleFM Mobile-Friendly Web Player
Installable as a PWA and from Google Play">
<meta property="og:image" content="https://pvfm.deltaryz.com/transparent_icon.png">
<meta property="og:url" content="https://pvfm.deltaryz.com/">
<meta property="og:type" content="website">
<!-- Twitter Card meta tags -->
<meta name="twitter:title" content="PVFM Web Player">
<meta name="twitter:description">
<meta property="og:description" content="PonyvilleFM Mobile-Friendly Web Player
Installable as a PWA and from Google Play">
<meta name="twitter:image" content="https://pvfm.deltaryz.com/transparent_icon.png">
<meta name="twitter:url" content="https://pvfm.deltaryz.com/">
</head>
<body>
<div class="outer">
<div class="middle">
<div class="inner">
<a href="https://ponyvillefm.com/" target="_blank" rel="noopener">
<img src="./pvfmlogo.png" style=" max-height:50px;" />
</a>
<!-- Metadata -->
<div id="container" style="display: flex; align-items: center; gap: 10px;">
<!-- Play/pause -->
<button id="playPauseButton" style="border: none; background: transparent; padding: 0;">
<img id="playPauseIcon" src="play.svg" alt="Play Icon" style="width: 80px; height: 80px;">
</button>
<!-- Text section for artist and title -->
<div id="text" style="display: flex; flex-direction: column; width:100%; text-align: left;;">
<div id="artist"
style="font-weight: bolder; color:rgba(255, 255, 255, 0.713); padding-bottom:10px; font-size:15px;">
PonyvilleFM
</div>
<div id="title" style="filter:drop-shadow(2px 2px 2px black); font-size:13px;">
Getting track info...
</div>
</div>
</div>
<!-- We insert GUI elements in here from the JS -->
<div id="stationSelector"></div>
<br />
<!-- Reset -->
<button id="resetButton">↻ Reset Stream</button>
<br />
<!-- Volume slider -->
<input title="Volume Control" type="range" id="volumeControl" class="slider" min="0" max="100"
value="100" />
<br />
<!-- TODO: Replace with person icon instead of 'Listeners' -->
<div id="listeners">
Listeners: ??
</div>
<br />
<!-- The 'hidden' property is removed when we receive metadata -->
<div id="eventDisplay" class="eventDisplay" hidden>
<div id="eventStatus" class="eventStatus">Next event:</div>
<div id="eventName" class="eventName">
<b id="eventTitle">PLACEHOLDER</b> <br />
<i class="eventPresentedBy">presented by</i>
<i>PLACEHOLDER</i>
</div>
<div id="timeUntilEvent" class="timeUntilEvent" hidden>69 hours 69 minutes</div>
</div>
</div>
<!-- PWA button -->
<button id="installPWA" hidden class="bottomButton">Install
PWA</button>
<!-- Google Play button -->
<button id="googlePlayButton" hidden class="bottomButton">Google Play</button>
<!-- Schedule modal -->
<button id="scheduleButton" class="bottomButton">Upcoming</button>
<div id="credits">
Made with 💜 by <a href="https://deltaryz.com" target="_blank" rel="noopener">∆•RYZ</a> and <a
href="https://ponyvillefm.com" target="_blank" rel="noopener">PVFM</a>
</div>
</div>
</div>
</div>
<script src="app.js"></script>
</body>