{
  "version": "1.0",
  "type": "rich",
  "title": "Sponsored: Application allowlisting, but not as you know it",
  "author_name": "james",
  "provider_name": "Risky Business",
  "provider_url": "https://risky.biz",
  "width": 720,
  "height": 160,


  "html": "\n    <iframe frameborder=\"0\" style=\"width: 100%; height: 156px;\" srcdoc='\n     \n     &lt;!DOCTYPE html&gt;\n&lt;html&gt;\n &lt;head&gt;\n  &lt;title&gt;Risky Business Player&lt;/title&gt;\n &lt;/head&gt;\n &lt;body&gt;\n\n&lt;!-- Include the Google Font Inter --&gt;\n&lt;style&gt;\n@import url(&quot;https://fonts.googleapis.com/css2?family=Inter:wght@400;700&amp;display=swap&quot;);\n\nbody {\n    margin: 0px;\n}\n\n.audio-player {\n    font-family: &quot;Inter&quot;, sans-serif;\n}\n\n.icon {\n    background-image: url(&quot;https://risky.biz/static/img/icons/subscribe-icons.svg&quot;);\n    display: block;\n    width: 33px;\n    height: 33px;\n    background-size: 528px 111px;\n    }\n\n}\n&lt;/style&gt;\n\n&lt;!-- Audio player --&gt;\n&lt;div class=&quot;audio-player&quot; style=&quot;display: flex; flex-direction: column; gap: 5px; padding-top: 0px; padding-bottom: 20px; background: rgb(244, 244, 239); background: linear-gradient(0deg, rgba(244, 244, 239, 1) 0%, rgba(244, 244, 239, 0) 100%); border-radius: 8px; border: 1px solid #d7d7d7; width: calc(100% - 1px) min-width: 350px;&quot;&gt;\n    &lt;audio class=&quot;audioElement&quot; preload=&quot;none&quot;&gt;\n        &lt;source src=&quot;https://dts.podtrac.com/redirect.mp3/media3.risky.biz/RBNEWSSI122.mp3&quot; type=&quot;audio/mpeg&quot;&gt;\n        Your browser does not support the audio element.\n    &lt;/audio&gt;\n\n    &lt;!-- Title --&gt;\n    &lt;div style=&quot;background: #666666; color: #FEFEFE; font-size: 14px; padding-left: 5%; padding-right: 5%; padding-top: 10px; padding-bottom: 10px; border-top-left-radius: 8px; border-top-right-radius: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 10px;&quot;&gt;\n        &lt;a style=&quot;color:#FEFEFE; text-decoration: none;&quot; target=&quot;_new&quot; href=&quot;https://risky.biz/RBNEWSSI122/&quot;&gt;Sponsored: Application allowlisting, but not as you know it&lt;/a&gt;\n    &lt;/div&gt;\n\n    &lt;!-- Player Controls and Progress Bar --&gt;\n    &lt;div style=&quot;display: flex; align-items: center; justify-content: center; gap: 10px; width: 90%; margin: 0 auto;&quot;&gt;\n        &lt;button type=&quot;button&quot; class=&quot;playPauseBtn&quot; style=&quot;color: #1e1e1e; background-color: #FAFAFA; font-size: 18px; border: none; padding: 10px; border-radius: 8px; cursor: pointer; height: 42px; width: 42px; text-align: center; display: flex; align-items: center; justify-content: center;&quot;&gt;&amp;#9654;&lt;/button&gt;\n        &lt;input type=&quot;range&quot; style=&quot;flex-grow: 1; -webkit-appearance: none; height: 5px; background: #ddd; border-radius: 8px; outline: none; cursor: pointer;&quot; class=&quot;progressBar&quot; value=&quot;0&quot; min=&quot;0&quot; max=&quot;100&quot; /&gt;\n        &lt;span style=&quot;font-size: 12px; font-weight: 200;&quot; class=&quot;currentTime&quot;&gt;0:00&lt;/span&gt; / \n            \n             \n             \n             \n               &lt;span style=&quot;font-size: 12px; font-weight: 200;&quot; class=&quot;duration&quot;&gt;\n                     17:10\n               &lt;/span&gt;\n    &lt;/div&gt;\n\n    &lt;!-- Subscribe Buttons --&gt;\n    &lt;div style=&quot;width: 90%; display: flex; justify-content: space-between; align-items: center; padding-left: 5%;&quot;&gt;\n        &lt;div style=&quot;padding-right:20px;&quot; class=&quot;subText&quot;&gt;\n            &lt;strong&gt;Subscribe &amp;nbsp;&lt;/strong&gt;\n        &lt;/div&gt;\n        &lt;div style=&quot;display: flex; align-items: center; gap: 6px; margin: 0; flex-grow: 1;&quot; class=&quot;subContainer&quot;&gt;\n            \n            \n                \n                \n                \n            \n                \n                \n                \n                    \n\n  \n    &lt;a href=&quot;https://podcasts.apple.com/au/podcast/risky-business-news/id1621305970&quot; class=&quot;icon apple-podcast&quot; target=&quot;_new&quot; style=&quot;background-position: 48px 96px;&quot;&gt;&lt;/a&gt;\n  \n    &lt;a href=&quot;https://overcast.fm/itunes1621305970&quot; class=&quot;icon overcast-podcast&quot; target=&quot;_new&quot; style=&quot;background-position: 141px 96px;&quot;&gt;&lt;/a&gt;\n  \n    &lt;a href=&quot;https://pca.st/yicebxgl&quot; class=&quot;icon pocketcast-podcast&quot; target=&quot;_new&quot; style=&quot;background-position: 234px 96px;&quot;&gt;&lt;/a&gt;\n  \n    &lt;a href=&quot;https://open.spotify.com/show/0BdExoUZqbGsBYjt6QZl4Q&quot; class=&quot;icon spotify-podcast&quot; target=&quot;_new&quot; style=&quot;background-position: 420px 96px;&quot;&gt;&lt;/a&gt;\n  \n    &lt;a href=&quot;https://risky.biz/feeds/risky-business-news&quot; class=&quot;icon rss-podcast&quot; target=&quot;_new&quot; style=&quot;background-position: 327px 96px;&quot;&gt;&lt;/a&gt;\n  \n\n\n                \n            \n                \n                \n                \n            \n                \n                \n                \n            \n        &lt;/div&gt;\n        &lt;a href=&quot;https://risky.biz&quot;&gt;\n         &lt;img src=&quot;https://risky.biz/static/img/RB_Site_Logo.svg&quot; alt=&quot;Logo&quot;\n             style=&quot;margin-left: 0; height: 32px; display: block; padding-right: 5%;&quot;\n             id=&quot;logo&quot; class=&quot;logo playerLogo&quot;&gt;\n        &lt;/a&gt;\n&lt;script&gt;\n    document.addEventListener(&quot;DOMContentLoaded&quot;, function () {\n        const players = document.querySelectorAll(&quot;.audio-player&quot;);\n\n        function resizeElements(player) {\n            const logo = player.querySelector(&quot;.logo&quot;);\n            const subscribeIcons = player.querySelectorAll(&quot;.icon&quot;);\n            const subscribeContainer = player.querySelector(&quot;.subContainer&quot;); // Select subContainer by class\n            const subText = player.querySelector(&quot;.subText&quot;); // Select subText by class\n\n            if (player.offsetWidth &lt;= 425) {\n                // Hide logo\n                if (logo) {\n                    logo.style.display = &quot;none&quot;;\n                }\n            } else if (player.offsetWidth &lt;= 500) {\n                // Show logo and scale logo and icons to 70%\n                if (logo) {\n                    logo.style.display = &quot;block&quot;;\n                    logo.style.transform = &quot;scale(0.7)&quot;;\n                    logo.style.transformOrigin = &quot;center&quot;;\n                    logo.style.verticalAlign = &quot;middle&quot;;\n                }\n                subscribeIcons.forEach(icon =&gt; {\n                    icon.style.transform = &quot;scale(0.7)&quot;;\n                    icon.style.transformOrigin = &quot;center&quot;;\n                    icon.style.verticalAlign = &quot;middle&quot;;\n                });\n\n                // Remove padding from subText and set font-size to 12px\n                if (subText) {\n                    subText.style.padding = &quot;0&quot;;\n                    subText.style.fontSize = &quot;12px&quot;;\n                }\n\n                // Set gap in subContainer to 0px\n                if (subscribeContainer) {\n                    subscribeContainer.style.gap = &quot;0px&quot;;\n                }\n            } else {\n                // Reset scaling, alignment, and visibility\n                if (logo) {\n                    logo.style.display = &quot;block&quot;;\n                    logo.style.transform = &quot;scale(1)&quot;;\n                    logo.style.verticalAlign = &quot;baseline&quot;;\n                }\n                subscribeIcons.forEach(icon =&gt; {\n                    icon.style.transform = &quot;scale(1)&quot;;\n                    icon.style.verticalAlign = &quot;baseline&quot;;\n                });\n\n                // Reset padding and font-size in subText\n                if (subText) {\n                    subText.style.padding = &quot;0 20px&quot;; // Default padding\n                    subText.style.fontSize = &quot;inherit&quot;; // Default font-size\n                }\n\n                // Reset gap in subContainer\n                if (subscribeContainer) {\n                    subscribeContainer.style.gap = &quot;6px&quot;; // Default gap\n                }\n            }\n        }\n\n        function handleResize() {\n            players.forEach(player =&gt; {\n                resizeElements(player);\n            });\n        }\n\n        // Run on initial load and resize\n        handleResize();\n        window.addEventListener(&quot;resize&quot;, handleResize);\n    });\n&lt;/script&gt;\n\n\n\n\n\n\n\n    &lt;/div&gt;\n&lt;/div&gt;\n\n\n&lt;script&gt;\n    // Custom Audio Player\n    document.addEventListener(&quot;DOMContentLoaded&quot;, function () {\n    const players = document.querySelectorAll(&quot;.audio-player&quot;);\n\n    players.forEach(function (player) {\n        // Skip if already initialized\n        if (player.dataset.initialized === &quot;true&quot;) return;\n\n        // Mark player as initialized\n        player.dataset.initialized = &quot;true&quot;;\n        \n        const audio = player.querySelector(&quot;.audioElement&quot;);\n        const playPauseBtn = player.querySelector(&quot;.playPauseBtn&quot;);\n        const progressBar = player.querySelector(&quot;.progressBar&quot;);\n        const currentTimeEl = player.querySelector(&quot;.currentTime&quot;);\n        const durationEl = player.querySelector(&quot;.duration&quot;);\n\n        if (!audio || !playPauseBtn || !progressBar || !currentTimeEl || !durationEl) {\n            console.error(&quot;One or more player elements not found:&quot;, { audio, playPauseBtn, progressBar, currentTimeEl, durationEl });\n            return; \n        }\n\n        playPauseBtn.addEventListener(&quot;click&quot;, () =&gt; {\n            if (audio.paused) {\n                audio.play();\n                playPauseBtn.textContent = &quot;⏸&quot;; \n\n                    // GA4 event for starting audio\n                    gtag(&quot;event&quot;, &quot;audio_play&quot;, {\n                      &quot;content_title&quot;: &quot;Sponsored: Application allowlisting, but not as you know it&quot;,\n                      &quot;content_type&quot;: &quot;audio&quot;\n                    });\n            } else {\n                audio.pause();\n                playPauseBtn.textContent = &quot;▶&quot;;\n            }\n        });\n\n        audio.addEventListener(&quot;timeupdate&quot;, () =&gt; {\n            if (audio.duration) {\n                progressBar.value = (audio.currentTime / audio.duration) * 100;\n                currentTimeEl.textContent = formatTime(audio.currentTime);\n            }\n        });\n\n        audio.addEventListener(&quot;loadedmetadata&quot;, () =&gt; {\n            durationEl.textContent = formatTime(audio.duration);\n        });\n\n        progressBar.addEventListener(&quot;input&quot;, () =&gt; {\n            if (audio.duration) {\n                audio.currentTime = (progressBar.value / 100) * audio.duration;\n            }\n        });\n\n        function formatTime(seconds) {\n            const minutes = Math.floor(seconds / 60);\n            const secs = Math.floor(seconds % 60);\n            return `${minutes}:${secs &lt; 10 ? &quot;0&quot; : &quot;&quot;}${secs}`;\n        }\n    });\n});\n\n&lt;/script&gt;\n&lt;/body&gt;\n&lt;/html&gt;\n\n\n    '></iframe>\n"
}