@extends('front.layout')
@section('custom-style')
<meta name="csrf-token" content="{{ csrf_token() }}">
<link href="https://vjs.zencdn.net/7.8.4/video-js.css" rel="stylesheet" />
<script src="https://vjs.zencdn.net/7.8.4/video.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mediaelement/4.2.6/mediaelementplayer.css">
<link rel="stylesheet" href="{{url('front/video-player/dist/jump-forward/jump-forward.css')}}">
<link rel="stylesheet" href="{{url('front/video-player/dist/skip-back/skip-back.css')}}">
<link rel="stylesheet" href="{{url('front/video-player/dist/speed/speed.css')}}">

<style>
    .pagination {
        font-family: 'Merriweather', serif !important;
        display: inline-flex;
    }

    a.page-link {
        font-family: 'open sans', sans-serif;
        font-weight: 400 !important;
        font-size: 18px !important;
    }

    /* .page-item:last-child .page-link :hover{
background-color:red;
 background: red!important;
} */
    .pagination li a.page-link:hover {
        background: #DFA326;
        border-radius: 15% !important;

    }

    .pagination li:first-child a.page-link:hover {
        background: #DFA326;
        border-radius: 15% !important;
    }

    .pagination li:last-child a.page-link:hover {
        /* background-color: transparent; */
        background: #DFA326;
        border-radius: 15% !important;
    }

    .pagination li a.page-link {
        color: #fff !important;
        /* background: transparent; */
        /* background: #000; */
        background-color: transparent;
        font-size: 20px;
        font-weight: 600;
        line-height: 38px;
        height: 40px;
        width: 40px;
        /* font-family: "Merriweather', serif" */
        padding: 0;
        margin: 0 5px;
        border: none;
        /* border-radius: 50%; */
        border-radius: 50%;
        display: block;
        overflow: hidden;
        position: relative;
        z-index: 1;
        transition: all 0.5s ease 0.2s;
    }

    .button {
        width: 19%;
        height: 50px;
        border-radius: 5px;
        border: none;
        color: white;

        font-size: .75rem;
        float: left;
        margin: 5px;
        font-weight: 600;
        /* font-family: "open sans, sans-serif" */
        /* background-color: #2e343a;
  border-color:none */

    }

    .button:hover {
        background-color: #dfa326 !important;
        color: #000f1e
    }

    .slider-category-text,
    .slider-duration-text {
        font-size: 12px;
    }

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

    .media-scale-transform:hover {
        transform: scale(1.2) !important;
        transition: .3s !important;
        border-radius: 2px;
    }

    .overlay:hover {
        border-radius: 5px !important;
    }

    .media-wrap-row-video-section {
        flex-wrap: nowrap;
    }

    .font-size-20 {
        margin-left: 15px;
    }

    .video-title-without-hover {
        position: relative;
        bottom: 40px !important;
        left: 10px;
        font-size: 12px;
        font-weight: 700;
        color: #fff;

    }

    .media-scale-transform:hover .video-title-without-hover {
        display: none !important;
    }

    .overlay {
        height: auto !important;
    }

    .col-lg-2 {
        padding: 0px 5px !important;
    }

    .mb-2 {
        margin-bottom: 0px !important;
    }

    .breadcrumb {
        margin-top: 20px;
    }

    #player1,
    #player1_html5 {
        width: 100% !important;
        object-fit: contain;
        /*height: 500px;*/
        height: auto;
    }

    .pt-80 {
        padding-top: 4rem !important;
    }

    .text-white {
        font-size: 0.75rem !important;
        color: #fff !important;
    }

    .video-description,
    .video-description div,
    .video-description p {
        color: #F4F4F4 !important;
        font-size: 12px;
    }

    .live_streaming_section {
        position: relative;
    }

    @media (max-width:767px) {
        .live_streaming_btn_section_2 {
            width: 80px !important;
            height: 80px !important;
            position: absolute;
            top: -30px;
            right: 10px;
        }

        .live_streaming_btn_section_3 {
            width: 100px !important;
            height: 80px !important;
            position: absolute;
            top: -30px;
            right: calc(50% - 50px);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        #mob_rating_div{
            max-width:150px !important;
            left: -15px !important;
        }

        .likeiconbtn-btn {
            width: 80;
            height: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: none;
            outline: none;
            background-color: transparent !important;
            overflow: hidden !important;
            box-shadow: none !important;
            z-index:9999 !important;
        }

        .wrapper-icon-cirlce {
            width: 35px;
            height: 35px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: none;
            outline: none;
            border-radius: 50% !important;
            border: 2px solid #fff;
            background-color: transparent;
            overflow: hidden !important;
        }

        .active-wrapper-icon-circle {
            border: none;
            background-color: #DFA324 !important;
        }

        .wrapper-icon-cirlce i {
            font-size: 1em;
            display: block;
        }

        #dislike-wrapper-icon-circle i {
            margin-left: 10px;
            transform: rotate(180deg);
        }

        #dislike-wrapper-icon-circle {
            margin-left: 10px;
        }
    }

    .likeiconbtn-btn:active, .likeicon-btn:focus{background-color:transparent !important;}

    @media only screen and (min-width : 768px) and (max-width : 991px) {
        .live_streaming_btn_section_2 {
            width: 100px !important;
            height: 100px !important;
            position: absolute;
            top: 0;
            right: 10px;
        }

        .live_streaming_btn_section_3 {
            width: 100px !important;
            height: 100px !important;
            position: absolute;
            top: 0;
            right: 100px;
        }

        .likeiconbtn-btn {
            width: 100px;
            height: 100px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: none;
            outline: none;
            background-color: transparent !important;
            overflow: hidden !important;
            box-shadow: none !important;
            z-index:9999 !important;

        }

        .wrapper-icon-cirlce {
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: none;
            outline: none;
            border-radius: 50% !important;
            border: 2px solid #fff;
            background-color: transparent !important;
            overflow: hidden !important;
        }

        .active-wrapper-icon-circle {
            border: none;
            background-color: #DFA324 !important;
        }

        .wrapper-icon-cirlce i {
            font-size: 1.4em;
            display: block;
        }

        #dislike-wrapper-icon-circle i {
            transform: rotate(180deg);
        }
    }

    @media (min-width : 992px) {

        .live_streaming_btn_section_2 {
            width: 100px !important;
            height: 100px !important;
            position: absolute;
            top: 0;
            right: 10px;
        }

        .live_streaming_btn_section_3 {
            width: 120px !important;
            height: 100px !important;
            position: absolute;
            top: 0;
            right: calc(50% - 60px);
        }

        .likeiconbtn-btn {
            width: 100px;
            height: 100px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: none;
            outline: none;
            background-color: transparent !important;
            overflow: hidden !important;
            box-shadow: none !important;
            z-index:9999 !important;

        }

        .wrapper-icon-cirlce {
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: none;
            outline: none;
            border-radius: 50% !important;
            border: 2px solid #fff;
            background-color: transparent;
            overflow: hidden !important;
        }

        .active-wrapper-icon-circle {
            border: none;
            background-color: #DFA324 !important;
        }

        .wrapper-icon-cirlce i {
            font-size: 1.4em;
            display: block;
        }

        #dislike-wrapper-icon-circle i {
            transform: rotate(180deg);
        }
    }

    /* read more/less css styling */
    .video-description {
        --line-clamp: 3;
    }

    .video-description p:first-of-type {
        display: -webkit-box;
        -webkit-line-clamp: var(--line-clamp);
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .read-more__checkbox {
        clip: rect(0 0 0 0);
        clip-path: inset(100%);
        height: 1px;
        overflow: hidden;
        position: absolute;
        white-space: nowrap;
        width: 1px;
    }

    .read-more__checkbox~.read-more__label {
        cursor: pointer;
        font-size: 1em;
        font-weight: 700;
        text-decoration: underline;
        transform: translateY(-10px);
    }

    /* Focus and hover styles for accessibility! */
    .read-more__checkbox:focus~.read-more__label {
        border-bottom: 1px solid #fff;
        /*box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.5);*/
    }

    .read-more__checkbox:hover~.read-more__label {
        text-decoration: none;
    }

    .read-more__checkbox~.read-more__label::before {
        content: attr(data-read-more);
    }

    .read-more__checkbox:checked~.read-more__label::before {
        content: attr(data-read-less);
    }

    .read-more__checkbox:checked~.readmoreptext {
        --line-clamp: none;
        -webkit-line-clamp: var(--line-clamp);
    }

    /* read more/less css styling */

    .single-video-page-details {
        margin-top: 30px;
    }

    .list-unstyled {
        padding-top: 20px;
    }

    /*additional styling - for the social share modal*/
    .single-player-vid-details-container {
        position: relative;
    }

    .socialsharesection {
        position: absolute;
        top: 0;
        width: 100%;
    }

    .responsive-media-social-share-icon {
        Width: 100%;
        height: 100%;
    }

    .socialshareiconbtn-btn {
        width: 100px;
        height: 100px;
        border-radius: 50% !important;
        background-color: transparent !important;
        overflow: hidden !important;
    }



    .copy-link-section-btn {
        width: 70px;
        height: 70px;
        border-radius: 100%;
        background-color: ghostwhite !important;
    }

    .copy-link-section-btn i {
        font-size: 2em;
        color: rgba(0, 0, 0, .7);
    }

    .copy-link-section-btn:hover,
    .copy-link-section-btn:active,
    .copy-link-section-btn:focus {
        background-color: #DFA326 !important;
    }

    .clickedbtn1 {
        box-shadow: 0 0 0 8px transparent;
        animation: pulse1 1s;
        animation-iteration-count: 4;
    }

    @keyframes pulse1 {
        from {
            box-shadow: 0 0 0 0 green;
        }
    }

    /* change the twitter logo to X */

    .jssocials-share.jssocials-share-twitter .jssocials-share-link {
        background-color: black !important;
    }

    i.fa.fa-twitter.jssocials-share-logo:before {
        content: "";
        display: inline-block;
        width: 15px;
        height: 15px;
        /*background-image: url('https://about.twitter.com/content/dam/about-twitter/x/brand-toolkit/logo-black.png.twimg.1920.png');*/
        background-image: url('https://verity.live/public/front/assets/img/x-share-icon-logo-letter-tr.png');
        background-size: cover;
    }

    @media(max-width: 575px) {

        .socialsharesection {
            margin: 0 !important;
            left: 0 !important;
        }

        .my-video {
            borderL px colif red;
            ,
        }

        .socialshareiconbtn-btn {
            width: 70px;
            height: 70px;
            border-radius: 100% !important;
            background-color: transparent !important;
            overflow: hidden !important;
        }

        .sharemodaldivparel {
            padding: 0 !important;
            overflow: hidden !important;

        }

        .sharemodaldiv {
            margin-left: 0px !important;
            margin-bottom: 0 !important;
            width: 100% !important;
            position: fixed !important;
            left: 0 !important;
            bottom: 0 !important;
            border-bottom-left-radius: 0 !important;
            border-bottom-left-radius: 0 !important;
            transition: none !important;
            transition-property: none !important;
        }

        .modal-content {
            /*background-color: #16202A !important;*/
            /*color: #fff;*/
            border-bottom-left-radius: 0 !important;
            border-bottom-right-radius: 0 !important;
        }

        .copy-link-section-btn {
            width: 70px;
            height: 70px;
            border-radius: 100%;
            background-color: ghostwhite !important;
        }

        .copy-link-section-btn i {
            font-size: 2em;
            color: rgba(0, 0, 0, .7);
        }

        .copy-link-section-btn:hover,
        .copy-link-section-btn:active,
        .copy-link-section-btn:focus {
            background-color: #DFA326 !important;
        }

        .clickedbtn1 {
            box-shadow: 0 0 0 8px transparent;
            animation: pulse1 1s;
            animation-iteration-count: 4;
        }

        @keyframes pulse1 {
            from {
                box-shadow: 0 0 0 0 green;
            }
        }

        .jssocials-share {
            display: block !important;
            margin-bottom: 2vh !important;
        }

        .jssocials-shares {
            display: flex;
        }

        /*.socialshareiconbtn-btn{*/
        /*  width:100% !important;*/
        /*  justify-content:center !important;*/
        /*}*/
    }

    /*additional styling */

    @media(max-width:575px) {
        .live-broadcast-related-videos-section-video-container-mb {
            width: 31% !important;
            margin: 0.5vh 0.7% !important;
            display: inline-block !important;
        }

        .featured_img_sp_mb {
            height: 120px !important;
        }

        .description-sp-mb {
            font-size: 8px !important;
        }
    }

    @media screen and (min-width: 576px) and (max-width:768px) {
        .gird-view-videos .item {
            width: 100% !important;
            float: none !important;
            margin: 0px !important;
        }
    }

    /* iPads (landscape) ----------- */
    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {

        /* Styles */
        .item {
            width: 48% !important;
            float: left !important;
            margin: 5px;
        }
    }

    /* iPads (portrait) ----------- */
    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
        .item {
            width: 48% !important;
            float: left !important;
            margin: 5px;
        }
    }


    @media (max-width:768px) {
        .button {
            width: 100% !important;
            float: none;
            margin-bottom: 10px !important;
            margin-top: 10px !important;
            margin-left: 0px !important;
            margin-right: 0px !important
                /* background-color: #2e343a;
  border-color:none */

        }
    }


    @media (min-width:768px) {
        .button {
            width: 47% !important;
            margin-bottom: 10px !important;
            margin-top: 10px !important;
            /* background-color: #2e343a;
  border-color:none */

        }


    }


    @media (min-width:1100px) {
        .button {
            width: 19% !important;
            margin-bottom: 10px !important;
            margin-top: 10px !important;
            /* background-color: #2e343a;
  border-color:none */

        }


    }

    /* Extra small devices (phones, 600px and down) */
    @media only screen and (max-width: 600px) {
        .flex-nowrap {
            -ms-flex-wrap: nowrap !important;
            flex-wrap: wrap !important;
        }
    }

    @media only screen and (min-width: 992px) {
        .flex-nowrap {
            -ms-flex-wrap: nowrap !important;
            flex-wrap: wrap !important;
        }

        #player1,
        #player1_html5 {
            width: 100% !important;
            object-fit: contain;
            height: auto;
        }

        .episode-display-btn {
            width: 18% !important;
            margin: 2vh 1% !important;
        }
    }

    @media(max-width:576px) {
        .media-wrapper {
            max-height: 30vh;
            padding: 0 !important;
            overflow: hidden !important;
        }

        .media-wrapper div:first-child {
            height: 100% !important;
            margin: 0 !important;
        }

        video {
            height: 100% !important;
        }

        .pr-lineup-border-line {
            transform: translateY(-8px);
        }

        .mb-category-rel-vids-title {
            font-size: 16px !important;
        }

        .vjs-poster {
            width: 100%;
            height: 100% !important;
        }
    }

    @media(min-width:1199px) {
        .media-wrapper {
            max-height: 720px;
            overflow: hidden !important;
            /* border:3px solid red; */
        }

        video {
            height: 720px;
            object-fit: fill !important;
            /* border:3px solid yellow; */
        }

        .video-lg-fullscreen {
            height: 100% !important;
            border: 5px solid pink !important;
        }
    }

    .video-lg-fullscreen {
        height: 100% !important;
    }

    footer{display:none;}
</style>
<style>
    @media(min-width:992px) {
        .orientation-message-block {
            display: none !important;
        }

        .sp-video-item {
            width: 19.48% !important;
            /* width: 238.08px !important;  */
            /* height:398.35px !important; */
            margin-right: 3px !important;
            margin-left: 3px !important;
        }
    }

    @media(orientation: portrait) {
        .orientation-message-block {
            display: none !important;
        }
    }

    @media (orientation: landscape) and (max-width: 991px) and (max-height: 576px) {
        .orientation-message-block {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            background-color: #dfa326;
            z-index: 999999999999;
            /* Set a higher value for the z-index */

            display: flex;
            justify-content: center;
            align-items: center;
        }

        .orientation-message-block h2 {
            color: #ffffff !important;
            font-size: 1.5em;
            font-weight: 700 !important;
        }
    }

    @media (orientation: landscape) and (max-width: 991px) and (min-height: 576px) {
        .orientation-message-block {
            display: none !important;
        }
    }

    /*landscape-orientation-message-block*/
    @media(orientation: landscape) and (max-width:992px) and (max-height: 576px) {
        .landscape-orientation-video-play-screen {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            background-color: #000F1E;
            z-index: 999999999999;
            /* Set a higher value for the z-index */
            display: flex;
            justify-content: center;
            align-items: center;
            background-size: 100% 100%;
            background-position: center;
        }

        .landscape-orientation-video-play-screen .fullscreen_btn {
            width: auto;
            height: auto;
            /* background-color: #ED3833; */
            display: flex;
            justify-content: center;
            align-items: center;
            /* border-radius: 50%; */
            border: none;
            outline: none;

            background-color: rgba(0, 0, 0, 0);
            border: 1px solid rgb(255, 255, 255);
            padding: 15px 40px;
            border-radius: 10px;
            animation: shadow-pulse 1.5s infinite;
        }

        .landscape-orientation-video-play-screen .fullscreen_btn i {
            color: #ffffff;
            font-size: 1.5em;
        }

        @keyframes shadow-pulse {
            0% {
                box-shadow: 0 0 0 0px rgba(230, 51, 46, 0.4);
            }

            100% {
                box-shadow: 0 0 7px 25px rgba(230, 51, 46, 0);
            }
        }


        /* hide entire page */
        header,
        footer {
            display: none !important;
        }

        /* hide entire page */
    }

    @media not all and (orientation: landscape) and (max-width:992px) and (max-height: 576px) {
        .landscape-orientation-video-play-screen {
            display: none !important;
        }
    }

    /*landscape-orientation-message-block*/

    /* additional pagination styling */

    @media(max-width:575px) {
        .category-page-subtitle-slide-custom-mb-title {
            margin-top: 6vh !important;
        }

        .live-broadcast-related-videos-section-page-number,
        .live-broadcast-related-videos-second-section-page-number {
            height: 25px !important;
            width: 25px !important;
        }

        .live-broadcast-related-videos-section-active,
        .live-broadcast-related-videos-second-section-active {
            font-size: 1.1em !important;
            height: 27px !important;
            width: 27px !important;
        }

        .live-broadcast-related-videos-section-custom-pagination {
            width: 48% !important;
            flex-wrap: wrap;
            flex-shrink: 0 !important;
        }

        .live-broadcast-related-videos-section-arrow,
        .live-broadcast-related-videos-second-section-arrow {
            background-color: #ffffff00;
            color: #0057b3;
            border: none;
            cursor: pointer;
        }

        .live-broadcast-related-videos-section-page-number,
        .live-broadcast-related-videos-second-section-page-number {
            margin-bottom: 5px !important;
        }

    }


    @media(min-width:576px) {
        .com_soon-dp-btn {
            transform: translateX(0) !important;
        }
    }



    .img-rating-specific-block {
        transform: translateY(-5px) !important;
    }

    .vedio_symbol {
        width: 100%;
        justify-content: left;
        top: 20%;
        left: 50%;
        font-size: 13px;
    }

    .pagination {
        font-family: 'Merriweather', serif;
        display: inline-flex;
    }

    a.page-link {
        font-family: 'open sans', sans-serif;
        font-weight: 400 !important;
        font-size: 18px !important;
    }

    .pagination li a.page-link:hover {
        background: #DFA326;
        border-radius: 15% !important;
    }

    .pagination li:first-child a.page-link:hover {
        background: #DFA326;
        border-radius: 15% !important;
    }

    .pagination li:last-child a.page-link:hover {
        background: #DFA326;
        border-radius: 15% !important;
    }

    .pagination li a.page-link {
        color: #fff !important;
        background-color: transparent;
        font-size: 22px;
        font-weight: 600;
        line-height: 38px;
        height: 40px;
        width: 40px;
        padding: 0;
        margin: 0 5px;
        border: none;
        border-radius: 50%;
        display: block;
        overflow: hidden;
        position: relative;
        z-index: 1;
        transition: all 0.5s ease 0.2s;
    }

    .pagination li a.page-link:focus,
    .pagination li.active a.page-link {
        color: #fff !important;
        background: #FD1600;
        box-shadow: 0 0 10px -2px rgba(0, 0, 0, 0.3);
    }

    .pagination li:first-child a.page-link,
    .pagination li:last-child a.page-link {
        background: transparent;
    }

    .pagination li.disabled {
        cursor: not-allowed;
        opacity: .5;
    }

    .pagination li i {
        font-family: 'FontAwesome';
        font-size: 40px;
        color: #fff;
    }

    @media(max-width:767px) {
        .item.landscape-type-item {
            margin-bottom: 2vh !important;
        }

        #sharemodal{ z-index:9999 !important; }
    }

    /* temporary styling here - will move later */
    .live-broadcast-related-videos-section,
    .live-broadcast-related-videos-second-section {
        border: none !important;
    }

    .live-broadcast-related-videos-section-pagination {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .live-broadcast-related-videos-section-custom-pagination {
        text-align: center;
        margin-top: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .live-broadcast-related-videos-section-pages {
        display: flex;
        align-items: center;
        justify-content: space-between;
        max-width: 100%;
        width: 200px;
    }

    .live-broadcast-related-videos-section-page-number,
    .live-broadcast-related-videos-second-section-page-number {
        cursor: pointer;
        background-color: #DFA326;
        color: #111111;
        border-radius: 5px;
        height: 30px;
        width: 30px;
        margin: 0 5px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: 0.4s ease;
    }

    .live-broadcast-related-videos-section-active,
    .live-broadcast-related-videos-second-section-active {
        font-size: 1.3em;
        height: 30px;
        width: 30px;
        background-color: #0057b3;
        color: white;
    }



    .live-broadcast-related-videos-section-arrow,
    .live-broadcast-related-videos-second-section-arrow {
        background-color: #ffffff00;
        color: #0057b3;
        border: none;
        cursor: pointer;
    }

    .live-broadcast-related-videos-section-arrow:hover,
    .live-broadcast-related-videos-second-section-arrow:hover {
        color: #0056b3;
    }

    .live-broadcast-related-videos-section-arrow:disabled,
    .live-broadcast-related-videos-second-section-arrow:disabled {
        background-color: #ffffff00;
        color: #ccc;
        cursor: not-allowed;
    }

    /* #live-broadcast-related-videos-section-prevPage {
        margin-right: 12px;
    }

    #live-broadcast-related-videos-section-nextPage {
        margin-left: 12px;
    } */

    .live-broadcast-related-videos-section-arrow,
    .live-broadcast-related-videos-second-section-arrow {
        font-size: 1em;
    }

    .live-broadcast-related-videos-section-nav-text {
        font-size: 0.7em;
        letter-spacing: 0.3em;
    }

    /*styling the live streaming thumbnail to fill thw whole video width container 100% */
    .vjs-poster {
        background-size: 100% 100%;
        background-position: center !important;
    }

    /*styling the live streaming thumbnail to fill thw whole video width container 100% */

    /*additional pagination styling */

    /* acive-selected-video-thumbnail-buttons */


    .non-active-video-episode-thumbnail-btn {
        border: none;
        color: #fff;
    }

    .active-video-episode-thumbnail-btn {
        outline: 0.1px solid #DFA323;
        border-radius: 5px;
        color: #DFA323;
    }

    .ep-counter-text-display {
        font-weight: 400;
        position: absolute;
        bottom: -40px;
        text-align: center;
        width: 100%;
    }

    @media(max-width: 575px) {
        .ep-counter-text-display {
            font-weight: 400 !important;
            position: absolute;
            bottom: -40px;
            left: 0;
            font-size: 0.8em;
            text-align: center;
        }

        .video-js .vjs-control-bar {
            height: 30px !important;
        }

        .vjs-loading-spinner {
            display: block;
            position: absolute;
            top: 50%;
            left: 50%;
            margin: -10px 0 0 -10px;
            opacity: 0.85;
            text-align: left;
            border: 6px solid rgba(43, 51, 63, 0.7);
            box-sizing: border-box;
            background-clip: padding-box;
            width: 20px !important;
            height: 20px !important;
            border-radius: 10px;
            visibility: hidden;
        }

        video {
            object-fit: fill;
        }

        /* Styles when the video is in fullscreen mode */
        .vjs-tech:fullscreen {
            object-fit: contain !important;
        }
    }


    /*acive-selected-video-thumbnail-buttons */

    .vjs-big-play-button {
        top: calc(50% - 0.8em) !important;
        left: calc(50% - 1.5em) !important;
    }

    @media screen and (orientation: portrait) and (max-width: 575px) {

        .portrait-mode-video {
            object-fit: contain;
        }
    }

    @media screen and (orientation: landscape) and (max-width: 575px) {

        video,
        .portrait-mode-video {
            object-fit: fill !important;
        }
    }

    /*page loader */
    #loader {
        height: 100vh;
        width: 100%;
        background-color: #000F1E;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 999999999;
        position: fixed;
        top: 0;
        left: 0;
        overflow: hidden;
    }

    .loader {
        width: 48px;
        height: 48px;
        border: 3px dotted #FFF;
        border-style: solid solid dotted dotted;
        border-radius: 50%;
        display: inline-block;
        position: relative;
        box-sizing: border-box;
        animation: rotation 2s linear infinite;
    }

    .loader::after {
        content: '';
        box-sizing: border-box;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        border: 3px dotted #FF3D00;
        border-style: solid solid dotted;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        animation: rotationBack 1s linear infinite;
        transform-origin: center center;
    }

    @keyframes rotation {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }

    @keyframes rotationBack {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(-360deg);
        }
    }

    .dp-none {
        display: none !important;
    }

    .login-message {
        width: 100%;
        height: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: fixed;
        bottom: 10%;
        left: 0;
        z-index: 99999999999999;
        display: none;
    }

    .featured-text {
        width: auto;
        height: auto;
        padding: 10px 20px;
        color: #fff;
        background: #303841;
        border-radius: 30px;
    }
</style>
@endsection
@section('content')

<script>
    window.addEventListener('load', function () {
        document.querySelector('.loader-wrapper').style.display = 'none';
        document.querySelector('.content-main-block').style.display = 'block';
    });
</script>

<!-- page loader -->
<div id="loader" class="loader-wrapper">
    <span class="loader"></span>
</div>
<!-- page loader -->

<!-- landscape-orientation-message-block -->
<div id="landscape-orientation-video-play-screen" class="landscape-orientation-video-play-screen"
    style="background-image: url({{$video->landscape_thumbnail}});">
    <button id="fullscreenbtn" class="fullscreen_btn" onclick="openFullScreen()">
        <i class="fa fa-play" aria-hidden="true"></i>
    </button>
</div>
<!-- landscape-orientation-message-block -->
<main id="content" class="content-main-block" style="display:none;">
    <div class="bg-gray-1100 pt-80">
        <div class="container mx-auto px-md-6 px-xl-7 px-wd-6">
            <nav aria-label="breadcrumb" class="pt-3 pt-md-0">
                <ol class="breadcrumb dark font-size-1" style="align-items:center;">
                    <li class="breadcrumb-item"><a href="{{url('/')}}" class="text-gray-1300"
                            style="color:#dfa326 !important;">Video Review</a></li>
                    <li class="breadcrumb-item text-white active" aria-current="page" style="color:#dfa326 !important;">
                        {{$video->slug}}
                    </li>
                </ol>
            </nav>
            <div class="media-wrapper"
                style="padding:0.5vh 0px !important;margin-left:0;margin-right:0;height:720px !important;">

                <video id="my-video" class="video-js" controls preload="auto"
                    data-setup='{"poster": "{{$video->landscape_thumbnail}}"}'
                    style="width:100%!important;height:720px;">
                    @if(isset($video->trailer_path))
                        <source id="video_src" src="{{ $video->trailer_path }}" type="video/mp4">
                    @else
                        <source id="video_src" src="" type="video/mp4">
                    @endif
                    <p class=" vjs-no-js">
                        To view this video please enable JavaScript, and consider upgrading to a
                        web browser that
                        <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
                    </p>
                </video>
                <script>
                    videojs('my-video', {
                        overrideNative: true,
                        errorDisplay: false,
                        autoplay: false,

                    });
                </script>
            </div>
            <div class="d-md-flex align-items-center justify-content-between single-video-page-details">
                <div class="container single-player-vid-details-container pt-2 pb-5 px-0">
                    <div class="live_streaming_layout_placement mb-0">
                        <div class="live_streaming_section p-2 pb-0 my-0 d-flex justify-content-end">
                           

                            <div id="mob_rating_div" class="live_streaming_btn_section_3 d-flex justify-content-end"
                                style="width:80% !important;">
                                <div class="in_div pl-3" style="width:100% !important;height:100% important;">
                                    @if(isset($video->getRating->image))
                                        <img style="height: 30px!important;
                                                                                                                                                                                                            width: auto!important; margin-top:-5px;
                                                                                                                                                                                                            "
                                            id="specific_video_rating_image_mb"
                                            src="{{url('ratings' . '/' . $video->getRating->image)}}">
                                    @endif
                                    @if(isset($video->getRating))
                                        <span style="font-size:0.7em;" id="specific_rating_description_mb">
                                            {{ $video->getRating->description }} </span>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>

                    <h6
                        class="font-size-24 text-white font-weight-semi-bold font-secondary mb-3 mb-md-1 pt-4 specific-video-title-span-coming-soon-block">
                        <span style="font-size:16px;color:#dfa326 !important;margin-right:5px;"
                            id="video_title_input_block"> {{strtoupper($video->title)}} </span>
                            @if(is_null($video->trailer_path))
                            <button class="btn btn-xs btn-danger ms-1" id="video_coming_soon_input_block"> No Trailer Uploaded</button>
                        @endif
                    </h6>


                    <p class="category-page-subtitle-slide" style="font-size:0.8em;" id="video_sub_title_input_block">
                        {{Str::words($video->sub_title)}}
                    </p>
                    <ul
                        class="list-unstyled nav nav-meta font-secondary mb-3 overflow-auto overflow-md-hidden flex-nowrap flex-md-wrap">
                        <li class="text-white flex-shrink-0 flex-shrink-md-1" id="video_created_at_input_block">
                            {{$video->created_at->format('d M, Y')}}
                        </li>
                        <li class="text-white flex-shrink-0 flex-shrink-md-1" id="video_duration_input_block">
                            {{$video->duration}}
                        </li>
                        <li class="text-white flex-shrink-0 flex-shrink-md-1">
                            @if(isset($video->getCategories))
                                @foreach($video->getCategories as $category)
                                    @if(isset($category->getCategory->name))
                                        <a href="{{route('front.getVideosByCategory', ['device' => 'dp', 'slug' => $category->getCategory->slug])}}"
                                            class="d-none d-xl-inline-block">
                                            {{$category->getCategory->name}}
                                        </a>
                                        <a href="{{route('front.getVideosByCategory', ['device' => 'mb', 'slug' => $category->getCategory->slug])}}"
                                            class="d-inline-block d-xl-none">
                                            {{$category->getCategory->name}}
                                        </a>
                                        @if(!$loop->last)
                                            <span>,</span>
                                        @endif

                                    @endif

                                @endforeach
                            @endif
                        </li>
                        <li class="d-none d-md-block">
                            @if(isset($video->getRating->image))
                                <img id="specific_video_rating_image"
                                    style="height: 30px!important;
                                                                                                                                                                                                    width: auto!important; margin-top:-5px;
                                                                                                                                                                                                    "
                                    src="{{url('ratings' . '/' . $video->getRating->image)}}">
                            @endif

                            @php
                                $main_video_rating_img = '';
                                $main_video_rating_img_description = '';

                                if (isset($video->getRating->image)) {
                                    $temp_main_video_rating_image = "https://verity.live/ratings/{$video->getRating->image}";
                                    $main_video_rating_img = $temp_main_video_rating_image;

                                    $main_video_rating_img_description = $video->getRating->description;
                                } else {

                                    $main_video_rating_img = '';
                                    $main_video_rating_img_description = '';
                                }

                                $retrieved_video_description = strip_tags($video->description);
                                $decoded_video_description = htmlspecialchars_decode($retrieved_video_description);

                            @endphp
                        </li>
                        <li class="d-none d-md-block" id="specific_rating_description">
                            @if(isset($video->getRating))
                                {{ $video->getRating->description }}
                            @endif
                        </li>
                    </ul>
                    <div class="video-description" id="specific_video_description">
                        {!! $video->description !!}
                    </div>

                </div>

            </div>

        </div>
    </div>


    {{-- Video player END--}}
</main>
@endsection

@section('custom-script')

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
    crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/7368c40b21.js" crossorigin="anonymous"></script>

<!-- jsSocials scripts -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
    integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<!--<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery.jssocials/1.4.0/jssocials.min.js"></script>-->
<script src="{{ asset('jsSocials/jsSocials.min.js') }}"></script>
<script src="{{ asset('jsSocials/script.js') }}"></script>
<!-- jsSocials scripts -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/mediaelement/4.2.6/mediaelement-and-player.min.js"></script>
<script src="{{url('front/video-player/dist/jump-forward/jump-forward.js')}}"></script>
<script src="{{url('front/video-player/dist/skip-back/skip-back.js')}}"></script>
<script src="{{url('front/video-player/dist/speed/speed.js')}}"></script>

<script>

    let player = videojs('my-video');
    
     //stop video playback when trailer leaves viewport (crucial for mobile screens)
     $(window).on('scroll', function () {
        $("video").each(function () {
            var video = $(this)[0];
            var videoTop = $(video).offset().top;
            var videoBottom = videoTop + $(video).height();
            var windowTop = $(window).scrollTop();
            var windowBottom = windowTop + $(window).height();

            if(video.id == "my-video_html5_api") {
                return;
            }

            var videoClass = video.classList.value;

            // Check if the video is the closest one to the top of the viewport
            var isClosestToTop = videoTop >= windowTop && videoTop < windowBottom;

            // Check if the video is in the viewport
            if (!isClosestToTop) {
                if (!video.paused) {

                    console.log('pausing video');
                    video.pause();
                    // video.currentTime = 0;
                }
            }


        });
    });

    function stopAllOtherVideos(id) {
        var allVideos = document.querySelectorAll('video');

        allVideos.forEach(function (video) {

            var videoClass = video.classList.value;
            var videoId = 'related-video-' + id;

            if (!video.id == videoId) {
                video.pause();
                video.currentTime = 0;
            }


        });
    }

    function stopAllOtherVideosWithId(videoId) {
        var allVideos = document.querySelectorAll('video');

        allVideos.forEach(function (video) {

            if (!(video.id == videoId)) {
                video.pause();
                video.currentTime = 0;
            }
        });
    }

    var allVideos = document.querySelectorAll('video');

    allVideos.forEach(function (video) {

        video.addEventListener('play', function () {
            stopAllOtherVideosWithId(video.id);
        })
    });

    //Add an event listener to detect when the user has scrolled away from the video element
    $(window).on('scroll', function () {
        $("video").each(function () {
            var video = $(this)[0];
            var videoTop = $(video).offset().top;
            var videoBottom = videoTop + $(video).height();
            var windowTop = $(window).scrollTop();
            var windowBottom = windowTop + $(window).height();

            // Check if the video is in the viewport
            if (videoBottom > windowTop && videoTop < windowBottom) {

            } else {
                // Video is out of the viewport, stop and reset playback
                if (!video.paused) {
                    console.log('pausing video function 2');
                    video.pause();
                    video.currentTime = 0;
                }
            }
        });
    });
    //Related videos playback functions
     //function: pause video on scroll
     var videoOnScroll = $('#my-video_html5_api')[0];

function checkScroll() {
    var fraction = 0.3; // Play when 80% of the player is visible.
    if (videoOnScroll != undefined) {
        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) {
            if (!videoOnScroll.muted) {
                // Video is already unmuted by the user
                videoOnScroll.play();
            } else {
                // Video is muted, mute and autoplay
                videoOnScroll.muted = true;
                videoOnScroll.load();
                videoOnScroll.play();
            }
            //videoOnScroll.muted = true;
            // videoOnScroll.load();
            // videoOnScroll.play();
            //videoOnScroll.muted = false;
        } else {
            if (!videoOnScroll.muted) {
                videoOnScroll.pause();
            } else {
                videoOnScroll.muted = true;
                videoOnScroll.pause();
            }
        }
    }
}

window.addEventListener('scroll', checkScroll, false);
window.addEventListener('resize', checkScroll, false);
//function: pause video on scroll

  // Listen for fullscreen change events
  document.addEventListener('fullscreenchange', () => {

const videoElement = document.getElementById('my-video_html5_api');


if (document.fullscreenElement) {
    if (document.fullscreenElement.id == "my-video") {

        if (!videoElement.classList.contains('portrait-mode-video')) {
            videoElement.classList.add('portrait-mode-video');
        }

        videoElement.style.height = "";

    }
}

else {

    if (videoElement.classList.contains('portrait-mode-video')) {
        videoElement.classList.remove('portrait-mode-video');
    }

    videoElement.style.height = "720px";

    //handle user going back while in landscape mobile mode
    if (window.innerWidth > window.innerHeight) {


        if (!player.paused()) {
            player.pause();
            landscapeOrientationChangeSmDisplay();
            document.getElementsByTagName('body')[0].style.overflow = "auto";
        }
    }
}

});


//video player display for on pause
function videoPlayerPausedDisplay() {

const playBtns = document.getElementsByClassName('vjs-big-play-button');
const playerControlBars = document.getElementsByClassName('vjs-control-bar');
const playBtn = playBtns[0];
const playerControlBar = playerControlBars[0];

playBtn.style.display = "block";
playerControlBar.style.display = "none";
}

//video player display for in playing state
function videoPlayerPlayingDisplay() {

const playBtns = document.getElementsByClassName('vjs-big-play-button');
const playerControlBars = document.getElementsByClassName('vjs-control-bar');
const playBtn = playBtns[0];
const playerControlBar = playerControlBars[0];

playBtn.style.display = "none";
playerControlBar.style.display = "flex";
}


function handleSmDevicesOrientationChange() {

const videoElement = $('#my-video_html5_api')[0];

if (window.innerWidth < window.innerHeight) {
    // console.log('event fired & player is in landscape');

    // landscape
    if (!player.isFullscreen()) {
        // console.log('player is not in fullscreen');

        if (!videoElement.paused) {
            videoElement.muted = true;
            videoElement.pause();
            console.log('player paused');
        } else { 
            // console.log('doing it'); 

        }

        landscapeOrientationChangeSmDisplay();
        document.getElementsByTagName('body')[0].style.overflow = "hidden";
    } else {
        // console.log('player is in fullscreen');
    }

} else {
    console.log('event fired & player is in portrait');
    //potrait
    landscapeOrientationChangeSmDisplayExitFullScreen();
    document.getElementsByTagName('body')[0].style.overflow = "auto";
}
}

//enter fullscreen mode through a user initiated action/gesture
function openFullScreen() {

player.requestFullscreen();
player.autoplay('muted');
}


window.addEventListener('orientationchange', handleSmDevicesOrientationChange);

function landscapeOrientationChangeSmDisplay() {

let displayScreen = document.querySelector('.landscape-orientation-video-play-screen');
let posterURL = extractPlayerPoster();

displayScreen.style.backgroundImage = posterURL;
displayScreen.style.display = "flex";
}


function landscapeOrientationChangeSmDisplayExitFullScreen() {


let displayScreen = document.querySelector('.landscape-orientation-video-play-screen');
displayScreen.style.display = "none";
}

function removeLandscapeOrientationChangeSmDisplay() {

let displayScreen = document.querySelector('.landscape-orientation-video-play-screen');
displayScreen.style.display = "none";
}

//extract the main player background image
function extractPlayerPoster() {

let videoPlayerPosterElements = document.getElementsByClassName('vjs-poster');
let videoPlayerPosterEl = videoPlayerPosterElements[0];
let style = window.getComputedStyle(videoPlayerPosterEl);
let videoPlayerPoster = style.backgroundImage;

return videoPlayerPoster;
}
</script>
@endsection