@extends('front.layout')
@section('custom-style')
    <style>
        /* .slider-video
        {
            display : none;
        } */
          .owl-item .vedio_symbol {
    margin-top: 5%!important;
}
         .container .btn23 {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        /* background-color: #555; */
        color: white;
        font-size: 16px;
        padding: 12px 24px;
        border: none;
        cursor: pointer;
        border-radius: 5px;
        text-align: center;
    }

    video::-webkit-media-controls-timeline {
        display: none
    }

    video::-webkit-media-controls-current-time-display {
        display: none
    }

    video::-webkit-media-controls-time-remaining-display {
        display: none;
    }
        .top-video-slider-thumbnail
        {
            background-size: 100% auto;
            background-position:center;
        }
        /*.home-slider{height: 100vh;min-height: 700px;}*/
        /*.home-slider .bg-img-hero{height: 100vh !important;}*/


    @-webkit-keyframes slideIn {
        0% {
            transform: translateY(-50px);
        }
        100% {
            transform: translateY(0);
        }
    }

    @keyframes slideIn {
        0% {
            transform: translateY(-50px);
        }
        100% {
            transform: translateY(0);
        }
    }

      .vedio_symbol .fa-thumbs-up,
    .vedio_symbol .fa-thumbs-down,
    .vedio_symbol .fa-eye {
        font-size: 10px!important;
    }
    .vedio_symbol .fa-play {
    font-size: 10px!important;
    }
    .owl-item .vedio_symbol i {
    margin-left: 5px!important;
    /* margin-right: 2px!important; */
}

             /* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) and (orientation : portrait){


.height-280 {
    height: 320px;
    padding:5px;
}
.height-150 {
    height: 120px;
}
 .height-200 {
    height: 200px;
     padding: 5px!important;
}

.video-size {
    width: 100%;
    height: 100%;
}
.btn-primary {

    width:200px!important
}
.slider-video-title-text {
    font-size: 25px;
    font-weight: 900;
}


}
@media only screen and (max-width: 600px) and (orientation : landscape){
 .height-200 {
    height: 200px;
    padding: 5px!important;
}
.video-size {
    width: 100%;
    height: 100%;
}
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
.video-size {
    width: 100%;
    height: 100%;
}
   .height-200 {
    height: 200px;
    padding: 5px!important;
}
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
.video-size {
    width: 100%;
    height: 100%;
}
 .height-200 {
    height: 150px;

}
}
@media only screen and (min-width: 992px) {
    .video-size {
    width: 100%;
    height: auto;
}

 .height-200 {
    height: 150px;

}
.height-280 {
    height: 280px;
}
.height-150 {
    height: 150px;
}
.btn-primary {

    width:auto
}
.slider-video-title-text {
    font-size: 35px;
    font-weight: 900;
}
}

body {
	padding: 0;
	margin: 0;
	position: relative;
	/*background: url("https://images.unsplash.com/photo-1569973560851-8c4563f4c3c8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80")
		no-repeat center center;*/
	background: none !important;
	background-size: cover;
	height: auto;
	font-family: "Raleway", sans-serif;
	/* overflow-y: hidden; */
}

.content1 {
	max-width: auto;
	margin: 0 auto;
	top: 35%;
	position: relative;

}

    </style>
@endsection
@section('content')

    <section>
        <div class="home-slider position-relative overflow-hidden">
            <div id="sliderSyncingNav" class="js-slick-carousel slick" data-hs-slick-carousel-options='{
                        "dots": true,
                        "dotsClass": "d-xl-none slick-pagination mb-3 position-absolute right-0 left-0 bottom-0 ",
                        "infinite": false,
                        "asNavFor": "#sliderSyncingThumb"
                    }'>
                @if(isset($data['sliders']))
                    @foreach($data['sliders'] as $slider)
                        <div class="bg-img-hero d-flex align-items-center min-h-676rem slider-gradient top-video-slider-thumbnail"
                             style="background-image: url({{$slider->slider_image}});background-color: black">
                             @if(isset($slider->getVideo->trailer_path))
                                 <video id="slider-video-{{ $slider->id }}" loop autoplay muted style="flex:0;min-width:100%;position:absolute;top: 0;"class="video-size">
                                    <source id="top-slider-video-src-{{ $slider->id }}" src="@if($loop->iteration == 1) {{ $slider->getVideo->trailer_path }} @endif" type="video/mp4">
                                </video>
                            @endif
                            <div class="mx-3 mx-md-5 mx-lg-10 col-xl-5 px-0">
                                <div class="mb-3 pb-1">
                                    <ul class="list-unstyled nav nav-meta nav-meta__white">
                                        @if(isset($slider->getVideo->getCategories))
                                            <li class="">
                                                @foreach($slider->getVideo->getCategories as $sliderVideoCategory)
                                                    @if(isset($sliderVideoCategory->getCategory->name))
                                                        <a href="#" class="slider-category-text">
                                                            {{$sliderVideoCategory->getCategory->name}}
                                                        </a>
                                                        @if(!$loop->last)
                                                            ,&nbsp;
                                                        @endif
                                                    @endif

                                                @endforeach
                                            </li>
                                        @endif
                                        @if(isset($slider->getVideo->duration))
                                            <li class=" slider-duration-text">
                                                {{$slider->getVideo->duration}}
                                            </li>
                                        @endif

                                    </ul>
                                </div>

                                @if(isset($slider->getVideo->title))
                                    <h1 class="display-12 text-lh-1dot1 mb-6 max-w-565">
                                        <a href="#" class="h-w-primary slider-video-title-text">
                                            {{$slider->getVideo->title}}
                                        </a>
                                    </h1>
                                <div class="d-flex flex-column flex-md-row">
                                    <a href="{{route('front.singleVideoPage', $slider->getVideo->slug)}}" class="btn btn-primary px-6 py-3d btn-sm mb-3 mb-md-0">
                                        WATCH NOW
                                    </a>
{{--   <a href="#" class="btn btn-outline-light ml-md-4 px-6 py-3d btn-sm">--}}
{{--   + PLAYLIST--}}
{{--                                                                  </a>--}}

                                </div>
                                @endif

                            </div>
                        </div>
                    @endforeach
                @endif
            </div>
            <div
                class="d-none d-xl-flex justify-content-center position-xl-absolute col-xl-7 col-wd-8 right-0 bottom-0 mb-xl-10 pb-xl-1 thumbnailWrap">
                <div id="sliderSyncingThumb"
                     class="js-slick-carousel slick u-slick-bordered-primary slick-gutters-1 slick-transform-off"
                     data-hs-slick-carousel-options='{
                            "infinite": true,
                            "slidesToShow": {{count($data['sliders'])}},
                            "isThumbs": true,
                            "asNavFor": "#sliderSyncingNav",
                            "responsive": [{
                                "breakpoint": 1199,
                                "settings": {
                                    "slidesToShow": 2
                                },
                                "breakpoint": 768,
                                "settings": {
                                    "slidesToShow": 2
                                }
                            }]
                        }'>
                    @if(isset($data['sliders']))
                        @foreach($data['sliders'] as $slider)
                            <div class="my-1d position-relative" style="cursor: pointer;">
                                <div class="thumb-img slider_thumbnail" onclick="changeSliderVideo({{ $slider->id }})">
                                    <img class="img-fluid" src="{{$slider->slider_thumbnail}}"
                                         alt="Image Description">
                                </div>
                            </div>
                        @endforeach
                    @endif
                </div>
            </div>
        </div>

    </section>

    <!--slider section end-->


    <!--Live Events Section Start-->
    <div class="bg-gray-1100 space-1">
        <div class="container mx-auto pt-4 pb-1">
            <div class="home-section" id="tvprograms">
                <header id="live_tv_broadcast"
                        class="d-md-flex align-items-center justify-content-between mb-4 pb-1 w-100">
                    <div class="font-size-30 font-weight-bold mb-3 mb-md-0 text-golden font-secondary">Live Streaming 
                    </div>
                    <div class="d-none d-md-block border-top col p-0 ml-3 border-gray-6830"></div>
                </header>

                <!--Products Slider-->

                <!--end-->

                <div class="tab-content">
                    <div class="tab-pane fade show active dark" id="pills-one-code-features-example2"
                         role="tabpanel" aria-labelledby="pills-one-code-features-example2-tab">
                        <div class="row mx-n2">
                            <div class="col-lg-5 px-2">
                                <div class="product mb-5 position-relative mb-lg-0">
                                    <div class="mr-1">
                                        @if(isset($currentUpcomingPlayingVideo))
                                        @php $videoLive = $currentUpcomingPlayingVideo; @endphp
                                        <!--<video id="upcoming-video-live-video" poster="{{$currentUpcomingPlayingVideo->thumbnail}}" style="width:100%!important; height:315px!important;"  oncontextmenu="nodownload" loop muted playsinline autoplay controls >-->
                                        <!--    <source src="{{$currentUpcomingPlayingVideo->video_path}}" id="upcoming-video-live-video-src" type="video/mp4">-->
                                        <!--</video>-->

                                         <video id="upcoming-video-live-video" loop autoplay muted controls poster="{{$currentUpcomingPlayingVideo->thumbnail}}" style="width:100%!important; height:270px!important;" oncontextmenu="nodownload" loop muted playsinline autoplay controls>
                                            <source src="{{$currentUpcomingPlayingVideo->video_path}}" id="upcoming-video-live-video-src" type="video/mp4">

                                            @if($currentUpcomingPlayingVideo->ppv_listing_type == 'Free View')
                                            <source src="{{$currentUpcomingPlayingVideo->video_path}}" id="upcoming-video-live-video-src" type="video/mp4">

                                            @else
                                            <source src="" id="upcoming-video-live-video-src" type="video/mp4">

                                            @endif

                                        </video>
                                         <img id="upcoming-video-live-video-img" style="display:none" class="container" src="{{$currentUpcomingPlayingVideo->thumbnail}}">
                                        <!-- <input class="btn" type="button" value="Replace Message" onclick='getMessage()'> -->
                                        <button id="playBtn" class="btn23" style="display:none" onclick='getMessage()'>
                                            <i class="fa fa-play text-red" style="font-size: 48px"></i>
                                        </button>


                                        @elseif(isset($data['currentUpcomingVideo'][0]))
                                        @php $videoLive = $data['currentUpcomingVideo'][0]; @endphp
                                         <video id="upcoming-video-live-video" poster="{{$data['currentUpcomingVideo'][0]->thumbnail}}" style="width:100%!important; height:270px!important;"  oncontextmenu="nodownload" loop playsinline controls preload="metadata">
                                                <source src="" id="upcoming-video-live-video-src" type="video/mp4">
                                        </video>


    <!--<video id="upcoming-video-live-video" loop autoplay muted controls poster="{{$data['currentUpcomingVideo'][0]->thumbnail}}" style="width:100%!important; height:315px!important;--webkit-media-controls-current-time-display:none;" oncontextmenu="nodownload" loop playsinline autoplay controls preload="metadata">-->

    <!--                                        @if($data['currentUpcomingVideo'][0]->ppv_listing_type == 'Free View')-->
    <!--                                        <source src="{{$data['currentUpcomingVideo'][0]->video_path}}" id="upcoming-video-live-video-src" type="video/mp4">-->

    <!--                                        @else-->
    <!--                                        <source src="" id="upcoming-video-live-video-src" type="video/mp4">-->

    <!--                                        @endif-->

    <!--                                    </video>-->

                                        <img id="upcoming-video-live-video-img" style="display:none" class="container" src="{{$data['currentUpcomingVideo'][0]->thumbnail}}">
                                        <!-- <input class="btn" type="button" value="Replace Message" onclick='getMessage()'> -->
                                        <button id="playBtn" class="btn23" style="display:none" onclick='getMessage()'>
                                            <i class="fa fa-play text-red" style="font-size: 48px"></i>
                                        </button>


                                        @else
                                        <video poster="#" id="upcoming-video-live-video" style="width:100%!important; height:270px!important;"  oncontextmenu="nodownload" loop playsinline controls preload="metadata">
                                            <source src="" id="upcoming-video-live-video-src" type="video/mp4">
                                        </video>
                                        @endif
                                        {{-- showing live broadcast video detail --}}
                                        @if(isset($videoLive))
                                            <h6 class="font-size-16 text-white font-weight-semi-bold font-secondary mb-3 mb-md-1" id="video-title-and-sub-title">
                                                {{$videoLive->title}} - {{Str::words($videoLive->sub_title)}}
                                                {{-- @if(!isset($videoLive->video_path))
                                                <button class="btn btn-xs btn-warning">Coming Soon</button>
                                                @endif --}}
                                            </h6>
                                                {{-- <p class="category-page-subtitle-slide">{{Str::words($videoLive->sub_title)}}</p> --}}
                                            <ul class="list-unstyled nav nav-meta font-secondary pt-0 mb-0 overflow-auto overflow-md-hidden flex-nowrap flex-md-wrap">
                                                <li class="text-white flex-shrink-0 flex-shrink-md-1" id="current-upcomming-video-date">{{\Carbon\Carbon::parse($videoLive->date)->format('d M, Y')}}</li>
                                                @if(isset($videoLive->duration))
                                                    <li class="text-white flex-shrink-0 flex-shrink-md-1" id="current-upcomming-video-duration">{{$videoLive->duration}}</li>
                                                @endif

                                                <li>
                                                    @if(isset($videoLive->getRating->image))
                                                        <img id="current-upcomming-video-rating-image" style="height: 20px!important;
                                                        width: auto!important;
                                                        " src="{{url('ratings'.'/'.$videoLive->getRating->image)}}">
                                                    @endif
                                                </li>
                                            </ul>
                                            {{-- <div class="video-description">{!! $videoLive->description !!}</div> --}}
                                        @endif
                                        {{--  @if(get_setting('live_streaming_code'))
                                                {!! get_setting('live_streaming_code')->value !!}
                                        @else
                                            <iframe width="100%" height="315" src="https://www.youtube.com/embed/vejH7xVsLFk" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                                        @endif  --}}
                                    </div>
                                </div>
                            </div>

                            <div class="col-lg-7 px-2">
                                <div class="row mx-n2">
                                    @if(isset($data['liveTVBroadcastVideos']))
                                        @foreach($data['liveTVBroadcastVideos'] as $item)
                                        @if($loop->iteration > 1)
                                            <div class="col-6 col-lg-4 px-2">

                                                <div class="featured_img img-container mb-2 product height-150">
                                                    <a href="{{route('front.singleVideoPage', $item->slug)}}" onclick="return false;">
                                                        <img class="img-fluid img-news image" src="{{$item->thumbnail}}" alt="Image-Description">
                                                        <!--<div class="position-absolute pt-0">-->
                                                        <!--    <p class="video-title-without-hover">-->
                                                        <!--        {{-- <i class="fa fa-play"></i>  --}}-->
                                                        <!--        {{$item->title}}-->
                                                        <!--    </p>-->
                                                        <!--</div>-->
                                                        <div class="overlay-1">
                                                            <div class="text top-63">
                                                                <div class="content_play">

                                                                    <div class="content-title text-white font-size-11">
                                                                        <i class="fa fa-play" aria-hidden="true"></i>
                                                                        {{$item->title}}
                                                                    </div>
                                                                    <p class="video-subtitle" style="font-size: 8px;padding: 0px;background: transparent;">
                                                                        {{Str::words($item->sub_title,6)}}

                                                                    </p>
                                                                </div>
                                                                {{--  <div class="description text-light-white-1300 font-size-11 pt-2">
                                                                    {{ strip_tags(html_entity_decode(Str::words($item->description,10))) }}
                                                                </div>  --}}
                                                                <div class="description text-light-white-1300 font-size-11 pt-2">
                                                                    {{\Carbon\Carbon::parse($item->date)->format('d M, Y')}}
                                                                    ({{\Carbon\Carbon::parse($item->start_time)->format('H:i')}} - {{\Carbon\Carbon::parse($item->end_time)->format('H:i')}})

                                                                    @if(isset($item->ppv_listing_type))
                                                                        @if($item->ppv_listing_type == 'Free View')
                                                                        <span class="live-broadcast-subscription-or-free-button free-view-button">
                                                                            Free View
                                                                        </span>
                                                                        @elseif($item->ppv_listing_type == 'Pay Per View')
                                                                        <span class="live-broadcast-subscription-or-free-button subscription-view-button">
                                                                            Subscription
                                                                        </span>
                                                                        @endif
                                                                    @endif
                                                                </div>
                                                                @if(isset($item->duration))
                                                                    <div class="action">
                                                                        <p class="icon-title text-white font-size-10 pt-2">
                                                                            <i class="fa fa-clock" aria-hidden="true"></i>
                                                                            {{$item->duration}}, {{$item->created_at->format('d M, Y')}}
                                                                        </p>
                                                                    </div>
                                                                @endif



                                                            </div>
                                                        </div>
                                                    </a>
                                                </div>
                                            </div>
                                        @endif
                                        @endforeach
                                    @endif
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--Live Events End-->

    <!--Shows Section Start-->


    <!--overlay-->

    <div class="bg-gray-1100 space-1">
        <div class="container mx-auto p-0 pb-3 pt-1 px-2 px-lg-5 px-xxl-0">
            @if(get_setting('home_page_section'))
                @php
                $homeContent = get_setting('home_page_section')->value;
                $homeContentArray = explode(',', $homeContent);
                @endphp

                @foreach($homeContentArray as $homeContentSingle)
                    @if(get_design_option($homeContentSingle) == 'Verticle')
                        @include('front.home-page.home-page-section', ['slug'=> $homeContentSingle])
                    @elseif(get_design_option($homeContentSingle) == 'Horizontal')
                        @include('front.home-page.home-videos-landscape', ['slug'=> $homeContentSingle])
                    @endif
                @endforeach


            @else
                @php $videoCategories = ['current-news', 'exclusives', 'highlights-opinion', 'full-interviews', 'documentaries']; @endphp
                @foreach($videoCategories as $categorySlug)
                    @if(get_design_option($categorySlug) == 'Horizontal')
                        @include('front.home-page.home-videos-landscape', ['slug'=> $categorySlug])
                    @elseif(get_design_option($categorySlug) == 'Verticle')
                        @include('front.home-page.home-page-section', ['slug'=> $categorySlug])
                    @endif
                @endforeach
            @endif

        </div>
    </div>
    </main>
@endsection

@section('custom-script')
    <script src="{{url('front/assets/js/custom-js.js')}}"></script>
    <script src="{{url('front/assets/js/owl.carousel.js')}}"></script>

    <script>
        document.getElementById("upcoming-video-live-video").autoplay
    </script>

    <script>
        var temp;
        function onMouseOverTrailer(id, trailerId)
        {
            temp = $(id).children("div").children("div .overlay-1").children("video")[0];
            // el.pause();
            // var source = $(id).children("div").children("div .overlay-1").children("video").children("source");
            // temp.load();
            temp.play();
            //console.log(source[0]);


        }

        function onMouseLeaveTrailer(id)
        {
            temp.pause();
            temp.currentTime=0;

            // var el = $(id).children("div").children("div .overlay-1").children("video")[0];
            // el.pause();
            // el.currentTime = 0;
            // var source = $(id).children("div").children("div .overlay-1").children("video").children("source");
            // setTimeout( function()
            // {
            //     $(source[0]).attr('src', '');
            //     el.load();
            // }  , 1000 );

            //console.log(source[0]);
        }
    </script>

    <script>
        function likeDislikeVideo(action, id)
        {
            likeDislikeURL = "{{route('front.ajaxLikeDislikeVideo', ['', ''])}}"+"/"+action+"/"+id;
            $.ajax({
                type: "GET",
                url: likeDislikeURL,
                success: function(data)
                {
                    if(action == 'like')
                    {
                        $('.like-video-counter-'+id).html(data);
                    }

                    if(action == 'dislike')
                    {
                        $('.dislike-video-counter-'+id).html(data);
                    }

                }
            });

        }
    </script>

    {{-- //auto play upcoming video, checking every time --}}
    <script>
    setInterval(function() {
        console.log('interval');
        $.ajax({
            type: "GET",
            url: "{{route('front.ajaxCheckUpcomingVideo')}}", //this is only changes
            success: function(data) {
                if (data != '#') {
                    // console.log(data);
                    $('#video-title-and-sub-title').html(data.title+' - '+data.sub_title);
                    $('#current-upcomming-video-date').html(data.date);
                    $('#current-upcomming-video-rating-image').attr('src', data.rating_image);
                    $('#current-upcomming-video-duration').html(data.duration);
                    // current-upcomming-video-rating-image
                    $('#upcoming-video-live-video-src').attr('src', data.video_path);
                    var video = $('#upcoming-video-live-video')[0];
                    video.load();
                    video.play();

                }
                if (data == '##') {
                    // console.log(data);
                    $('#upcoming-video-live-video-src').attr('src', '');
                    var video = $('#upcoming-video-live-video')[0];
                    video.load();
                    video.play();
                    location.reload();

                }
            }
        });

    }, 1000); //time in milliseconds
    </script>

    <script>
        @if(isset($currentUpcomingPlayingVideo))
        setTimeout( function()
            {
                // Set video element to variable
                var video = document.getElementById('upcoming-video-live-video');
                video.currentTime = {{$videoForwordTime}};


        }, 5000);//time in milliseconds
        @endif

    </script>

    {{-- script for slider video change --}}
    <script>
        function changeSliderVideo(topSliderId)
        {
            var videosSrc = [];
            @foreach ($data['sliders'] as $slider)
                // $("#slider-video-{{ $slider->id }}").css('display', 'none');
                @isset($slider->getVideo->trailer_path)
                    var videoChangeSlider = $("#slider-video-{{ $slider->id }}")[0];
                    videoChangeSlider.pause();
                    $("#top-slider-video-src-{{ $slider->id }}").attr('src', '#')
                    videoChangeSlider.load();
                    videosSrc[{{ $slider->id }}] = "@if(isset($slider->getVideo->trailer_path)){{ $slider->getVideo->trailer_path }}@endif";
                @endif

            @endforeach

            setTimeout(function() {
                // console.log(videosSrc[id]);
                var videoCurrentSlide = $('#slider-video-'+topSliderId)[0];
                if(videoCurrentSlide != undefined)
                {
                    $('#top-slider-video-src-'+topSliderId).attr('src', videosSrc[topSliderId])
                    // console.log(video);
                    videoCurrentSlide.load();
                    videoCurrentSlide.play();
                    videoCurrentSlide.muted = false;
                }

            }, 1000);

        }
    </script>

    {{-- pause video onscroll --}}
    <script>

        // var videos = document.getElementsByTagName("video");
        var videos = [];

        @foreach ($data['sliders'] as $slider)

                var videoScroll = $("#slider-video-{{ $slider->id }}")[0];
                videos[{{ $loop->iteration }}] = videoScroll;
        @endforeach



        function checkScroll() {
            var fraction = 0.5; // Play when 80% of the player is visible.

            for(var i = 1; i <= videos.length; i++) {

                var videoOnScroll = videos[i];
                if(videoOnScroll != undefined)
                {
                    // console.log(video);

                    var x = videoOnScroll.offsetLeft, y = videoOnScroll.offsetTop, w = videoOnScroll.offsetWidth, h = videoOnScroll.offsetHeight, r = x + w, //right
                        b = y + h, //bottom
                        visibleX, visibleY, visible;

                        visibleX = Math.max(0, Math.min(w, window.pageXOffset + window.innerWidth - x, r - window.pageXOffset));
                        visibleY = Math.max(0, Math.min(h, window.pageYOffset + window.innerHeight - y, b - window.pageYOffset));

                        visible = visibleX * visibleY / (w * h);

                        if (visible > fraction) {
                            videoOnScroll.play();
                            videoOnScroll.muted = false;
                        }
                        else {
                            videoOnScroll.muted = true;
                            videoOnScroll.pause();
                        }
                }


            }

            // for live vroadcast
            var liveBroadcast = $('#upcoming-video-live-video')[0];
            if(liveBroadcast != undefined)
            {
                var xLive = liveBroadcast.offsetLeft, yLive = liveBroadcast.offsetTop, wLive = liveBroadcast.offsetWidth, hLive = liveBroadcast.offsetHeight, rLive = xLive + wLive, //right
                bLive = yLive + hLive, //bottom
                visibleXLive, visibleYLive, visibleLive;

                visibleXLive = Math.max(0, Math.min(wLive, window.pageXOffset + window.innerWidth - xLive, rLive - window.pageXOffset));
                visibleYLive = Math.max(0, Math.min(hLive, window.pageYOffset + window.innerHeight - yLive, bLive - window.pageYOffset));

                visibleLive = visibleXLive * visibleYLive / (wLive * hLive);

                if (visibleLive > fraction) {
                    liveBroadcast.muted = false;
                } else {
                    liveBroadcast.muted = true;
                }
            }


        }

        window.addEventListener('scroll', checkScroll, false);
        window.addEventListener('resize', checkScroll, false);

    </script>


<script>
  var startdatetime = 0;
    var vidImg = document.getElementById("upcoming-video-live-video-img");
    var playBtn = document.getElementById("playBtn");


    var vid = document.getElementById("upcoming-video-live-video");
    var sites = {!!$videoForwordTime!!};

    vid.currentTime += sites
    var curplaytime = vid.currentTime;
    vid.onpause = function() {
        // alert("The video has been paused"+curplaytime);
        startdatetime = new Date().getTime();
        vid.style.display = 'none';
        vidImg.style.display = 'block';
        playBtn.style.display = 'block';

    };

         vid.onplay = function() {

        var enddatetime = new Date().getTime();
        var difference = enddatetime - startdatetime
        difference = Math.floor((difference) / (1000));

        vid.addEventListener('loadedmetadata', function() {
            this.currentTime = 40;

        }, false);


        console.log("The video has been playdd" + difference + '-' + curplaytime + '-' + enddatetime)

        // difference = difference / 60 / 60 / 1000;
        // alert("The video has been playdd"+difference+'-'+curplaytime+'-'+enddatetime);


    };

    function getMessage() {
        //        document.getElementById("upcoming-video-live-video").addEventListener('loadedmetadata', function() {
        //   this.currentTime = 40;

        // }, false);
        var enddatetime = new Date().getTime();
        var difference = enddatetime - startdatetime
        difference = Math.floor((difference) / (1000));
        vid.style.display = 'block';
        vidImg.style.display = 'none';
        playBtn.style.display = 'none';
        vid.play()
        vid.currentTime += difference;
    }

    </script>

@endsection