kdy.ch
1<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
2 <xsl:output method="html"
3 doctype-system="about:legacy-compat"
4 encoding="UTF-8" />
5 <xsl:template match="/icestats">
6 <html xmlns="http://www.w3.org/1999/xhtml">
7 <head>
8 <meta charset="utf-8" />
9 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
10 <title>RRM - radio.rita.moe</title>
11 <link rel="icon" href="https://rita.moe/rita-icon.png" />
12 <link rel="stylesheet" type="text/css" href="style-status.css" />
13 <link rel="stylesheet" href="https://cdn.plyr.io/3.7.8/plyr.css" />
14 <script src="https://cdn.plyr.io/3.7.8/plyr.polyfilled.js"></script>
15 </head>
16 <body>
17 <div class="content">
18 <h1 id="header">radio.rita.moe</h1>
19 <!--mount point stats-->
20 <xsl:for-each select="source">
21 <xsl:choose>
22 <xsl:when test="listeners">
23 <div class="roundbox" data-mount="{@mount}">
24 <div class="mounthead">
25 <h3 class="mount">
26 <xsl:value-of select="server_name" />
27 <small>(<xsl:value-of select="@mount" />)</small>
28 </h3>
29 <div class="right">
30 <xsl:choose>
31 <xsl:when test="authenticator">
32 <a class="auth" href="/auth.xsl">Login</a>
33 </xsl:when>
34 <xsl:otherwise>
35 <ul class="mountlist">
36 <li>
37 <a class="play" href="{@mount}.m3u">M3U</a>
38 </li>
39 </ul>
40 </xsl:otherwise>
41 </xsl:choose>
42 </div>
43 </div>
44 <div class="mountcont">
45 <xsl:if test="server_type">
46 <div class="audioplayer">
47 <audio controls="controls" preload="none">
48 <source src="{@mount}" type="{server_type}" />
49 </audio>
50 </div>
51 </xsl:if>
52 <div class="playing">
53 <xsl:if test="artist">
54 <xsl:value-of select="artist" />
55 -
56 </xsl:if>
57 <xsl:value-of select="title" />
58 </div>
59 </div>
60 </div>
61 </xsl:when>
62 <xsl:otherwise>
63 <h3>
64 <xsl:value-of select="@mount" />
65 - Not Connected
66 </h3>
67 </xsl:otherwise>
68 </xsl:choose>
69 </xsl:for-each>
70 <div id="footer">
71 Powered by <a href="https://www.icecast.org">Icecast</a>
72 and <a href="https://www.liquidsoap.info">Liquidsoap</a>.
73 </div>
74 </div>
75 <script type="text/javascript">
76<![CDATA[
77 function np () {
78 document.querySelectorAll('div[data-mount]').forEach(e => {
79 fetch('https://radio.rita.moe/status-json.xsl?mount=' + e.dataset.mount)
80 .then(r => r.json())
81 .then(j => {
82 setTimeout(_ => {
83 e.querySelector('.playing').innerHTML = j.icestats.source.title
84 }, 3000)
85 })
86 })
87 }
88
89 setInterval(np, 5000)
90
91 document.querySelectorAll('audio').forEach(e => {
92 new Plyr(e, {
93 controls: ['play', 'current-time', 'mute', 'volume'],
94 invertTime: false,
95 toggleInvert: false
96 })
97 })
98]]>
99 </script>
100 </body>
101 </html>
102 </xsl:template>
103</xsl:stylesheet>