Zorn/docs/milieu.mdx

Title	Type
Milieu	Document

import {Prism} from "@astrojs/prism" import {Zorn} from "@minpluto/zorn"

<Zorn PlayerName="nameit_whatever_you_want" Title="Islandia" Poster="https://md.sudovanilla.org/images/Islandia%2000%3A00%3A21.png" Video="https://ocean.sudovanilla.org/media/videos/Islandia/Islandia.mp4" Milieu Whitelabel BigPlayButton ShowFullscreen={false}

<slot slot="menu">
    <div id="settings" class="vc-menu">
        <button>Stats for Geeks</button>
        <hr/>
        <button>Open Video URL <i class="iconoir-arrow-up-right"></i></button>
        <button>Download <i class="iconoir-arrow-up-right"></i></button>
        <button>Embed <i class="iconoir-arrow-up-right"></i></button>
        <hr/>
        <button id="has-switch">Milieu <i class="iconoir-switch-off"></i></button>
        <button>Close Captions <i class="iconoir-nav-arrow-right"></i></button>
        <button onclick="PlayerMenu_Quality()">Quality <i class="iconoir-nav-arrow-right"></i></button>
    </div>
    <div id="quality-changer" class="vc-menu">
        <button onclick="OpenZornMenu()"><span style="display: flex; align-items: center;"><i class="iconoir-nav-arrow-left"></i> Back</span></button>
        <button>1080p</button>
        <button>720p</button>
        <button>360p</button>
    </div>
</slot>

The Milieu option is an attempt to copy YouTube's ambient player feature. Where it adds a blurry glow around the player. This uses two <canvas/>s behind the player to make a smooth transition when it changes.

<Prism lang="jsx" code={<Zorn Milieu/>}/>