From: equilet <2237372+equilet@users.noreply.github.com> Date: Mon, 3 Apr 2023 21:51:07 +0000 (-0700) Subject: initial commit X-Git-Tag: v1.0~4 X-Git-Url: https://git.dabkitsch.com/?a=commitdiff_plain;h=3ecff68016c9124efc5dc4e29c64383b91ecfdc2;p=sfm-player.git initial commit --- 3ecff68016c9124efc5dc4e29c64383b91ecfdc2 diff --git a/SUTROFM-logo.png b/SUTROFM-logo.png new file mode 100644 index 0000000..7db3bfb Binary files /dev/null and b/SUTROFM-logo.png differ diff --git a/index-backup.html b/index-backup.html new file mode 100644 index 0000000..3336b64 --- /dev/null +++ b/index-backup.html @@ -0,0 +1,79 @@ + + + + + + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+ +
+ +
+ +
+
+
+
+
now playing:
+
+
+
---
+
---
+
---
+
status: unknown
+ +
\\\
+
\\\
+
\\\
+ +
+
+
+
+ + +
+
+

+ SFM is an internet radio station, + radio transmission location in San Francisco, + and global underground platform for artists. +

+
+
+
+
+ +
+ + + + + + + diff --git a/index.html b/index.html new file mode 100644 index 0000000..2a90c3b --- /dev/null +++ b/index.html @@ -0,0 +1,91 @@ + + + + + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+ + +
+ +
+ +
+ +
+ +
+
+
+
+ +
+ +
+
+
now playing...
+
+
+
---
+
---
+
---
+
status: unknown
+ +
\\\
+
\\\
+
\\\
+ +
+
+ +
+
+

+ SFM is an internet radio station, + radio transmission location in San Francisco, + and global underground platform for artists. +

+
+
+
+ +
+ +
+ + + + + + + diff --git a/player.js b/player.js new file mode 100644 index 0000000..e7ff69f --- /dev/null +++ b/player.js @@ -0,0 +1,156 @@ +//not using this but maybe if we can't get custom player to work +//https://playerjs.com/docs/en=code + +//use live-info to get the current show/track, which holds the show ID +var atpro_liveinfo = "https://sutrofm.airtime.pro/api/live-info-v2"; +var track_title, artist_name, show_title, player_status, status_color = new String(); +var bitrate, samplerate, track_chans, track_cuein, track_cueout = new Number(); +//track_len +//file_size +var desc, filename, image_url = new String; + +//var p_track_title, p_artist_name, p_show_title, p_bitrate, p_samplerate, p_track_len, p_track_chans, p_track_cuein, p_track_cueout, p_file_size, p_desc, p_filename; + +const audiostr = document.getElementById('player-widget'); +const btn = document.getElementById('button'); +btn.classList.add('play'); +let pressed = false; + +btn.addEventListener('click', function() { + pressed = !pressed; + + if(pressed){ + btn.classList.add('pause'); + btn.classList.remove('play'); + audiostr.play(); + } else { + btn.classList.add('play'); + btn.classList.remove('pause'); + audiostr.pause(); + + } + console.log('toggled:', pressed); +}); + +function xhrSuccess() { + this.callback.apply(this, this.arguments); +} + +function xhrError() { + console.error(this.statusText); +} + +function loadData(url, callback, ...args) { + const xhr = new XMLHttpRequest(); + xhr.callback = callback; + xhr.arguments = args; + xhr.onload = xhrSuccess; + xhr.onerror = xhrError; + xhr.open("GET", url, true); + xhr.send(null); +} + +function showText(){ + + var title = document.getElementById('track-name'); + var artist = document.getElementById('track-artist'); + var show = document.getElementById('track-show'); + var br = document.getElementById('bitrate'); + var sr = document.getElementById('samplerate'); + var chans = document.getElementById('trackchans'); + var stat = document.getElementById('status'); + //var fpath = document.getElementById('fname'); + //var len = document.getElementById('tracklen'); + //var fsize = document.getElementById('filesize'); + //var desc = document.getElementById('desc'); + + title.innerHTML = "episode: " + track_title; + artist.innerHTML = "host/dj: " + artist_name; + show.innerHTML = "SFM show title: " + show_title; + br.innerHTML = "bitrate: " + bitrate / 1000. + "Kbps"; + sr.innerHTML = "sample rate: " + samplerate / 1000. + "kHz"; + chans.innerHTML = "channels: " + track_chans; + stat.innerHTML = "status: " + player_status; + stat.style.color = status_color; + //fpath.innerHTML = "file name: " + filename; + //len.innerHTML = "file length: " + track_len; + //fsize.innerHTML = "file size: " + file_size * 0.000001 + " megabytes"; +} + +function showImage(){ + var img = document.getElementById('player-img').getElementsByTagName("img")[0]; + img.src = image_url; +} + + +function parseJSON(message) { + //console.log(`${message} ${this.responseText}`); + var result = this.responseText; + var jsonp = JSON.parse(result); + //var prev = jsonp.tracks.previous; + //var pmeta = prev.metadata; + image_url = "https://sketch.dabkitsch.com/custom_player/SUTROFM-logo.png" + + if(jsonp.tracks.current != null) { + //curr track main info + var track_curr = jsonp.tracks.current; + var show_curr = jsonp.shows.current; + //curr track metadata + var meta = track_curr.metadata; + + track_title = meta.track_title; + artist_name = meta.artist_name; + show_title = meta.album_title; + filename = meta.filepath; + + bitrate = meta.bit_rate; + samplerate = meta.sample_rate; + //track_len = meta.length; + track_chans = meta.channels; + track_cuein = meta.cuein; + track_cueout = meta.cueout; + //file_size = meta.filesize; + desc = meta.description; + + if(show_curr.auto_dj == true){ + player_status = "off-the-air rotation"; + status_color = "#7b44a2"; + + }else{ + var id = show_curr.id; + image_url = "https://sutrofm.airtime.pro/api/show-logo?id=" + show_curr.id; + player_status = "sfm live"; + console.log("image url: ", image_url, '\n'); + status_color = "#60af5e"; + } + + } else { + track_title = "--- no track currently"; + artist_name = "--- no artist currently"; + show_title = "--- no show currently"; + filename = "--- no file currently"; + player_status = "--- off the air" + status_color = "#898989"; + } + + //console.log("title: ", prev.track_title); + //title.innerHTML = title_text; + showText(); + showImage(); + +} + +function update_text(){ + //console.log("update text called\n"); + loadData(atpro_liveinfo, parseJSON, "JSON: "); + showText(); +} + + +if (document.readyState === "loading") { + document.addEventListener("DOMContentLoaded", loadData(atpro_liveinfo, parseJSON, "JSON: ")); +} else { + loadData(atpro_liveinfo, parseJSON, "JSON: "); +} + +setInterval(update_text, 2000); diff --git a/style.css b/style.css new file mode 100644 index 0000000..de4dc04 --- /dev/null +++ b/style.css @@ -0,0 +1,302 @@ + +h1, p { + font-family: 'Share Tech Mono', monospace; +} + +p { + /* color: lightcyan; */ + color: #1a3a4e; + font-size: 14px; +} + +/* ---------------------------------------------------------- */ + +/* flexbox */ + +#c-player { + display: flex; + flex-direction: column; + justify-content: space-between; +} + +#c-top { + display: flex; + flex-direction: row; + justify-content: flex-end; + gap: 1em; +} + +#c-bottom { + display: flex; + flex-direction: row; + justify-content: space-between; + gap: 1em; +} + +#c-bottom-right { + display: flex; + flex-direction: column; + justify-content: space-between; + gap: 1em; +} +#c-bottom-right-top { + display: flex; + flex-direction: row; + justify-content: space-between; + gap: 1em; +} +#c-bottom-right-bottom { +} + + +#player-heading { + display: flex; + margin-right: 20px; +} + + +/* ---------------------------------------------------------- */ + +.player-container { + margin: 10px; + padding: 30px; + /* border: 1px solid black; */ + background-color: #cecece; + border-radius: 15px 50px 30px; /* divergent radii */ +} + +.player-frame-bottom { + margin: 0px; + padding: 20px; + /* border: 2px solid green; */ + border-radius: 15px; + background-color: #FFFFFF; +} + +.player-frame-heading { + /* border: 2px solid grey; */ +} + + +/* ---------------------------------------------------------- */ + +#player-widget { + width: 100%; +} + +#button-frame { + display: flex; + + align-items: center; + justify-content: space-evenly; + + width: 150px; + height: 150px; + padding: 20px; + + border: 10px solid grey; + background: transparent; + position: relative; + + box-shadow: 0 0 0 5px rgb(255 255 255 / 25%); + box-shadow: 0 0 0 10px rgb(255 255 255 / 25%); + box-shadow: 0 0 0 15px rgb(255 255 255 / 25%); +} + +.play { + box-sizing: border-box; + height: 74px; + /* height: 150px; */ + border-color: transparent transparent transparent #000000; + transition: 100ms all ease; + will-change: border-width; + cursor: pointer; + border-style: solid; + border-width: 37px 0 37px 60px; + /* border-width: 75px 0 75px 135px; */ +} + +.pause { + box-sizing: border-box; + height: 74px; + /* height: 150px; */ + border-color: transparent transparent transparent #000000; + transition: 100ms all ease; + will-change: border-width; + cursor: pointer; + border-style: double; + border-width: 0px 0 0px 60px; + /* border-width 0px 0 0px 135px; */ +} +#button:hover { + border-color: transparent transparent transparent #404040; +} + +#player-img { + display: flex; + align-items: center; + flex: 2; + border-radius: 15px 80px 30px 160px; /* divergent radii */ +} + +#player-img img { + /* width: auto; */ + width: 300px; + height: 300px; +} + +#player-info { + flex: 2; + text-align: right; +} +#player-heading div { + flex: 1; + text-align: center; + color: #2f6086; +} +#player-heading div { + font-size: 25px; + +} +#infotext p { + text-align: center; +} + +.player-text { + font-family: 'Share Tech Mono', monospace; + font-size: 20px; +} +/* ---------------------------------------------------------- */ +/* top bar; fake toolbar */ + +/* close, minimize, fullscreen */ +#player-cl, #player-mm, #player-fs { + width: 35px; + height: 35px; + border-radius: 5px; +} + +#player-sbar { + width: 10%; + display: flex; + flex-direction: column; + justify-content: space-between; + padding-bottom: 20px; + padding-top: 10px; +} +#player-tbar { + width: 100%; + /* border-radius: 5px; */ + transition: all 0.5s; + -webkit-transition: all 0.5s; + padding-bottom: 10px; +} + +#player-tbar div { + height: 5px !important; + background: #fff; + margin: 7px 0px 7px 0px; + border-radius: 25px; + transition: all 0.5s; + -webkit-transition: all 0.5s; +} + +#player-tbar:hover div { + width: 100%; +} +#w1 { + width: 30%; +} +#w2 { + width: 50%; +} +#w3 { + width: 80%; +} + +.w-line { + width: 100%; + height: 5px; + background-color: #000000; +} + +#close, #mm, #fs { + position: relative; + +} +#close:after { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + + content: "\d7"; + font-size: 40px; + color: #000; + line-height: 35px; + text-align: center; +} +#mm:after { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + + content: "\29a5"; + font-size: 25px; + color: #000; + line-height: 33px; + text-align: center; +} +#fs:after { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + + content: "\29b5"; + font-size: 25px; + color: #000; + line-height: 35px; + text-align: center; +} + + +/* ---------------------------------------------------------- */ + + +#track-artist { + color: #565656; +} +#track-show, #status { + color: #7a7a7a; +} +.plabel { + color: #b2b2b2; +} + +/* ---------------------------------------------------------- */ + +.slider_container { + width: 100%; /* Width of the outside container */ +} + +.slider-square { + -webkit-appearance: none; + appearance: none; + width: 100%; + height: 25px; + background: #d3d3d3; + outline: none; + opacity: 0.7; + -webkit-transition: .2s; + transition: opacity 1.2s; +} + +.slider-square:hover { + opacity: 1; /* Fully shown on mouse-over */ +} +