{% extends "base.html" %}

{% block content %}
    <div class="w3-row" style="text-align: center">
    <div class="w3-col s1 w3-hide-small m1 l2"><p></p></div>
    <div class="w3-col s12 m10 l8">
        <video id="player" class="video-js vjs-big-play-centered vjs-16-9" style="display: inline-block" controls preload="auto"
               poster="https://image.tmdb.org/t/p/original{{ movie.backdrop_path }}" data-setup="{}">
            {% if movie.extended and movie.directors_cut %}
            <source src="{{ url_for("tv_movies.index") }}/get_movie/{{ movie.tmdb_id }}?extended=True&directors_cut=True" label="extended directors cut" res="1080" type="video/webm">
            {% endif %}
            {% if movie.extended and not movie.directors_cut %}
            <source src="{{ url_for("tv_movies.index") }}/get_movie/{{ movie.tmdb_id }}?extended=True" label="extended" res="1080" type="video/webm">
            {% endif %}
            {% if movie.directors_cut and not movie.extended %}
            <source src="{{ url_for("tv_movies.index") }}/get_movie/{{ movie.tmdb_id }}?directors_cut=True" label="directors cut" res="1080" type="video/webm">
            {% endif %}
            {% if not movie.directors_cut and not movie.extended %}
            <source src="{{ url_for("tv_movies.index") }}/get_movie/{{ movie.tmdb_id }}" label="HD" res="1080" type="video/webm">
            {% endif %}
            {% if movie.res_4k %}
            <source src="{{ url_for("tv_movies.index") }}/get_movie/{{ movie.tmdb_id }}?res_4k=True" label="4k" res="2160" type="video/webm">
            {% 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>
        <h1>{{ movie.title }}</h1>
        <p style="text-align: left">{{ movie.description }}</p>
    <a class="btn btn-primary" href="{{ url_for("tv_movies.index") }}/get_movie/{{ movie.tmdb_id }}{% if movie.extended == 1 %}/extended{% endif %}{% if movie.directors_cut==1 %}/directors_cut{% endif %}" download="{{ movie.title }}">Download</a>
    </div>
        <div class="w3-col s1 w3-hide-small m1 l2"><p></p></div>
    </div>
{% endblock %}

{% block footer_content %}
    <div class="container">
        <img src="/static/svg/tmdb.svg" alt="" style="height: 40px;">
        <p>This product uses the TMDb API but is not endorsed or certified by TMDb.</p>
    </div>
    <script>
    videojs("player").ready(function(){
        let myPlayer = videojs.getPlayer("player");
        myPlayer.videoJsResolutionSwitcher();
        let saved_time = {{ user_data.time }};
        let length = -1;
        let end_time = -1;
        let finished = {{ user_data.finished|string|lower }}; //converts python bool into javascript bool
        if (saved_time > 5 && !finished) {
            myPlayer.currentTime(saved_time);
        }

        myPlayer.on("loadedmetadata", function () {
            length = myPlayer.duration();
            end_time = length-15;
            {% if "credits" in chapters.keys() %}
            end_time = {{ chapters["credits"]["start"] }};
            {% endif %}
        });

        function reqListener() {
            console.log(this.responseText);
        }

        let time = myPlayer.currentTime();
        let timestamp = document.getElementById("timestamp");
        myPlayer.on("timeupdate", function () {
            if (myPlayer.currentTime()-time >= 10) {
                finished = myPlayer.currentTime() >= end_time;
                length = myPlayer.duration();
                let oReq = new XMLHttpRequest();
                oReq.addEventListener("load", reqListener);
                oReq.open("POST", "https://rpi.narnian.us/tv_movies/{{ movie.tmdb_id }}?time="+(time)+"&length="+length+"&finished="+finished{% if movie.extended %}+"&extended=True"{% endif %}{% if movie.directors_cut %}+"&directors_cut=True"{% endif %});
                oReq.send();
                time = myPlayer.currentTime();
        }
        });
        myPlayer.on("pause", function () {
            finished = myPlayer.currentTime() >= end_time;
            length = myPlayer.duration();
            let oReq = new XMLHttpRequest();
            oReq.addEventListener("load", reqListener);
            oReq.open("POST", "https://rpi.narnian.us/tv_movies/{{ movie.tmdb_id }}?time="+(time)+"&length="+length+"&finished="+finished{% if movie.extended %}+"&extended=True"{% endif %}{% if movie.directors_cut %}+"&directors_cut=True"{% endif %});
            oReq.send();
            time = myPlayer.currentTime();
        });

    });
    </script>
{% endblock footer_content %}
