<head>
    <link rel="stylesheet" type= "text/css" href="{{ url_for('static',filename='video-js.min.css') }}">
</head>
{% extends "base.html" %}
{% block content %}
<div class="ui text container">
    {% if video.nginxUrl == "#" %}
    <div class="ui center aligned text container">
        <div class="ui segment">
                <h4 class="ui header">ERROR WITH VIDEO</h4>
        </div>
    </div>
    {% elif video.isUpcoming %}
    <div class="ui center aligned text container">
        <div class="ui segment">
                <h4 class="ui header">SCHEDULED VIDEO</h4>
                <h5 class="ui header">{{video.premieres}}</h5>
        </div>
    </div>
    {% elif video.isLive %}
    <div class="video-js-responsive-container vjs-hd">
        <video-js id=live width="1080" class="video-js vjs-default-skin" controls buffered>
            <source
            src="{{urls[0]['url']}}"
            type="application/x-mpegURL">
        </video-js>
    </div>
        <div class="ui center aligned text container">
            <div class="ui segment">
                    <h3 class="ui header">LIVESTREAM VIDEO</h3>
                    <h4 class="ui header">FEATURE AVAILABLE SOON</h4>
                    <h5 class="ui header">Livestreams are under developent and still not supported on Yotter.</h5>
            </div>
        </div>
    {%else%}
        <div class="video-js-responsive-container vjs-hd">
            <video class="video-js vjs-default-skin" 
            data-setup='{ "playbackRates": [0.5, 0.75, 1, 1.25,1.5, 1.75, 2] }'
            width="1080"
            controls
            buffered
            preload="none">
            {% if config.nginxVideoStream %}
                {% for url in urls %}
                    <source src="{{url.url}}" type="video/{{url.ext}}">
                {% endfor %}
            {% else %}
                <source src="{{url_for('stream', url=video.videoUrl.replace('/', 'YotterSlash'))}}" type="video/mp4">
            {% endif %}
            </video>
        </div>
    {%endif%}

    <div class="ui segments">
        <div class="ui segment">
            <h2 class="ui header break-word">{{video.title}}</h2>
        </div>
        <div class="ui horizontal segments">
          <div class="center aligned ui segment">
            <a href="{{ url_for('channel', id=video.channelId)}}">
                {%if video.author.__len__() > 8%}
                    <i class="user icon"></i> {{video.author[0:10]+'...'}}
                {%else%}
                    <i class="user icon"></i> {{video.author}}
                {%endif%}
            </a>
          </div>
          <div class="center aligned ui segment">
            <h4 class="ui header"><i class="grey eye icon"></i>{{video.viewCount}}</h4>
          </div>
          <div class="center aligned ui segment">
            {% if video.averageRating | int > 49 %}
                <h4 class="ui header"><i class="green thumbs up icon"></i> {{video.averageRating[0:4]}}%</h4>
            {% else %}
                <h4 class="ui header"><i class="red thumbs down icon"></i> {{video.averageRating[0:4]}}%</h4>
            {% endif %}
          </div>
        </div>

        <div class="ui raised center aligned segment break-word">
            <p><i class="grey music icon"></i><b><a href="{{video.nginxAudioUrl}}">Play Only Audio</a></b></p>
            <audio controls>
                <source src="{{video.nginxAudioUrl}}">
              Your browser does not support the audio element.
            </audio>
        </div>

        <div class="ui raised segment break-word">
            <p>{{video.description}}</p>
        </div>
    </div>

    {% if comments != False %}
    <div class="ui comments">
        <h3 class="ui dividing header">Comments</h3>
        {% for comment in video.comments %}
                {% include '_video_comment.html' %}
        {% endfor %}
    </div>
    {%endif%}
            
<script src="{{ url_for('static',filename='video.min.js') }}"></script>
<script src="{{ url_for('static',filename='videojs-http-streaming.min.js')}}"></script>
{% if video.isLive %}
    <script>
        var player = videojs('live');
        player.play();
    </script>
{% endif %}
{% endblock %}