Radio Player<\/title>\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.1\/css\/all.min.css\">\n <style>\n body {\n margin: 0;\n font-family: system-ui,-apple-system,\"Segoe UI\",Roboto,sans-serif;\n background: #0f1116;\n color: #111;\n }\nfooter {\n position: relative;\n z-index: 2;\n text-align: center;\n padding: 20px;\n font-size: 13px;\n color: #ccc;\n}\nfooter a {\n color: #ccc;\n text-decoration: none;\n}\nfooter a:hover {\n color: #fff;\n}\n\n \/* ===== Background Blur ===== *\/\n .bg-blur {\n position: absolute;\n top: 0; left: 0; right: 0; bottom: 0;\n background-size: cover;\n background-position: center;\n filter: blur(28px) brightness(0.5);\n transform: none;\n z-index: 0;\n }\n .bg-tint {\n position: absolute;\n top: 0; left: 0; right: 0; bottom: 0;\n background: rgba(15,17,22,0.01);\n z-index: 1;\n }\n\n \/* ===== Top Bar ===== *\/\n .top-bar {\n position: relative;\n z-index: 2;\n display: flex;\n justify-content: space-between;\n align-items: center;\n background: rgba(0,0,0,0.65);\n color: #fff;\n font-weight: 700;\n padding: 12px 20px;\n }\n .top-bar button {\n background: #2563eb;\n border: none;\n border-radius: 999px;\n color: #fff;\n padding: 8px 14px;\n cursor: pointer;\n }\n\n \/* ===== Hero Artwork ===== *\/\n .hero {\n position: relative;\n z-index: 2;\n display: flex;\n justify-content: center;\n margin: 40px 0;\n }\n .artwork {\n position: relative;\n width: 90%;\n max-width: 500px;\n border-radius: 16px;\n overflow: hidden;\n box-shadow: 0 10px 28px rgba(0,0,0,.45);\n }\n .artwork img {\n width: 100%;\n display: block;\n }\n .overlay {\n position: absolute;\n bottom: 0;\n width: 100%;\n background: linear-gradient(transparent, rgba(0,0,0,0.75));\n color: #fff;\n padding: 20px;\n }\n .overlay .label {\n font-size: 12px;\n font-weight: 700;\n letter-spacing: .05em;\n opacity: .85;\n }\n .overlay .artist {\n font-size: 20px;\n font-weight: 700;\n }\n .overlay .title {\n font-size: 15px;\n opacity: .9;\n }\n .play-overlay {\n position: absolute;\n top: 50%; left: 50%;\n transform: translate(-50%,-50%);\n background: rgba(0,0,0,.6);\n border-radius: 50%;\n width: 80px; height: 80px;\n display: flex; justify-content: center; align-items: center;\n cursor: pointer;\n }\n .play-overlay svg {\n width: 36px; height: 36px;\n fill: #fff;\n }\n\n \/* ===== Mid Under Bar ===== *\/\n .under-bar {\n position: relative;\n z-index: 2;\n background: rgba(0,0,0,0.65);\n color: #fff;\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 12px 20px;\n }\n .under-bar .socials {\n display: flex;\n gap: 16px;\n font-size: 20px;\n }\n .under-bar a {\n color: #fff;\n text-decoration: none;\n }\n\n \/* ===== Main Content ===== *\/\n .main {\n position: relative;\n z-index: 2;\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 30px;\n max-width: 1200px;\n margin: 30px auto;\n padding: 0 20px;\n }\n @media (max-width: 768px) {\n .main { grid-template-columns: 1fr; }\n }\n\n .card {\n background: #fff;\n border-radius: 12px;\n box-shadow: 0 4px 12px rgba(0,0,0,.12);\n overflow: hidden;\n }\n .card h3 {\n margin: 0;\n padding: 14px 18px;\n font-size: 15px;\n border-bottom: 1px solid #eee;\n background: #f9fafb;\n }\n\n \/* ===== Recently Played ===== *\/\n .track {\n display: flex;\n align-items: center;\n padding: 10px 16px;\n gap: 12px;\n border-bottom: 1px solid #f1f1f1;\n }\n .track img {\n width: 48px; height: 48px;\n border-radius: 6px;\n object-fit: cover;\n }\n .track .meta { display: flex; flex-direction: column; }\n .track .meta strong { font-size: 14px; }\n .track .meta span { font-size: 12px; color: #555; }\n\n \/* ===== Inbox Styling (white) ===== *\/\n .inbox-form {\n padding: 16px;\n }\n .inbox-form .row { display: grid; gap: 12px; margin-bottom: 12px; }\n .inbox-form .two { grid-template-columns: 1fr 1fr; }\n @media (max-width: 640px) { .inbox-form .two { grid-template-columns: 1fr; } }\n\n .inbox-form label { font-size: 13px; font-weight: 600; color: #333; display:block; margin-bottom:4px; }\n .inbox-form input, .inbox-form textarea {\n width: 100%; padding: 10px; border: 1px solid #ccc;\n border-radius: 8px; font-size: 14px;\n }\n .inbox-form textarea { min-height: 120px; resize: vertical; }\n\n .inbox-form .actions { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }\n .inbox-form .consent { display:flex; align-items: flex-start; gap: 8px; font-size: 13px; color:#555; flex:1; }\n .inbox-form button {\n background: #2563eb; color:#fff; border:none; border-radius: 8px;\n padding: 10px 18px; font-weight:700; cursor:pointer;\n }\n .inbox-form button:hover { filter: brightness(1.1); }\n .inbox-form .status { margin-top: 8px; font-size: 13px; font-weight:600; }\n .inbox-form .ok { color: #16a34a; }\n .inbox-form .err { color: #dc2626; }\n <\/style>\n<\/head>\n<body>\n \n <div class=\"bg-blur\" id=\"bgBlur\"><\/div>\n <div class=\"bg-tint\"><\/div>\n\n \n <div class=\"top-bar\">\n <div class=\"station\"><i class=\"fas fa-broadcast-tower\"><\/i> David Lewis Live<\/div>\n <button id=\"topPlay\">\u25b6<\/button>\n <\/div>\n\n \n <div class=\"hero\">\n <div class=\"artwork\">\n <img decoding=\"async\" id=\"cover\" src=\"https:\/\/via.placeholder.com\/600x600?text=Loading\" alt=\"\">\n <div class=\"play-overlay\" id=\"playOverlay\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\"><path d=\"M8 5v14l11-7z\"\/><\/svg>\n <\/div>\n <div class=\"overlay\">\n <div class=\"label\">NOW PLAYING<\/div>\n <div class=\"artist\" id=\"artist\">Artist<\/div>\n <div class=\"title\" id=\"title\">Track<\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"under-bar\">\n <div class=\"socials\">\n <a href=\"#\"><i class=\"fab fa-facebook-f\"><\/i><\/a>\n <a href=\"#\"><i class=\"fab fa-x-twitter\"><\/i><\/a>\n <a href=\"#\"><i class=\"fab fa-instagram\"><\/i><\/a>\n <\/div>\n <a href=\"https:\/\/embedded.autopod.xyz\/stream\/270\" target=\"_blank\">Listen Again \u2197<\/a>\n <\/div>\n\n \n <div class=\"main\">\n \n <div class=\"card\">\n <h3>Recently Played<\/h3>\n <div id=\"recent\"><\/div>\n <\/div>\n\n \n <div class=\"card\">\n <h3>Studio Inbox<\/h3>\n <div class=\"inbox-form\">\n <form id=\"afForm\" novalidate>\n <div class=\"row two\">\n <div>\n <label for=\"afName\">Name<\/label>\n <input id=\"afName\" name=\"name\" required \/>\n <\/div>\n <div>\n <label for=\"afEmail\">Email<\/label>\n <input id=\"afEmail\" name=\"email\" type=\"email\" required \/>\n <\/div>\n <\/div>\n <div class=\"row\">\n <div>\n <label for=\"afMsg\">Message<\/label>\n <textarea id=\"afMsg\" name=\"message\" required><\/textarea>\n <\/div>\n <\/div>\n <div class=\"actions\">\n <label class=\"consent\">\n <input id=\"afConsent\" type=\"checkbox\" \/>\n <span>I consent to my email being shared with the station (for replies).<\/span>\n <\/label>\n <button id=\"afSend\" type=\"submit\">Send Message<\/button>\n <\/div>\n <div id=\"afStatus\" class=\"status\" aria-live=\"polite\"><\/div>\n <\/form>\n <\/div>\n <\/div>\n <\/div>\n\n <audio id=\"audio\" src=\"https:\/\/stream4.themediasite.co.uk:8142\/stream\"><\/audio>\n\n <script>\n const audio = document.getElementById('audio');\n const playOverlay = document.getElementById('playOverlay');\n const topPlay = document.getElementById('topPlay');\n const cover = document.getElementById('cover');\n const bgBlur = document.getElementById('bgBlur');\n const artistEl = document.getElementById('artist');\n const titleEl = document.getElementById('title');\n const recentEl = document.getElementById('recent');\n\n async function fetchNowPlaying() {\n const res = await fetch('https:\/\/stream4.themediasite.co.uk:2020\/json\/stream\/dllive');\n const data = await res.json();\n const np = data.nowplaying || '';\n const parts = np.split(' - ');\n const title = parts[0] || np;\n const artist = parts[1] || '';\n\n titleEl.textContent = title;\n artistEl.textContent = artist;\n\n fetch(`https:\/\/itunes.apple.com\/search?term=${encodeURIComponent(np)}&entity=song&limit=1`)\n .then(r => r.json())\n .then(r => {\n if (r.results && r.results[0]) {\n const art = r.results[0].artworkUrl100.replace('100x100', '600x600');\n cover.src = art;\n bgBlur.style.backgroundImage = `url(${art})`;\n }\n });\n }\n\n async function fetchRecentlyPlayed() {\n const res = await fetch('https:\/\/stream4.themediasite.co.uk:2020\/json\/stream\/dllive');\n const data = await res.json();\n recentEl.innerHTML = '';\n data.trackhistory.forEach(track => {\n fetch(`https:\/\/itunes.apple.com\/search?term=${encodeURIComponent(track)}&entity=song&limit=1`)\n .then(r => r.json())\n .then(r => {\n let img = 'https:\/\/via.placeholder.com\/100?text=\u266a';\n if (r.results && r.results[0]) img = r.results[0].artworkUrl100;\n const parts = track.split(' - ');\n const tTitle = parts[0] || track;\n const tArtist = parts[1] || '';\n const div = document.createElement('div');\n div.className = 'track';\n div.innerHTML = `<img decoding=\"async\" src=\"${img}\"><div class=\"meta\"><strong>${tArtist}<\/strong><span>${tTitle}<\/span><\/div>`;\n recentEl.appendChild(div);\n });\n });\n }\n\n \/\/ Intervals\n setInterval(fetchNowPlaying, 15000); \/\/ update now playing every 15s\n setInterval(fetchRecentlyPlayed, 150000); \/\/ update recently played every 2.5 mins\n\n \/\/ Initial load\n fetchNowPlaying();\n fetchRecentlyPlayed();\n\n function togglePlay() {\n if (audio.paused) {\n audio.play();\n topPlay.textContent = \"\u275a\u275a\";\n playOverlay.innerHTML = '<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\"><path d=\"M6 19h4V5H6zm8-14v14h4V5z\"\/><\/svg>';\n } else {\n audio.pause();\n topPlay.textContent = \"\u25b6\";\n playOverlay.innerHTML = '<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\"><path d=\"M8 5v14l11-7z\"\/><\/svg>';\n }\n }\n playOverlay.addEventListener('click', togglePlay);\n topPlay.addEventListener('click', togglePlay);\n\n \/\/ Inbox handling\n const afForm = document.getElementById('afForm');\n afForm.addEventListener('submit', async (e)=>{\n e.preventDefault();\n const name = document.getElementById('afName').value.trim();\n const email = document.getElementById('afEmail').value.trim();\n const msg = document.getElementById('afMsg').value.trim();\n const consent = document.getElementById('afConsent').checked;\n const status = document.getElementById('afStatus');\n status.textContent = \"Sending...\";\n try {\n const res = await fetch(\"\/af-inbox-proxy.php\", {\n method:\"POST\",\n headers:{\"Content-Type\":\"application\/json\"},\n body: JSON.stringify({\n station:\"david-lewis-live\", name, email, message:msg,\n email_consent: consent ? 1 : 0, platform:\"web\", version:\"1.0\"\n })\n });\n const json = await res.json();\n if(json.ok){\n status.textContent=\"Message sent. Thanks!\";\n status.className=\"status ok\";\n afForm.reset();\n } else {\n status.textContent=\"Error: \"+(json.error||\"Please try again.\");\n status.className=\"status err\";\n }\n } catch(err){\n status.textContent=\"Network error.\";\n status.className=\"status err\";\n }\n });\nasync function fetchNowPlaying() {\n const res = await fetch('https:\/\/stream4.themediasite.co.uk:2020\/json\/stream\/dllive');\n const data = await res.json();\n const np = data.nowplaying || '';\n const parts = np.split(' - ');\n const title = parts[0] || np;\n const artist = parts[1] || '';\n\n titleEl.textContent = title;\n artistEl.textContent = artist;\n\n \/\/ update browser tab title\n document.title = `${artist} \u2013 ${title} | Radio Player`;\n\n fetch(`https:\/\/itunes.apple.com\/search?term=${encodeURIComponent(np)}&entity=song&limit=1`)\n .then(r => r.json())\n .then(r => {\n if (r.results && r.results[0]) {\n const art = r.results[0].artworkUrl100.replace('100x100', '600x600');\n cover.src = art;\n bgBlur.style.backgroundImage = `url(${art})`;\n \/\/ Media Session API: push metadata to OS lock screen\n if ('mediaSession' in navigator) {\n navigator.mediaSession.metadata = new window.MediaMetadata({\n title: title,\n artist: artist,\n album: \"Chorley One\",\n artwork: [\n { src: art, sizes: \"600x600\", type: \"image\/jpeg\" }\n ]\n });\n navigator.mediaSession.setActionHandler('play', function() {\n audio.play();\n });\n navigator.mediaSession.setActionHandler('pause', function() {\n audio.pause();\n });\n }\n }\n });\n}\n\n <\/script>\n<\/body>\n<footer>\n © <span id=\"year\"><\/span> \n <a href=\"https:\/\/tmsdigital.co.uk\" target=\"_blank\">TMSDigital LTD<\/a>\n<\/footer>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Radio Player David Lewis Live \u25b6 NOW PLAYING Artist Track Listen Again \u2197 Recently Played Studio Inbox Name Email Message I consent to my email being shared with the station (for replies). Send Message © TMSDigital LTD<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-6","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/davidlewislive.co.uk\/index.php\/wp-json\/wp\/v2\/pages\/6","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/davidlewislive.co.uk\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/davidlewislive.co.uk\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/davidlewislive.co.uk\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/davidlewislive.co.uk\/index.php\/wp-json\/wp\/v2\/comments?post=6"}],"version-history":[{"count":30,"href":"https:\/\/davidlewislive.co.uk\/index.php\/wp-json\/wp\/v2\/pages\/6\/revisions"}],"predecessor-version":[{"id":43,"href":"https:\/\/davidlewislive.co.uk\/index.php\/wp-json\/wp\/v2\/pages\/6\/revisions\/43"}],"wp:attachment":[{"href":"https:\/\/davidlewislive.co.uk\/index.php\/wp-json\/wp\/v2\/media?parent=6"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t\n\n\n \n \n Radio Player<\/title>\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.1\/css\/all.min.css\">\n <style>\n body {\n margin: 0;\n font-family: system-ui,-apple-system,\"Segoe UI\",Roboto,sans-serif;\n background: #0f1116;\n color: #111;\n }\nfooter {\n position: relative;\n z-index: 2;\n text-align: center;\n padding: 20px;\n font-size: 13px;\n color: #ccc;\n}\nfooter a {\n color: #ccc;\n text-decoration: none;\n}\nfooter a:hover {\n color: #fff;\n}\n\n \/* ===== Background Blur ===== *\/\n .bg-blur {\n position: absolute;\n top: 0; left: 0; right: 0; bottom: 0;\n background-size: cover;\n background-position: center;\n filter: blur(28px) brightness(0.5);\n transform: none;\n z-index: 0;\n }\n .bg-tint {\n position: absolute;\n top: 0; left: 0; right: 0; bottom: 0;\n background: rgba(15,17,22,0.01);\n z-index: 1;\n }\n\n \/* ===== Top Bar ===== *\/\n .top-bar {\n position: relative;\n z-index: 2;\n display: flex;\n justify-content: space-between;\n align-items: center;\n background: rgba(0,0,0,0.65);\n color: #fff;\n font-weight: 700;\n padding: 12px 20px;\n }\n .top-bar button {\n background: #2563eb;\n border: none;\n border-radius: 999px;\n color: #fff;\n padding: 8px 14px;\n cursor: pointer;\n }\n\n \/* ===== Hero Artwork ===== *\/\n .hero {\n position: relative;\n z-index: 2;\n display: flex;\n justify-content: center;\n margin: 40px 0;\n }\n .artwork {\n position: relative;\n width: 90%;\n max-width: 500px;\n border-radius: 16px;\n overflow: hidden;\n box-shadow: 0 10px 28px rgba(0,0,0,.45);\n }\n .artwork img {\n width: 100%;\n display: block;\n }\n .overlay {\n position: absolute;\n bottom: 0;\n width: 100%;\n background: linear-gradient(transparent, rgba(0,0,0,0.75));\n color: #fff;\n padding: 20px;\n }\n .overlay .label {\n font-size: 12px;\n font-weight: 700;\n letter-spacing: .05em;\n opacity: .85;\n }\n .overlay .artist {\n font-size: 20px;\n font-weight: 700;\n }\n .overlay .title {\n font-size: 15px;\n opacity: .9;\n }\n .play-overlay {\n position: absolute;\n top: 50%; left: 50%;\n transform: translate(-50%,-50%);\n background: rgba(0,0,0,.6);\n border-radius: 50%;\n width: 80px; height: 80px;\n display: flex; justify-content: center; align-items: center;\n cursor: pointer;\n }\n .play-overlay svg {\n width: 36px; height: 36px;\n fill: #fff;\n }\n\n \/* ===== Mid Under Bar ===== *\/\n .under-bar {\n position: relative;\n z-index: 2;\n background: rgba(0,0,0,0.65);\n color: #fff;\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 12px 20px;\n }\n .under-bar .socials {\n display: flex;\n gap: 16px;\n font-size: 20px;\n }\n .under-bar a {\n color: #fff;\n text-decoration: none;\n }\n\n \/* ===== Main Content ===== *\/\n .main {\n position: relative;\n z-index: 2;\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 30px;\n max-width: 1200px;\n margin: 30px auto;\n padding: 0 20px;\n }\n @media (max-width: 768px) {\n .main { grid-template-columns: 1fr; }\n }\n\n .card {\n background: #fff;\n border-radius: 12px;\n box-shadow: 0 4px 12px rgba(0,0,0,.12);\n overflow: hidden;\n }\n .card h3 {\n margin: 0;\n padding: 14px 18px;\n font-size: 15px;\n border-bottom: 1px solid #eee;\n background: #f9fafb;\n }\n\n \/* ===== Recently Played ===== *\/\n .track {\n display: flex;\n align-items: center;\n padding: 10px 16px;\n gap: 12px;\n border-bottom: 1px solid #f1f1f1;\n }\n .track img {\n width: 48px; height: 48px;\n border-radius: 6px;\n object-fit: cover;\n }\n .track .meta { display: flex; flex-direction: column; }\n .track .meta strong { font-size: 14px; }\n .track .meta span { font-size: 12px; color: #555; }\n\n \/* ===== Inbox Styling (white) ===== *\/\n .inbox-form {\n padding: 16px;\n }\n .inbox-form .row { display: grid; gap: 12px; margin-bottom: 12px; }\n .inbox-form .two { grid-template-columns: 1fr 1fr; }\n @media (max-width: 640px) { .inbox-form .two { grid-template-columns: 1fr; } }\n\n .inbox-form label { font-size: 13px; font-weight: 600; color: #333; display:block; margin-bottom:4px; }\n .inbox-form input, .inbox-form textarea {\n width: 100%; padding: 10px; border: 1px solid #ccc;\n border-radius: 8px; font-size: 14px;\n }\n .inbox-form textarea { min-height: 120px; resize: vertical; }\n\n .inbox-form .actions { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }\n .inbox-form .consent { display:flex; align-items: flex-start; gap: 8px; font-size: 13px; color:#555; flex:1; }\n .inbox-form button {\n background: #2563eb; color:#fff; border:none; border-radius: 8px;\n padding: 10px 18px; font-weight:700; cursor:pointer;\n }\n .inbox-form button:hover { filter: brightness(1.1); }\n .inbox-form .status { margin-top: 8px; font-size: 13px; font-weight:600; }\n .inbox-form .ok { color: #16a34a; }\n .inbox-form .err { color: #dc2626; }\n <\/style>\n<\/head>\n<body>\n \n <div class=\"bg-blur\" id=\"bgBlur\"><\/div>\n <div class=\"bg-tint\"><\/div>\n\n \n <div class=\"top-bar\">\n <div class=\"station\"><i class=\"fas fa-broadcast-tower\"><\/i> David Lewis Live<\/div>\n <button id=\"topPlay\">\u25b6<\/button>\n <\/div>\n\n \n <div class=\"hero\">\n <div class=\"artwork\">\n <img decoding=\"async\" id=\"cover\" src=\"https:\/\/via.placeholder.com\/600x600?text=Loading\" alt=\"\">\n <div class=\"play-overlay\" id=\"playOverlay\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\"><path d=\"M8 5v14l11-7z\"\/><\/svg>\n <\/div>\n <div class=\"overlay\">\n <div class=\"label\">NOW PLAYING<\/div>\n <div class=\"artist\" id=\"artist\">Artist<\/div>\n <div class=\"title\" id=\"title\">Track<\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"under-bar\">\n <div class=\"socials\">\n <a href=\"#\"><i class=\"fab fa-facebook-f\"><\/i><\/a>\n <a href=\"#\"><i class=\"fab fa-x-twitter\"><\/i><\/a>\n <a href=\"#\"><i class=\"fab fa-instagram\"><\/i><\/a>\n <\/div>\n <a href=\"https:\/\/embedded.autopod.xyz\/stream\/270\" target=\"_blank\">Listen Again \u2197<\/a>\n <\/div>\n\n \n <div class=\"main\">\n \n <div class=\"card\">\n <h3>Recently Played<\/h3>\n <div id=\"recent\"><\/div>\n <\/div>\n\n \n <div class=\"card\">\n <h3>Studio Inbox<\/h3>\n <div class=\"inbox-form\">\n <form id=\"afForm\" novalidate>\n <div class=\"row two\">\n <div>\n <label for=\"afName\">Name<\/label>\n <input id=\"afName\" name=\"name\" required \/>\n <\/div>\n <div>\n <label for=\"afEmail\">Email<\/label>\n <input id=\"afEmail\" name=\"email\" type=\"email\" required \/>\n <\/div>\n <\/div>\n <div class=\"row\">\n <div>\n <label for=\"afMsg\">Message<\/label>\n <textarea id=\"afMsg\" name=\"message\" required><\/textarea>\n <\/div>\n <\/div>\n <div class=\"actions\">\n <label class=\"consent\">\n <input id=\"afConsent\" type=\"checkbox\" \/>\n <span>I consent to my email being shared with the station (for replies).<\/span>\n <\/label>\n <button id=\"afSend\" type=\"submit\">Send Message<\/button>\n <\/div>\n <div id=\"afStatus\" class=\"status\" aria-live=\"polite\"><\/div>\n <\/form>\n <\/div>\n <\/div>\n <\/div>\n\n <audio id=\"audio\" src=\"https:\/\/stream4.themediasite.co.uk:8142\/stream\"><\/audio>\n\n <script>\n const audio = document.getElementById('audio');\n const playOverlay = document.getElementById('playOverlay');\n const topPlay = document.getElementById('topPlay');\n const cover = document.getElementById('cover');\n const bgBlur = document.getElementById('bgBlur');\n const artistEl = document.getElementById('artist');\n const titleEl = document.getElementById('title');\n const recentEl = document.getElementById('recent');\n\n async function fetchNowPlaying() {\n const res = await fetch('https:\/\/stream4.themediasite.co.uk:2020\/json\/stream\/dllive');\n const data = await res.json();\n const np = data.nowplaying || '';\n const parts = np.split(' - ');\n const title = parts[0] || np;\n const artist = parts[1] || '';\n\n titleEl.textContent = title;\n artistEl.textContent = artist;\n\n fetch(`https:\/\/itunes.apple.com\/search?term=${encodeURIComponent(np)}&entity=song&limit=1`)\n .then(r => r.json())\n .then(r => {\n if (r.results && r.results[0]) {\n const art = r.results[0].artworkUrl100.replace('100x100', '600x600');\n cover.src = art;\n bgBlur.style.backgroundImage = `url(${art})`;\n }\n });\n }\n\n async function fetchRecentlyPlayed() {\n const res = await fetch('https:\/\/stream4.themediasite.co.uk:2020\/json\/stream\/dllive');\n const data = await res.json();\n recentEl.innerHTML = '';\n data.trackhistory.forEach(track => {\n fetch(`https:\/\/itunes.apple.com\/search?term=${encodeURIComponent(track)}&entity=song&limit=1`)\n .then(r => r.json())\n .then(r => {\n let img = 'https:\/\/via.placeholder.com\/100?text=\u266a';\n if (r.results && r.results[0]) img = r.results[0].artworkUrl100;\n const parts = track.split(' - ');\n const tTitle = parts[0] || track;\n const tArtist = parts[1] || '';\n const div = document.createElement('div');\n div.className = 'track';\n div.innerHTML = `<img decoding=\"async\" src=\"${img}\"><div class=\"meta\"><strong>${tArtist}<\/strong><span>${tTitle}<\/span><\/div>`;\n recentEl.appendChild(div);\n });\n });\n }\n\n \/\/ Intervals\n setInterval(fetchNowPlaying, 15000); \/\/ update now playing every 15s\n setInterval(fetchRecentlyPlayed, 150000); \/\/ update recently played every 2.5 mins\n\n \/\/ Initial load\n fetchNowPlaying();\n fetchRecentlyPlayed();\n\n function togglePlay() {\n if (audio.paused) {\n audio.play();\n topPlay.textContent = \"\u275a\u275a\";\n playOverlay.innerHTML = '<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\"><path d=\"M6 19h4V5H6zm8-14v14h4V5z\"\/><\/svg>';\n } else {\n audio.pause();\n topPlay.textContent = \"\u25b6\";\n playOverlay.innerHTML = '<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\"><path d=\"M8 5v14l11-7z\"\/><\/svg>';\n }\n }\n playOverlay.addEventListener('click', togglePlay);\n topPlay.addEventListener('click', togglePlay);\n\n \/\/ Inbox handling\n const afForm = document.getElementById('afForm');\n afForm.addEventListener('submit', async (e)=>{\n e.preventDefault();\n const name = document.getElementById('afName').value.trim();\n const email = document.getElementById('afEmail').value.trim();\n const msg = document.getElementById('afMsg').value.trim();\n const consent = document.getElementById('afConsent').checked;\n const status = document.getElementById('afStatus');\n status.textContent = \"Sending...\";\n try {\n const res = await fetch(\"\/af-inbox-proxy.php\", {\n method:\"POST\",\n headers:{\"Content-Type\":\"application\/json\"},\n body: JSON.stringify({\n station:\"david-lewis-live\", name, email, message:msg,\n email_consent: consent ? 1 : 0, platform:\"web\", version:\"1.0\"\n })\n });\n const json = await res.json();\n if(json.ok){\n status.textContent=\"Message sent. Thanks!\";\n status.className=\"status ok\";\n afForm.reset();\n } else {\n status.textContent=\"Error: \"+(json.error||\"Please try again.\");\n status.className=\"status err\";\n }\n } catch(err){\n status.textContent=\"Network error.\";\n status.className=\"status err\";\n }\n });\nasync function fetchNowPlaying() {\n const res = await fetch('https:\/\/stream4.themediasite.co.uk:2020\/json\/stream\/dllive');\n const data = await res.json();\n const np = data.nowplaying || '';\n const parts = np.split(' - ');\n const title = parts[0] || np;\n const artist = parts[1] || '';\n\n titleEl.textContent = title;\n artistEl.textContent = artist;\n\n \/\/ update browser tab title\n document.title = `${artist} \u2013 ${title} | Radio Player`;\n\n fetch(`https:\/\/itunes.apple.com\/search?term=${encodeURIComponent(np)}&entity=song&limit=1`)\n .then(r => r.json())\n .then(r => {\n if (r.results && r.results[0]) {\n const art = r.results[0].artworkUrl100.replace('100x100', '600x600');\n cover.src = art;\n bgBlur.style.backgroundImage = `url(${art})`;\n \/\/ Media Session API: push metadata to OS lock screen\n if ('mediaSession' in navigator) {\n navigator.mediaSession.metadata = new window.MediaMetadata({\n title: title,\n artist: artist,\n album: \"Chorley One\",\n artwork: [\n { src: art, sizes: \"600x600\", type: \"image\/jpeg\" }\n ]\n });\n navigator.mediaSession.setActionHandler('play', function() {\n audio.play();\n });\n navigator.mediaSession.setActionHandler('pause', function() {\n audio.pause();\n });\n }\n }\n });\n}\n\n <\/script>\n<\/body>\n<footer>\n © <span id=\"year\"><\/span> \n <a href=\"https:\/\/tmsdigital.co.uk\" target=\"_blank\">TMSDigital LTD<\/a>\n<\/footer>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Radio Player David Lewis Live \u25b6 NOW PLAYING Artist Track Listen Again \u2197 Recently Played Studio Inbox Name Email Message I consent to my email being shared with the station (for replies). Send Message © TMSDigital LTD<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-6","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/davidlewislive.co.uk\/index.php\/wp-json\/wp\/v2\/pages\/6","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/davidlewislive.co.uk\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/davidlewislive.co.uk\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/davidlewislive.co.uk\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/davidlewislive.co.uk\/index.php\/wp-json\/wp\/v2\/comments?post=6"}],"version-history":[{"count":30,"href":"https:\/\/davidlewislive.co.uk\/index.php\/wp-json\/wp\/v2\/pages\/6\/revisions"}],"predecessor-version":[{"id":43,"href":"https:\/\/davidlewislive.co.uk\/index.php\/wp-json\/wp\/v2\/pages\/6\/revisions\/43"}],"wp:attachment":[{"href":"https:\/\/davidlewislive.co.uk\/index.php\/wp-json\/wp\/v2\/media?parent=6"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}