Add Home Assistant iframe

2023-08-25 01:09:38 +02:00
parent a1ce58a0f9
commit e1ae585070
2 changed files with 121 additions and 0 deletions
@@ -28,6 +28,14 @@ This script will only execute on browsers with `Silk` in their User Agent. To ex
 </script>
 ```
 ### Home Assistant Dashboard
 Some people like to use this script to display their [Home Assistant](https://www.home-assistant.io/) dashboard on their Echo Show device. For this you can embed this script into your dashboard via
 the Webpage/iframe card. Just add a new Webpage card to your dashboard with the following url:
 ```
 https://dagammla.gitlab.io/keep-silk-open/iframe.html
 ```
 ---
 ## Test
@@ -0,0 +1,113 @@
 <!DOCTYPE html>
 <html>
    <head>
        <style>
            * {
                width: 100%;
                height: 100%;
                padding: 0;
                margin: 0;
                background-color: transparent;
                font-family: sans-serif;
                font-size: 24px;
                font-weight: bold;
            }
            #display {
                border-radius: 12px;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            #display div {
                width: fit-content;
                height: fit-content;
                text-align: center;
            }
            [data-state=undecided]{
                display: none;
            }
            [data-state=paused]{
                background-color: brown;
            }
            [data-state=paused] div::after{
                content: "Click to keep page open";
            }
            [data-state=playing]{
                background-color: rgb(70, 199, 70);
            }
            [data-state=playing] div::after{
                content: "Page will stay open";
            }
        </style>
    </head>
    <body>
        <div id="display" data-state="undecided">
            <div></div>
        </div>
        <script>
            // --
            const nowMedia = () => `media.mp3?q=${Date.now()}`
            const audio = document.createElement("audio")
            audio.controls = false
            audio.src = nowMedia()
            audio.muted = true
            audio.autoplay = true
            document.body.appendChild(audio)
            const listenEvents = ["keydown", "pointerdown", "click"]
            const addAllListeners = (listener) => {
                listenEvents.forEach(ev => {
                    document.addEventListener(ev, listener)
                });
            }
            const removeAllListeners = (listener) => {
                listenEvents.forEach(ev => {
                    document.removeEventListener(ev, listener)
                });
            }
            const reload = () => {
                audio.src = nowMedia()
                audio.currentTime = 0
                audio.play()
            }
            audio.onended = reload
            const startMedia = () => {
                reload()
                audio.muted = false
            }
            audio.onplaying = () => removeAllListeners(startMedia)
            addAllListeners(startMedia)
            // --
            const display = document.getElementById("display")
            function checkAgain(){
                window.setTimeout(() => {
                    if (audio.paused){
                        display.dataset.state = "paused"
                        checkAgain()
                    } else {
                        display.dataset.state = "playing"
                    }
                }, 500);
            }
            checkAgain()
        </script>
    </body>
 </html>