commit c5cf978a2feadd4111aff4cef55594c5284ebdce · kdy.ch/AutoRadio

+92 -11
status.xsl
···

       74
       74
        
               </div>

     

       75
       75
        
               <script type="text/javascript">

     

       76
       76
        
       <![CDATA[

     

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

     

       78
       78
       +
                 let lastTitle = ''

     

       79
       79
       +
                 // Store the current mount point

     

       80
       80
       +
                 let currentMount = ''

     

       81
       81
       +
                 // Store the last notification

     

       82
       82
       +
                 let lastNotification = null

     

       83
       83
       +
       

     

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

     

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

     

       86
       86
       +
                   const plyr = new Plyr(

     

       87
       87
       +
                     e.querySelector('audio'),

     

       88
       88
       +
                     {

     

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

     

       90
       90
       +
                       invertTime: false,

     

       91
       91
       +
                       toggleInvert: false,

     

       92
       92
       +
                     }

     

       93
       93
       +
                   )

     

       94
       94
       +
       

     

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

     

       96
       96
       +
                   plyr.on(

     

       97
       97
       +
                     'play',

     

       98
       98
       +
                     (_) => {

     

       99
       99
       +
                       currentMount = e.dataset.mount

     

       100
       100
       +
                       lastTitle = ''

     

       101
       101
       +
       

     

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

     

       103
       103
       +
                         if (a !== e) {

     

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

     

       105
       105
       +
                         }

     

       106
       106
       +
                       })

     

       107
       107
       +
                     }

     

       108
       108
       +
                   )

     

       109
       109
       +
       

     

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

     

       111
       111
       +
                   plyr.on(

     

       112
       112
       +
                     'pause',

     

       113
       113
       +
                     (_) => {

     

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

     

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

     

       116
       116
       +
                         currentMount = ''

     

       117
       117
       +
                       }

     

       118
       118
       +
       

     

       119
       119
       +
                       plyr.stop()

     

       120
       120
       +
                     }

     

       121
       121
       +
                   )

     

       122
       122
       +
                 })

     

       123
       123
       +
       

     

       77
       124
        
                 function np (wait) {

     

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

     

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

     

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

     

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

     

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

     

       81
       81
       -
                       .then(j => {

     

       82
       82
       -
                         setTimeout(_ => {

     

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

     

       129
       129
       +
                       .then((j) => {

     

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

     

       131
       131
       +
                         setTimeout((_) => {

     

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

     

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

     

       134
       134
       +
                             // Update the now playing text

     

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

     

       136
       136
       +
       

     

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

     

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

     

       139
       139
       +
                               // Update the last title

     

       140
       140
       +
                               lastTitle = j.icestats.source.title

     

       141
       141
       +
       

     

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

     

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

     

       144
       144
       +
                                 lastNotification = new Notification(

     

       145
       145
       +
                                   'RRM - Now Playing',

     

       146
       146
       +
                                   {

     

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

     

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

     

       149
       149
       +
                                     renotify: true,

     

       150
       150
       +
                                     requireInteraction: false,

     

       151
       151
       +
                                     tag: 'now-playing',

     

       152
       152
       +
                                   }

     

       153
       153
       +
                                 )

     

       154
       154
       +
                               }

     

       155
       155
       +
                             }

     

       85
       156
        
                           } else {

     

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

     

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

     

       87
       159
        
                           }

     

       88
       160
        
                         }, wait ?? 3000)

     
···

       90
       162
        
                   })

     

       91
       163
        
                 }

     

       92
       164
        
       

     

       165
       165
       +
                 // Enable interval to fetch now playing data

     

       93
       166
        
                 setInterval(np, 5000)

     

       167
       167
       +
                 // And run it immediately on page load

     

       94
       168
        
                 np(0)

     

       95
       169
        
       

     

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

     

       97
       97
       -
                   new Plyr(e, {

     

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

     

       99
       99
       -
                     invertTime: false,

     

       100
       100
       -
                     toggleInvert: false

     

       101
       101
       -
                   })

     

       102
       102
       -
                 })

     

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

     

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

     

       172
       172
       +
                   Notification.requestPermission()

     

       173
       173
       +
                 }

     

       174
       174
       +
       

     

       175
       175
       +
                 document.addEventListener(

     

       176
       176
       +
                   'visibilitychange',

     

       177
       177
       +
                   () => {

     

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

     

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

     

       180
       180
       +
                       lastNotification?.close()

     

       181
       181
       +
                     }

     

       182
       182
       +
                   }

     

       183
       183
       +
                 )

     

       103
       184
        
       ]]>

     

       104
       185
        
               </script>

     

       105
       186
        
             </body>