From 538047c5ac88fc457b8e1658416184f411cadbf1 Mon Sep 17 00:00:00 2001 From: kaotisk Date: Sat, 9 Nov 2024 10:00:11 +0200 Subject: Visual rework --- client/index.html | 358 ++++++++++++++++++++++++++++-------------------------- 1 file changed, 188 insertions(+), 170 deletions(-) (limited to 'client/index.html') 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
         

         
     
-- 
cgit v1.2.3