From 538047c5ac88fc457b8e1658416184f411cadbf1 Mon Sep 17 00:00:00 2001 From: kaotisk Date: Sat, 9 Nov 2024 10:00:11 +0200 Subject: Visual rework --- README | 4 + client/css/styles.css | 53 ++++++- client/index.html | 358 +++++++++++++++++++++++--------------------- client/js/radio_emulator.js | 10 +- 4 files changed, 249 insertions(+), 176 deletions(-) diff --git a/README b/README index a1ca48d..f836f87 100644 --- a/README +++ b/README @@ -65,3 +65,7 @@ timespace over and over. Ideally, if "Listening at:" and "Show playback:" have the same value then you are in sync! + +Extra +----- +Image generation from each hash of a show/mixtape metadata file. diff --git a/client/css/styles.css b/client/css/styles.css index 2d05d0e..5dce3f4 100644 --- a/client/css/styles.css +++ b/client/css/styles.css @@ -1,3 +1,8 @@ +* { + padding: 0px; + margin: 0; +} + body { background: black; color: lightgreen; @@ -28,6 +33,7 @@ div { .div-groups-row { display: flex; flex-direction: row; + align-items: center; } progress { @@ -46,8 +52,15 @@ button { background:black; color:red; border: solid 2px; + width: 100%; } +.no-break { + display: flex; + flex-direction: row; + flex-wrap: nowrap; + word-break: none; +} button { background:black; @@ -83,11 +96,49 @@ summary:hover { color: black; } +.start-top { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; + align-items: flex-start; +} + +.previously-played { + flex-direction: column-reverse; + overflow-y: auto; + height: 40vh; + gap: 5px; +} + +.div-row { + flex-direction: row; + align-items: center; + justify-content: center; + flex-wrap: wrap; +} + +.previously-played img { + width: 48px; +} +.previously-played div { + border-color: purple; + border-style: solid; + border-width: 1px; +} + +.div-inline-reverse { + display: flex; + flex-direction: row-reverse; + flex-wrap: wrap; + align-items: center; + justify-content: space-evenly; +} .div-inline { display: flex; flex-direction: row; flex-wrap: wrap; - align-items: baseline; + align-items: center; justify-content: space-evenly; } diff --git a/client/index.html b/client/index.html index e85a411..9c9d90b 100644 --- a/client/index.html +++ b/client/index.html @@ -15,179 +15,197 @@ by Kaotisk Hund, for Arching Kaos and for everyone. -
- Info to get you started -

Notice

-

- If you are visiting for the first time, you might need to - "Allow Audio" first. Please do and refresh the page. -

-

About

-

- This is a "Radio Station Emulator". We create lists with - shows to be played, but since we are not doing streaming of - the playlists, we offer another way of "tuning in". -

-

- Providing the time a list started playing and having - pre-calculated the starting timestamps of each show relevant - to the list start timestamp, we can calculate which show is - on and what its current time of playing is. -

-

- Ultimately, you are hearing what we would be streaming, as - you would do for a regular radio station. -

-

Steps

-
    -
  1. - First, your browser is going to ask our server here, - what is the current list that plays right now. It will - get a response and will fetch that list. -
    2. -
  2. - Based on properties of the list overall and the time of - visit, your browser will start comparing each show's - properties found in the list, to figure the relative - time of yours on the list. A progress bar labeled "Live - progress" will be indicating the correct time on the - show. -
    3. -
  3. - Having figured out the show that is playing, it will go - and download the whole show. Progress of that would be - observable via the "Download progress" bar below. -
    4. -
  4. - Upon completion of the download, the "Sync" button is - auto pressed and the player start playing the show from - the calculated second it calculated previously. -
    5. -
-

Notes

- -
-
-

Download progress:

- -
-
-

Live progress:

- -
- -
-
-

Listening at:

-

+
+
+
+
+
+ + + + + + + + + + + + + + + + + + +
Artist
Title
Starts On (ms)
Duration (s)
+
+
+
+
+ +
+
+ +
+ Details +
+

Download progress:

+ +
+
+

Live progress:

+ +
+
+
+

Listening at:

+

+
+
+

Show playback:

+
+

+

/

+

+
+
+
+
+
+
+
+
+
-
-

Show playback:

-

-

/

-

+
+

More details

+
+ Info to get you started +

Notice

+

+ If you are visiting for the first time, you might need to + "Allow Audio" first. Please do and refresh the page. +

+

About

+

+ This is a "Radio Station Emulator". We create lists with + shows to be played, but since we are not doing streaming of + the playlists, we offer another way of "tuning in". +

+

+ Providing the time a list started playing and having + pre-calculated the starting timestamps of each show relevant + to the list start timestamp, we can calculate which show is + on and what its current time of playing is. +

+

+ Ultimately, you are hearing what we would be streaming, as + you would do for a regular radio station. +

+

Steps

+
    +
  1. + First, your browser is going to ask our server here, + what is the current list that plays right now. It will + get a response and will fetch that list. +
    2. +
  2. + Based on properties of the list overall and the time of + visit, your browser will start comparing each show's + properties found in the list, to figure the relative + time of yours on the list. A progress bar labeled "Live + progress" will be indicating the correct time on the + show. +
    3. +
  3. + Having figured out the show that is playing, it will go + and download the whole show. Progress of that would be + observable via the "Download progress" bar below. +
    4. +
  4. + Upon completion of the download, the "Sync" button is + auto pressed and the player start playing the show from + the calculated second it calculated previously. +
    5. +
+

Notes

+
    +
  • + Sometimes, you might need to press the "Sync" button + more than once. That's mostly due to bandwidth + capabilities of both the server and the client. The + "tune" would be right if you press it multiple times and + land near the same timespace over and over. +
    • +
  • + Ideally, if "Listening at:" and "Show playback:" have + the same value then you are in sync! +
    • +
+
+
+ Sync info +
+ + + + + + + + + + + + + + + + + +
Time of visit (ms)
Time elapsed since visited (s)
List started on (ms)
List duration (s)
+

Calculations

+ + + + + + + + + + + + + + + + + + + + + +
Times Fully Played
Times Played
Dt = TP - TFP
Delta time
Initial "tune in" time (s)
+
+
+
+ Data segments +

Hash of list

+ 

+                        
List info (JSON)

+                        

+                        
Hash of current show

+                        

+                        
Show info (JSON)

+                        

+                        

+                            Data
+                        

+                    

                 

             

-            

-                
-            

-        

-        

-            
Current "show" info

-            

-                
-                
-                    
-                        
-                        
-                    
-                    
-                        
-                        
-                    
-                    
-                        
-                        
-                    
-                    
-                        
-                        
-                    
-                
Artist
Title
Starts On (ms)
Duration (s)

-            

-            
Sync info

-            

-                
-                    
-                        
-                        
-                    
-                    
-                        
-                        
-                    
-                    
-                        
-                        
-                    
-                    
-                        
-                        
-                    
-                
Time of visit (ms)
Time elapsed since visited (s)
List started on (ms)
List duration (s)

-                
Calculations

-                
-                    
-                        
-                        
-                    
-                    
-                        
-                        
-                    
-                    
-                        
-                        
-                    
-                    
-                        
-                        
-                    
-                    
-                        
-                        
-                    
-                
Times Fully Played
Times Played
Dt = TP - TFP
Delta time
Initial "tune in" time (s)

-            
Previously played (if any)

-            

-            

-            
Raw data

-            

-                Data segments
-                
Hash of list

-                

-                
List info (JSON)

-                

-                
Hash of current show

-                

-                
Show info (JSON)

-                

-            

-        

-        

-            Data
         

         
     
diff --git a/client/js/radio_emulator.js b/client/js/radio_emulator.js
index 2e0b5de..1bb9b76 100644
--- a/client/js/radio_emulator.js
+++ b/client/js/radio_emulator.js
@@ -29,7 +29,7 @@
 //   - list
 //   - show_info
 //
-var debugMode = true;
+var debugMode = false;
 const apiURL = "http://z.kaotisk-hund.com:8010/";
 const version = "v0";
 const listRequest = `${apiURL}${version}/list`
@@ -482,10 +482,10 @@ function createImage(pixels, hash, what)
                 for (var k = 0; k < radius; ++k)
                 {
                     var subpixel = pixel_to_be_enhanced;
-                    if ( i > radius - Math.floor(radius/2) )
-                    {
-                        debugLog(i);
-                    }
+                    // if ( i > radius - Math.floor(radius/2) )
+                    // {
+                    //     debugLog(i);
+                    // }
                     c = (x*radius)+k;
                     r = (y*radius)+i;
                     context.fillStyle = subpixel;
-- 
cgit v1.2.3