UnTube/apps/main/templates/view_video.html

{% extends 'base.html' %}
{% load humanize %}
{% load static %}

{% block content %}
    <script src="{% static 'htmx/extensions/class-tools.js' %}" type="application/javascript"></script>

    <div id="view_video">
        {% if playlist.has_playlist_changed %}

        {% else %}


            <div class="card text-white bg-dark" style="max-width: 100%;">
                <div class="row g-0">
                    <div class="col-md-4 p-3">
                        <img  class="img-fluid rounded-3" src="{{ video.thumbnail_url }}" style="max-width:100%; height: auto;   object-fit: cover;">
                    </div>
                    <div class="col-md-8">
                        <div class="card-body">
                            <div class="d-flex justify-content-between">
                                <h2 class="card-title text-white">
                                    <a href="https://www.youtube.com/watch?v={{ video.video_id }}" target="_blank" style="color: white; text-decoration: none">{{ video.name }}</a>
                                    <br><small class="h4">{% if video.user_label %}a.k.a <span style="border-bottom: 3px #ffffff dashed;"> {{ video.user_label }}</span>{% endif %}</small>
                                </h2>
                                <h4>
                                    <span id="notice-div">
                                        {% if video.is_marked_as_watched %}
                                            <span class="badge bg-success text-white" >
                                            
                                                <i class="fas fa-flag-checkered me-1"></i> marked watched
                                            </span>
                                        {% endif %}
                                    </span>
                                    <span id="">
                                        <span class="badge bg-dark">
                                            <i class="fas fa-map-pin"></i>
                                        </span>
                                    </span>
                                </h4>
                            </div>
                            <h6>by {{ video.channel_name }}</h6>
                            <p class="card-text">
                                {% if video.description %}
                                    <h5 class="overflow-auto" style="max-height: 350px;">
                                        {{ video.description|linebreaksbr|urlize  }}
                                    </h5>

                                {% else %}
                                    <h5>No description</h5>
                                {% endif %}
                            </p>


                            <h6 class="h5 text-uppercase overflow-auto text-black-50">
                                <a style="text-decoration: none" data-bs-toggle="collapse" href="#{{ video.video_id }}DurationCollapse" role="button" aria-expanded="false" aria-controls="{{ video.video_id }}DurationCollapse">
                                    <span class="badge bg-success mb-1">{{ video.duration }}</span>
                                </a>
                                <div class="collapse" id="{{ video.video_id }}DurationCollapse">
                                    <div class="card card-body bg-dark text-white text-capitalize border border-3 mt-2 mb-2 border-light">
                                        <div hx-get="{% url 'video_completion_times' video.video_id %}"
                                hx-trigger="revealed"
                                hx-swap="outerHTML">

                                        </div>
                                    </div>
                                </div>
                                {% if video.has_cc %}<span class="badge bg-danger mb-1">CC</span>{% endif %}
                                {% if video.published_at %}<span class="badge bg-secondary mb-1">Video uploaded on {{ video.published_at }}</span>{% endif %}
                                <span class="badge bg-primary text-white mb-1"><i class="fas fa-eye"></i> {% if video.view_count == -1 %}HIDDEN{% else %}{{ video.view_count|intcomma }}{% endif %}</span>
                                <span class="badge bg-warning text-black-50 mb-1"><i class="fas fa-thumbs-up"></i> {% if video.like_count == -1 %}HIDDEN{% else %}{{ video.like_count|intcomma }}{% endif %}</span>
                                <span class="badge bg-warning text-black-50 mb-1"><i class="fas fa-thumbs-down"></i> {% if video.dislike_count == -1 %}HIDDEN{% else %}{{ video.dislike_count|intcomma }}{% endif %}</span>
                                <span class="badge bg-info text-black-50 mb-1"><i class="fas fa-comments"></i> {% if video.comment_count == -1 %}HIDDEN{% else %}{{ video.comment_count|intcomma }}{% endif %} </span>
                                {% if video.is_unavailable_on_yt or video.was_deleted_on_yt %}<span class="badge bg-light text-black-50 mb-1">UNAVAILABLE</span>{% endif %}
                                <span class="badge bg-light text-black-50 mb-1"><a href="#found-in" style="text-decoration: none; color: grey"> Found in {{ video.playlists.all.count }} playlist{% if video.playlists.all.count > 1 %}s{% endif %}</a></span>


                            </h6>
                            <p class="card-text text-white-50"><small>Last updated {{ video.video_details_modified_at|naturalday }}</small> &bullet; <small>{{ video.num_of_accesses }} clicks </small></p>                        </div>
                    </div>
                </div>
            </div>


            <br>

        {% endif %}


    </div>

    <div class="row">
        <div class="col-6">

            <iframe id="ytplayer" width="100%" height="100%" src="//www.youtube.com/embed/{{ video.video_id }}?enablejsapi=1" frameborder="0" style="border: solid 5px #37474F" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

        </div>
        <div class="col-6">
            <div class="row">
                <div class="col-6">
                        <h4>Your notes for this video

                    </h4>
                </div>
                <div class="col d-flex justify-content-end pt-2">

                    <span id="notes-save-status" class="text-success">
                    </span>
                </div>
            </div>

            <div >
                <textarea name="video-notes-text-area"
                          hx-post="{% url 'video_notes' video.video_id %}"
                          hx-trigger="keyup changed delay:1.5s"
                          hx-target="#notes-save-status"
                          class="form-control"
                          id="video-notes-text-area"
                          placeholder="Enter here"
                          rows="13">
                    {{ video.user_notes }}
                </textarea>

                <div>


                </div>
            </div>
        </div>
    </div>

      <br>

    <div class="">
        <h3><span style="border-bottom: 3px #497ce2 dashed;">Video found in the following playlist{% if video.playlists.all.count > 1 %}s{% endif %}</span><i class="fas fa-binoculars ms-2" style="color: #4669d2"></i></h3>
        <div id="found-in" class="row row-cols-1 row-cols-md-4 g-4 text-dark mt-0" data-masonry='{"percentPosition": true }'>
            {% for playlist in video.playlists.all %}
                <div class="col">

                    <div class="card" style="background-color: #EFEFEF;">
                        <img  class="bd-placeholder-img card-img-top" src="{{ playlist.thumbnail_url }}" style="max-width:100%; height: 200px;   object-fit: cover;" alt="{{ playlist.name }} thumbnail">

                        <div class="card-body">
                            <h5 class="card-title"><a href="{% url 'playlist' playlist.playlist_id %}" class="stretched-link" style="text-decoration: none; color: black">{{ playlist.name }}</a></h5>
                            <p class="card-text">
                                <span class="badge bg-{% if playlist.get_watch_time_left == "0secs." %}success{% else %}primary{% endif %} text-white">{{ playlist.get_watched_videos_count }}/{{ playlist.get_watchable_videos_count }} viewed</span>
                                {% if playlist.get_watch_time_left != "0secs." %}<span class="badge bg-dark text-white">{{ playlist.get_watch_time_left }} left</span>{% endif %}
                            </p>
                            <p class="card-text">
                                {% if playlist.tags.all %}
                                    <small>
                                        <i class="fas fa-tags fa-sm" style="color: black"></i>
                                        {% for tag in playlist.tags.all %}
                                            <span class="badge rounded-pill bg-primary mb-lg-1">
                                                {{ tag.name }}
                                            </span>
                                        {% endfor %}
                                    </small>
                                {% endif %}
                            </p>
                            <p class="card-text"><small class="text-muted">Last watched {{ playlist.last_watched|naturalday }}</small></p>
                        </div>
                    </div>
                </div>

            {% endfor %}
        </div>
    </div>



    <script type="text/javascript">
        // from https://developers.google.com/youtube/iframe_api_reference#Examples
      var tag = document.createElement('script');
      tag.id = 'iframe-demo';
      tag.src = 'https://www.youtube.com/iframe_api';
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

      var player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('ytplayer', {
            events: {
              'onReady': onPlayerReady,
              'onStateChange': onPlayerStateChange
            }
        });
      }
      function onPlayerReady(event) {
        document.getElementById('ytplayer').style.borderColor = '#FF6D00';
      }
      function changeBorderColor(playerStatus) {
        var color;
        if (playerStatus === -1) {
          color = "#37474F"; // unstarted = gray
        } else if (playerStatus === 0) {
          color = "#FFFF00"; // ended = yellow
        } else if (playerStatus === 1) {
          color = "#33691E"; // playing = green
        } else if (playerStatus === 2) {
          color = "#DD2C00"; // paused = red
            // console.log(player.playerInfo.currentTime + " secs elapsed!");
        } else if (playerStatus === 3) {
          color = "#AA00FF"; // buffering = purple
        } else if (playerStatus === 5) {
          color = "#FF6DOO"; // video cued = orange
        }
        if (color) {
          document.getElementById('ytplayer').style.borderColor = color;
        }
      }
      function onPlayerStateChange(event) {
        changeBorderColor(event.data);

        // can use the below info to create a stream room
        // player.playerInfo.currentTime returns player elapsed time
        // console.log(player)
      }
    </script>

{% endblock %}