<div xmlns="http://www.w3.org/1999/xhtml" lang="en"
     xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers"
     xmlns:f="http://typo3.org/ns/TYPO3/Fluid/ViewHelpers"
     xmlns:flux="http://typo3.org/ns/FluidTYPO3/Flux/ViewHelpers">
    <f:layout name="Content" />

    <f:section name="Configuration">
        <flux:form id="responsivevideo">
            <flux:form.option.icon value="EXT:fluidbootstrap/Resources/Public/Icons/Content/ResponsiveVideo.png"/>
            <flux:form.option.group value="fluxcontent"/>
            <flux:field.inline.fal name="settings.videoXl" allowedExtensions="mpeg, mp4,mov, webm, ogg, ogv" maxItems="1" required="true" label="Video Datei Desktop" />
            <flux:field.inline.fal name="settings.videoMd" allowedExtensions="mpeg, mp4,mov, webm, ogg, ogv" maxItems="1" label="Video Datei Tablet"/>
            <flux:field.inline.fal name="settings.videoSm" allowedExtensions="mpeg, mp4,mov, webm, ogg, ogv" maxItems="1" label="Video Datei Mobile"/>
            <flux:field.select name="settings.autoplay" default="click" label="Abspiel- Option" items="{
            0:{0:'Start per Klick', 1:'click'},
            1:{0:'Start wenn Video im Sichtbereich', 1:'scroll'},
            2:{0:'Automatisch nach laden der Seite (!Audio deaktiviert)', 1:'autoplay'}
            }"/>
            <flux:field.checkbox name="settings.loop" default="0" label="Abspielen in Schleife" />
            <flux:field.checkbox name="settings.controls" label="Zeige Player Controls" default="1"/>
            <flux:field.input name="settings.height" eval="'trim','int'" label="Maximale Höhe (ab 1440px Bildschirmbreite) in: px = absolute Höhe / vh = prozentualer Anteil der Bildschirmhöhe" />
            <flux:field.select name="settings.posV" items="top, bottom, center" default="center" label="Verticale Video Position"/>
            <flux:field.select name="settings.posH" items="left, right, center" default="center" label="Horizontale Video Position"/>
        </flux:form>
    </f:section>

    <f:section name="Main">
        <v:variable.set name="posV" value=" flex-align-center" />
        <f:if condition="{settings.posV} == 'top'">
            <v:variable.set name="posV" value=" flex-align-start" />
        </f:if>
        <f:if condition="{settings.posV} == 'bottom'">
            <v:variable.set name="posV" value=" flex-align-end" />
        </f:if>
        <v:variable.set name="posH" value=" flex-justify-center" />
        <f:if condition="{settings.posH} == 'left'">
            <v:variable.set name="posH" value=" flex-justify-start" />
        </f:if>
        <f:if condition="{settings.posH} == 'right'">
            <v:variable.set name="posH" value=" flex-justify-end" />
        </f:if>

        <v:variable.set name="autoplay" value="false" />
        <v:variable.set name="muted" value="false" />
        <f:if condition="{settings.autoplay} == 'autoplay'">
            <v:variable.set name="autoplay" value="true" />
            <v:variable.set name="muted" value="true" />
        </f:if>
        <f:if condition="{settings.autoplay} == 'scroll'">
            <v:variable.set name="muted" value="true"/>
        </f:if>
        <v:variable.set name="loop" value="false" />
        <f:if condition="{settings.loop}">
            <v:variable.set name="loop" value="true" />
        </f:if>
        <v:asset.script name="responsiveimagejs" dependencies="jquery, pagejs" fluid="true" path="EXT:fluidbootstrap/Resources/Public/Page/Javascript/ResponsiveVideo.js" />
        <f:if condition="{settings.height}">
            <v:asset.style name="responsivevideocss-{record.uid}" fluid="true">
                @media(min-width: 1440px) {
                    .responsive-video-wrap{
                        height: <f:format.raw>{settings.height}</f:format.raw>;
                        overflow: hidden;
                        position: relative;
                    }
                }
                .responsive-video{
                    bottom: 0;
                }
            </v:asset.style>
        </f:if>
        {v:content.resources.fal(field: 'settings.videoXl', record: '{record}') -> v:iterator.first() -> v:variable.set(name: 'videoXl')}
        {v:content.resources.fal(field: 'settings.videoMd', record: '{record}') -> v:iterator.first() -> v:variable.set(name: 'videoMd')}
        {v:content.resources.fal(field: 'settings.videoSm', record: '{record}') -> v:iterator.first() -> v:variable.set(name: 'videoSm')}
        <v:variable.set name="videoXLUrl" value="{videoXl.url}"/>
        <v:asset.script name="responsivevideoplugin" dependencies="jquery" path="EXT:fluidbootstrap/Resources/Public/Page/Javascript/ResponsiveVideo/ResponsiveVideoPlugin.js"/>
        <v:asset.script name="videoprop-{record.uid}" dependencies="responsivevideoplugin, jquery" fluid="true" movable="true">
            $(function(){
            $('#responsive-video-<f:format.raw>{record.uid}</f:format.raw>').responsiveVideoPlugin({
            urlSm: '<f:format.raw>{videoSm.url}</f:format.raw>',
            urlMd: '<f:format.raw>{videoMd.url}</f:format.raw>',
            urlXl: '<f:format.raw>{videoXl.url}</f:format.raw>',
            autoplay: <f:format.raw>{autoplay}</f:format.raw>,
            muted: <f:format.raw>{muted}</f:format.raw>,
            loop: <f:format.raw>{loop}</f:format.raw>,
            });
            });
            let timeout<f:format.raw>{record.uid}</f:format.raw>;
            $(window).on('resize orientationchange', function(){
            clearTimeout(timeout<f:format.raw>{record.uid}</f:format.raw>);
            timeout<f:format.raw>{record.uid}</f:format.raw> = setTimeout(function(){
            $('#responsive-video-<f:format.raw>{record.uid}</f:format.raw>').responsiveVideoPlugin({
            urlSm: '<f:format.raw>{videoSm.url}</f:format.raw>',
            urlMd: '<f:format.raw>{videoMd.url}</f:format.raw>',
            urlXl: '<f:format.raw>{videoXl.url}</f:format.raw>',
            autoplay: <f:format.raw>{autoplay}</f:format.raw>,
            muted: <f:format.raw>{muted}</f:format.raw>,
            loop: <f:format.raw>{loop}</f:format.raw>,
            });
            },1010);
            });
        </v:asset.script>

        <f:if condition="{settings.autoplay} == 'scroll'">
            <v:asset.script name="videoplayinview" dependencies="jquery, animatedcontent" path="EXT:fluidbootstrap/Resources/Public/Page/Javascript/ResponsiveVideoPlayInViewPlugin.js" movable="true"/>
            <v:asset.script name="videoplayinview-{record.uid}" dependencies="jquery, videoplayinview" fluid="true" movable="true">
                $(function(){
                $('#responsive-video-<f:format.raw>{record.uid}</f:format.raw>')
                var timeoutVideo;
                var el = '#responsive-video-<f:format.raw>{record.uid}</f:format.raw>';

                var controls = $('#responsive-video-<f:format.raw>{record.uid}</f:format.raw>').prev('.video-control-wrap');
                const muteOn = $(controls).children('.video-mute-on');
                const muteOff = $(controls).children('.video-mute-off');
                $(el).videoPlayInView();
                $(muteOn).css('display', 'none');
                $(muteOff).css('display', 'block');
                $(window).on('scroll', function(){
                clearTimeout(timeoutVideo);
                timeoutVideo = setTimeout(function(){
                $(el).videoPlayInView();
                }, 750)
                })
                });
            </v:asset.script>
        </f:if>


        <div class="responsive-video-wrap flex{posV}{posH}" id="responsive-video-wrap-{record.uid}">
            <f:if condition="{settings.controls}">
<!--                <div class="video-control-wrap">-->
<!--                    <button class="btn video-stop material-icons responsive-video-control">stop</button>-->
<!--                    <button class="btn video-play material-icons responsive-video-control">play_arrow</button>-->
<!--                    <button class="btn video-pause material-icons responsive-video-control">pause</button>-->
<!--                    <button class="btn video-mute-off material-icons responsive-video-control">volume_up</button>-->
<!--                    <button class="btn video-mute-on material-icons responsive-video-control">volume_off</button>-->
<!--                </div>-->
            </f:if>
            <f:if condition="{autoplay} == 'true'">
                <f:then>
                    <video id="responsive-video-{record.uid}" class="responsive-video" controls playsinline muted>
                        <source src="" class="video-xl"/>
                    </video>
                </f:then>
                <f:else>
                    <video id="responsive-video-{record.uid}" class="responsive-video" controls>
                        <source src="" class="video-xl"/>
                    </video>
                </f:else>
            </f:if>

        </div>

    </f:section>

    <f:section name="Preview">
        <div style="background-color:#efefef; margin-bottom: 10px; padding: 10px;">
            <p><strong>Responsive Video</strong></p>
            <p>
                <i>Zeige Controls:</i><span style="font-size: 16px;"><f:if condition="{settings.controls}"><f:then>&#10004;</f:then><f:else>&#10006;</f:else> </f:if></span> |
                <i>Schleife:</i><span style="font-size: 16px;"><f:if condition="{settings.loop}"><f:then>&#10004;</f:then><f:else>&#10006;</f:else> </f:if></span> |
                <i>Abspiel- Option</i>: <f:if condition="{settings.autoplay} == 'scroll'">Start wenn Video im Sichtbereich</f:if>
                <f:if condition="{settings.autoplay} == 'click'">Start per Klick</f:if>
                <f:if condition="{settings.autoplay} == 'autoplay'">Automatisch</f:if>
            </p>
        </div>

    </f:section>

</div>