--- /dev/null
+<!DOCTYPE HTML><html xmlns="http://www.w3.org/1999/xhtml">
+<html lang="en">
+
+<head>
+ <meta charset=utf-8>
+ <link rel="preconnect" href="https://fonts.googleapis.com">
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+ <link href="https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap" rel="stylesheet">
+ <link href="https://fonts.googleapis.com/css2?family=Jost:ital,wght@1,200&display=swap" rel="stylesheet">
+ <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+ <!-- <div class="player-container" id="c-player"> -->
+ <div id="c-player">
+ <div class="player-container" id="c-top">
+ <div class="player-frame-heading" id="player-tbar">
+ <div id="w1"></div>
+ <div id="w2"></div>
+ <div id="w3"></div>
+ </div>
+ <div class="player-frame-heading" id="player-mm"><div id="mm"></div></div>
+ <div class="player-frame-heading" id="player-fs"><div id="fs"></div></div>
+ <div class="player-frame-heading" id="player-cl"><div id="close"></div></div>
+ </div>
+
+ <div class="player-container" id="c-bottom">
+
+ <div class="player-frame-bottom" id="player-img">
+ <img src="SUTROFM-logo.png">
+ </div>
+ <div class="player-frame-bottom" id="c-right">
+ <div id="player-maintext">
+ <div id="player-heading">
+ <div>now playing:</div>
+ </div>
+ <div id="player-info" class="c-right-topright">
+ <div id="track-show">---</div>
+ <div id="track-artist">---</div>
+ <div id="track-name">---</div>
+ <div id="status">status: unknown</div>
+
+ <div class="plabel" id="bitrate">\\\</div>
+ <div class="plabel" id="samplerate">\\\</div>
+ <div class="plabel" id="trackchans">\\\</div>
+ <!-- <div class="plabel" id="desc">\\\</div> -->
+ </div>
+ </div>
+ <div id="c-bottom-right">
+ <div class="player-frame-bottom" id="p-widget">
+ <button id='button'></button>
+ <audio id="player-widget">
+ <source src="https://sutrofm.out.airtime.pro:8000/sutrofm_a" type="audio/mpeg">
+ oops - your browser doesn't support the audio tag. dang.
+ </audio>
+ </div>
+ <div class="player-frame-bottom" id="infotext">
+ <p>
+ SFM is an internet radio station,
+ radio transmission location in San Francisco,
+ and global underground platform for artists.
+ </p>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ </div>
+
+ <script type="text/javascript" src="player.js"></script>
+</body>
+
+</html>
+
+<!--
+<div class="slider_container">
+ <input type="range" min="1" max="100" value="20" class="slider-square" id="myRange">
+</div>
+-->
--- /dev/null
+<!DOCTYPE HTML><html xmlns="http://www.w3.org/1999/xhtml">
+<html lang="en">
+
+<head>
+ <meta charset=utf-8>
+ <link rel="preconnect" href="https://fonts.googleapis.com">
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+ <link href="https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap" rel="stylesheet">
+ <link href="https://fonts.googleapis.com/css2?family=Jost:ital,wght@1,200&display=swap" rel="stylesheet">
+ <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+ <div class="player-container" id="c-player">
+ <div id="c-top">
+ <div class="player-frame-heading" id="player-tbar">
+ <div id="w1"></div>
+ <div id="w2"></div>
+ <div id="w3"></div>
+ </div>
+ <div class="player-frame-heading" id="player-sbar">
+ <div class="w-line"></div>
+ <div class="w-line"></div>
+ <div class="w-line"></div>
+ </div>
+
+ <!--
+ <div class="player-frame-heading" id="player-mm"><div id="mm"></div></div>
+ <div class="player-frame-heading" id="player-fs"><div id="fs"></div></div>
+ <div class="player-frame-heading" id="player-cl"><div id="close"></div></div>
+ -->
+ </div>
+
+ <div id="c-bottom">
+
+ <div class="player-frame-bottom" id="player-img">
+ <img src="SUTROFM-logo.png">
+ </div>
+
+ <div id="c-bottom-right">
+ <div class="player-frame-bottom" id="c-bottom-right-top">
+ <div id="p-widget">
+ <div id='button-frame'>
+ <button id='button'></button>
+ </div>
+ <audio id="player-widget">
+ <source src="https://sutrofm.out.airtime.pro:8000/sutrofm_a" type="audio/mpeg">
+ oops - your browser doesn't support the audio tag. dang.
+ </audio>
+ </div>
+ <div class="player-text" id="player-heading">
+ <div>now playing...</div>
+ </div>
+ <div class="player-text" id="player-info">
+ <div id="track-show">---</div>
+ <div id="track-artist">---</div>
+ <div id="track-name">---</div>
+ <div id="status">status: unknown</div>
+
+ <div class="plabel" id="bitrate">\\\</div>
+ <div class="plabel" id="samplerate">\\\</div>
+ <div class="plabel" id="trackchans">\\\</div>
+ <!-- <div class="plabel" id="desc">\\\</div> -->
+ </div>
+ </div>
+
+ <div class="player-frame-bottom" id="c-bottom-right-bottom">
+ <div id="infotext">
+ <p>
+ SFM is an internet radio station,
+ radio transmission location in San Francisco,
+ and global underground platform for artists.
+ </p>
+ </div>
+ </div>
+ </div>
+
+ </div>
+
+ </div>
+
+ <script type="text/javascript" src="player.js"></script>
+</body>
+
+</html>
+
+<!--
+<div class="slider_container">
+ <input type="range" min="1" max="100" value="20" class="slider-square" id="myRange">
+</div>
+-->
--- /dev/null
+//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);
--- /dev/null
+
+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 */
+}
+
git.dabkitsch.com / sfm-player.git / commitdiff
