@extends('site.master')

@section('title', $page->translation->meta_title)
@section('meta_description', $page->translation->meta_description)

@section('content')

    <div class="c-body">
        <div class="c-home-header-streamer l-contain">
            <div class="full-width-image @if($agent->isMobile()) is-mobile @endif ">
                <div class="full-width-image__video">
                    <iframe id="vimeo-player" src="https://player.vimeo.com/video/340605203?background=1" width="640" height="360"  frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
                </div>
            </div>
            <div class="c-home-header-streamer__content">
                <h1>{!! $page->translation->streamer_title !!}</h1>
                <div class="c-home-header-streamer__text">
                    {!! $page->translation->streamer_text  !!}
                </div>
            </div>
        </div>

        @include('site.organisms.components')

    </div>
@endsection

@section('end-body')
    <script src="https://player.vimeo.com/api/player.js"></script>
    <script>
        var vimeoFrame = document.getElementById('vimeo-player');
        var player = new Vimeo.Player(vimeoFrame);

        player.addCuePoint(0.6,{
            played: 0.6
        }).then(function(id) {
            // cue point was added successfully
        }).catch(function(error) {
            switch (error.name) {
                case 'UnsupportedError':
                    console.log('cue points are not supported with the current player or browser');
                    break;

                case 'RangeError':
                    console.log('the time was less than 0 or greater than the video’s duration');
                    break;

                default:
                    console.log('some other error occurred');
                    break;
            }
        });

        var addByTimeout = false;

        player.on('cuepoint',function(){
            vimeoFrame.classList.add('is-running');
            addByTimeout = true;
        });

        setTimeout(function () {
            if(addByTimeout){
                vimeoFrame.classList.add('is-running');
                console.log('added by timeout');
            }
        }, 4000);

    </script>
@endsection