{% extends "layouts/base.html" %}

{% load static %}
{% load sizify %}
{% load colorefy %}

{% load has_youtube_upload %}
{% load total_videos %}
{% load videos_per_day %}
{% load rest_videos %}

{% block stylesheet %}
    <link rel="stylesheet" href="https://cdn.plyr.io/3.7.3/plyr.css" />
    <style>
        html {
            --plyr-color-main: var(--global-color);
        }
        .plyr {
            border-radius: 6px !important;
        }
        .media_show {
            border-radius: 10px !important;
        }
    </style>
{% endblock %}

{% block title %} Workspace {% endblock title %}

{% block content %}

<div class="content d-flex flex-column flex-column-fluid" id="kt_content">
    <!--begin::Container-->
    <div class="container-xxl" id="kt_content_container">
        <!-- begin::Uploaded Video To Enhance-->
        <div class="card card-flush">
            <!-- begin::Body -->
            <div class="card-body border-0 pt-5">
                <!--begin::Input group : Upload File/URL -->
                <div class="mb-10 fv-row" id="form_upload_info">
                    <!-- begin::Heading -->
                    <div class=" mb-8">
                        <!-- begin::Title -->
                        <h1 class="mb-3"> Add Media </h1>
                        <!-- end::Title -->
                    </div>
                    <!-- end::Heading -->
                    <!-- begin::Upload Form -->
                    <form class="form" id="kt_modal_add_video">
                        {% csrf_token %}
                        <!--begin:: Upload File & Drag & Drop -->
                        <div class="fv-row w-100 mb-8" id="inputopen" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="top" data-bs-dismiss="click" title="Drag & Drop  Your File Or Click Here.">
                            <!--begin::Dropzone-->
                            <div class="dropzone dz-clickable align-items-center" id="kt_add_media">
                                <!--begin::Icon-->
                                <div class="mb-6"> 
                                    <span class="fad fa-file-upload text-primary fs-5x"></span> 
                                </div>
                                <!--end::Icon-->
                                <input type="file" id="inputFile" name="file" style="display: none" > <!--  accept=".png,.jpg,.jpeg,.bmp" -->
                                <!--begin::Info-->
                                <div class="ms-4">
                                    <h3 class="fs-5 fw-bold text-gray-900 mb-1 unselectable"> Drop files here or click to upload. </h3>
                                    <span class="fs-7 fw-semibold text-gray-400 unselectable"> All Files Accepted (Video/Audio) </span>
                                </div>
                                <!--end::Info-->
                            </div>
                            <!--end::Dropzone-->
                        </div>
                        <!--end:: Upload File & Drag & Drop -->
                        <!--begin:: Uploading Progress & Status -->
                        <div class="fv-row w-100 mb-8" id="mediaplace" style="display: none">
                            <video id="generated" class="media_show" playsinline controls preload="metadata" height="255px" width="470px">
                                <source src="" id="media_video">
                            </video>
                        </div>
                        <div class="mh-300px scroll-y me-n7 pe-7" id="upload_message" style="display: none"> </div>                        
                        <div class="mh-300px scroll-y me-n7 pe-7" id="cancel_div">
                            <a href='javascript:void(0)' class="d-none" type="button" id="cancel">Cancel</a>
                            <a href='javascript:void(0)' class="d-none" type="button" id="try_again">Try Again</a>
                        </div>
                        <!--end:: Uploading Progress & Status -->
                    </form>
                    <!-- end::Upload Form -->
                </div>
                <!--end::Input group : Upload File/URL -->
            </div>
            <!-- end::Body -->
        </div>
        <!-- end::Uploaded Video To Enhance -->
        <!-- begin::Uploaded Video To Enhance-->
        <div class="card card-flush mt-5">
            <!-- begin::Body -->
            <div class="card-body border-0 pt-5">
                <h3 class="card-title align-items-start flex-column unselectable">
                    <span class="card-label fw-bolder fs-3 mb-1"> Last uploaded videos </span>
                    <span class="text-muted mt-1 fw-bold fs-7"> Latest 5 videos </span>
                </h3>
            </div>
            <!--begin::Table-->
            <div id="kt_file_manager_list_wrapper" class="dataTables_wrapper dt-bootstrap4 no-footer m-2 p-2">
                <div class="table-responsive">
                    
                </div>
            </div>
            <!-- end::Body --> 
        </div>
        <!-- end::Uploaded Video To Enhance -->
    </div>
    <!--end::Container-->
</div>
{% endblock content %}

{% block javascripts %}
<script src="https://cdn.plyr.io/3.7.3/plyr.js"></script>


<script src="{% static 'js/enhance_upload.media.js' %}"></script>

<script>
    // Window load
    window.addEventListener("load", function() {
        KTMediaModal.init();
    }); 

    var toplay =  new Plyr(document.querySelector('#generated'));

</script>

<script>
    var init_video = function(url){
        var modal = document.querySelector('#streamModal');
        var player = modal.querySelector('#player');
        var video = document.createElement('video');
        if(!url.includes("media/")) url = "media/original_videos/"+url ;
        video.src = 'https://usevoice.io:8060/' + url; // URL.createObjectURL('http://usevoice.io/' + url)

        video.classList.add("d-flex");
        video.style='border-radius: 6px';

        //video.poster = "";
        video.autoplay = false;
        video.controls = true;
        video.preload="auto";

        //video.height = 450; // 👈️ in px
        video.width = 800//"100%"; // 👈️ in px

        player.appendChild(video);

        var toplay =  new Plyr(video);
        // toplay.element.classList.add('media_show');

        modal.addEventListener('hidden.bs.modal', function(){
            //player.stop();
            //player.destroy();
            video.pause();
            video.currentTime = 0;
            toplay.destroy;
            player.innerHTML = "";
        });

    };
</script>

{% endblock %}