commit c5cf978a2feadd4111aff4cef55594c5284ebdce · kdy.ch/AutoRadio

+92 -11

status.xsl

···

       74
        
               </div>

     

       75
        
               <script type="text/javascript">

     

       76
        
       <![CDATA[

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       77
        
                 function np (wait) {

     

       78
       -
                   document.querySelectorAll('div[data-mount]').forEach(e => {

     

       0
        
       
     

       79
        
                     fetch('./status-json.xsl?mount=' + e.dataset.mount)

     

       80
       -
                       .then(r => r.json())

     

       81
       -
                       .then(j => {

     

       82
       -
                         setTimeout(_ => {

     

       0
        
       
     

       0
        
       
     

       83
        
                           if (j.icestats.source.title) {

     

       0
        
       
     

       84
        
                             e.querySelector('.playing').innerHTML = j.icestats.source.title

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       85
        
                           } else {

     

       0
        
       
     

       86
        
                             e.querySelector('.playing').innerHTML = ''

     

       87
        
                           }

     

       88
        
                         }, wait ?? 3000)

     
···

       90
        
                   })

     

       91
        
                 }

     

       92
        
       

     

       0
        
       
     

       93
        
                 setInterval(np, 5000)

     

       0
        
       
     

       94
        
                 np(0)

     

       95
        
       

     

       96
       -
                 document.querySelectorAll('audio').forEach(e => {

     

       97
       -
                   new Plyr(e, {

     

       98
       -
                     controls: ['play', 'current-time', 'mute', 'volume'],

     

       99
       -
                     invertTime: false,

     

       100
       -
                     toggleInvert: false

     

       101
       -
                   })

     

       102
       -
                 })

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       103
        
       ]]>

     

       104
        
               </script>

     

       105
        
             </body>

···

       74
        
               </div>

     

       75
        
               <script type="text/javascript">

     

       76
        
       <![CDATA[

     

       77
       +
                 // We'll store the last title of the current mount point to check for changes

     

       78
       +
                 let lastTitle = ''

     

       79
       +
                 // Store the current mount point

     

       80
       +
                 let currentMount = ''

     

       81
       +
                 // Store the last notification

     

       82
       +
                 let lastNotification = null

     

       83
       +
       

     

       84
       +
                 // On every audio element, create a new Plyr instance

     

       85
       +
                 document.querySelectorAll('div[data-mount]').forEach((e) => {

     

       86
       +
                   const plyr = new Plyr(

     

       87
       +
                     e.querySelector('audio'),

     

       88
       +
                     {

     

       89
       +
                       controls: ['play', 'current-time', 'mute', 'volume'],

     

       90
       +
                       invertTime: false,

     

       91
       +
                       toggleInvert: false,

     

       92
       +
                     }

     

       93
       +
                   )

     

       94
       +
       

     

       95
       +
                   // When we start playing, store current mount point, clear last title and stop all other players

     

       96
       +
                   plyr.on(

     

       97
       +
                     'play',

     

       98
       +
                     (_) => {

     

       99
       +
                       currentMount = e.dataset.mount

     

       100
       +
                       lastTitle = ''

     

       101
       +
       

     

       102
       +
                       document.querySelectorAll('[data-mount]').forEach((a) => {

     

       103
       +
                         if (a !== e) {

     

       104
       +
                           a.querySelector('audio').stop()

     

       105
       +
                         }

     

       106
       +
                       })

     

       107
       +
                     }

     

       108
       +
                   )

     

       109
       +
       

     

       110
       +
                   // When we pause, clear current mount point and stop all data

     

       111
       +
                   plyr.on(

     

       112
       +
                     'pause',

     

       113
       +
                     (_) => {

     

       114
       +
                       // To prevent overlaps, we only clear the current mount if it's the same as the one we're pausing

     

       115
       +
                       if (currentMount === e.dataset.mount) {

     

       116
       +
                         currentMount = ''

     

       117
       +
                       }

     

       118
       +
       

     

       119
       +
                       plyr.stop()

     

       120
       +
                     }

     

       121
       +
                   )

     

       122
       +
                 })

     

       123
       +
       

     

       124
        
                 function np (wait) {

     

       125
       +
                   // Find all mount points and fetch their status

     

       126
       +
                   document.querySelectorAll('div[data-mount]').forEach((e) => {

     

       127
        
                     fetch('./status-json.xsl?mount=' + e.dataset.mount)

     

       128
       +
                       .then((r) => r.json())

     

       129
       +
                       .then((j) => {

     

       130
       +
                         // We delay the update to match the usual delay of the audio stream

     

       131
       +
                         setTimeout((_) => {

     

       132
       +
                           // The title may not be present, so we check for it

     

       133
        
                           if (j.icestats.source.title) {

     

       134
       +
                             // Update the now playing text

     

       135
        
                             e.querySelector('.playing').innerHTML = j.icestats.source.title

     

       136
       +
       

     

       137
       +
                             // If the title has changed and this is our current playing mount

     

       138
       +
                             if (lastTitle !== j.icestats.source.title && currentMount === e.dataset.mount) {

     

       139
       +
                               // Update the last title

     

       140
       +
                               lastTitle = j.icestats.source.title

     

       141
       +
       

     

       142
       +
                               // If we have permission, send a notification

     

       143
       +
                               if ('Notification' in window && Notification.permission === 'granted') {

     

       144
       +
                                 lastNotification = new Notification(

     

       145
       +
                                   'RRM - Now Playing',

     

       146
       +
                                   {

     

       147
       +
                                     body: j.icestats.source.title,

     

       148
       +
                                     icon: 'https://rita.moe/rita-icon.png',

     

       149
       +
                                     renotify: true,

     

       150
       +
                                     requireInteraction: false,

     

       151
       +
                                     tag: 'now-playing',

     

       152
       +
                                   }

     

       153
       +
                                 )

     

       154
       +
                               }

     

       155
       +
                             }

     

       156
        
                           } else {

     

       157
       +
                             // If the title is not present, clear the now playing text

     

       158
        
                             e.querySelector('.playing').innerHTML = ''

     

       159
        
                           }

     

       160
        
                         }, wait ?? 3000)

     
···

       162
        
                   })

     

       163
        
                 }

     

       164
        
       

     

       165
       +
                 // Enable interval to fetch now playing data

     

       166
        
                 setInterval(np, 5000)

     

       167
       +
                 // And run it immediately on page load

     

       168
        
                 np(0)

     

       169
        
       

     

       170
       +
                 // Request notification permission if it's still default

     

       171
       +
                 if ('Notification' in window && Notification.permission === 'default') {

     

       172
       +
                   Notification.requestPermission()

     

       173
       +
                 }

     

       174
       +
       

     

       175
       +
                 document.addEventListener(

     

       176
       +
                   'visibilitychange',

     

       177
       +
                   () => {

     

       178
       +
                     // If the page is visible, close the last notification

     

       179
       +
                     if (document.visibilityState === 'visible') {

     

       180
       +
                       lastNotification?.close()

     

       181
       +
                     }

     

       182
       +
                   }

     

       183
       +
                 )

     

       184
        
       ]]>

     

       185
        
               </script>

     

       186
        
             </body>