UnTube/apps/main/templates/home.html

{% extends 'base.html' %}
{% load humanize %}
{% block content %}
    {% if user.playlists.all.count == 0 %}
        <div class="alert alert-success" role="alert">
            <h4 class="alert-heading">It's empty in here</h4>
            <p>
                There's no playlists in your UnTube right now. You can change that by heading over to <a href="{% url 'manage_playlists' %}" class="btn btn-sm btn-primary">Manage</a> to import some public playlists into your UnTube.
                {% if not user.profile.imported_yt_playlists %}
                    Or you could always head over to your <a href="{% url 'profile' %}" class="btn btn-sm btn-primary">Profile</a> to import all of your public/private YouTube playlists.
                {% else %}
                    Keep in mind that your own YouTube playlists will automatically be imported into UnTube.
                {% endif %}
            </p>
        </div>
    {% endif %}
    {% if import_successful %}
        <br>
        <br>
        <div class="d-flex justify-content-center pt-3 pb-2 mb-3">
            <h1>Welcome to UnTube, {{ user.username|capfirst }}</h1>
        </div>
        <div class="d-flex justify-content-center pt-3 pb-2 mb-3">
            <h2>{{ user.playlists.all.count }} playlists from YouTube have been successfully imported.</h2>
        </div>

        <div class="d-flex justify-content-center pt-3 pb-2 mb-3">
            <h3>You'll now be notified on the Dashboard whenever there's any new un-exported playlists on YouTube :)</h3>
        </div>


        <div class="d-flex justify-content-center pt-3 pb-2 mb-3">
            <a href="{% url 'home' %}" class="btn btn-lg btn-success">Go to Dashboard</a>
        </div>

    {% else %}

        {% if user.profile.imported_yt_playlists %}
            <div hx-get="{% url 'user_playlists_updates' 'check-for-updates' %}" hx-trigger="load" hx-swap="outerHTML">

            </div>
        {% endif %}

        {% if watching %}
            <div class="border border-5 rounded-3 border-primary p-3">
                <h3><span style="border-bottom: 3px #e24949 dashed;">Continue Watching</span><i class="fas fa-fire-alt ms-2" style="color: #d24646"></i></h3>
                <div class="row row-cols-1 row-cols-md-4 g-4 text-dark mt-0" data-masonry='{"percentPosition": true }'>
                    {% for playlist in watching %}
                        <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>

                        <!--
                <div class="col">
                    <div class="card">
                        <a style="background-color: #7e89c2;" href="{% url 'playlist' playlist.playlist_id %}" class="list-group-item list-group-item-action" aria-current="true">
                            <div class="card-body">
                        <h5 class="card-title">
                           {{ playlist.name }}
                            {% if playlist.is_private_on_yt %}<small><span class="badge bg-light text-dark">Private</span></small> {% endif %}
                            {% if playlist.is_from_yt %}<small><span class="badge bg-danger text-dark">YT</span></small> {% endif %}
                        </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>
                            {% if playlist.tags.all %}
                        <small>
                        <i class="fas fa-tags fa-sm" style="color: yellow"></i>
                            {% for tag in playlist.tags.all %}
                                <span class="badge rounded-pill bg-primary mb-lg-1">
                                    {{ tag.name }}
                                </span>
                            {% endfor %}
                        </small>
                            {% endif %}
                        </div>
                        </a>
                    </div>
                </div> -->
                        <!--
                    {% if forloop.counter == 3 %}
                        {% if watching.count|add:"-3" != 0 %}
                        <div class="col">
                            <div class="card">
                                <a style="background-color: #7e89c2;" href="{% url 'all_playlists' 'watching' %}" class="list-group-item list-group-item-action" aria-current="true">
                                    <div class="card-body">

                                        <p class="card-text">
                                            <h3>+ {{ watching.count|add:"-3" }} more</h3>
                                        </p>
                                     </div>
                                </a>
                            </div>
                        </div>
                        {% endif %}
                    {% endif %}
                    -->
                    {% endfor %}
                </div>
            </div>
            <br>
        {% endif %}


        <div class="row" ><!--data-masonry='{"percentPosition": true }'-->
            {% for playlist in user_playlists|slice:"0:3" %}
                <div class="col-sm-6 col-lg-4 mb-4">
                    <div class="card card-cover h-100 overflow-hidden text-white bg-dark rounded-5 shadow-lg" style="">
                        <div class="d-flex flex-column h-100 p-5 pb-3 text-white text-shadow-1">
                            <h2 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold"><a href="{% url 'playlist' playlist.playlist_id %}" class="stretched-link" style="text-decoration: none; color: #fafafa">{{ playlist.name }}</a> </h2>
                            <ul class="d-flex list-unstyled mt-auto">
                                <li class="me-auto">
                                    <img src="{{ playlist.thumbnail_url }}" alt="Bootstrap" width="32" height="32" class="rounded-circle border border-white">
                                </li>
                                <li class="d-flex align-items-center me-3">
                                    <small>by {{ playlist.channel_name }}</small>
                                </li>
                                <li class="d-flex align-items-center">
                                    <i class="fas fa-eye me-1"></i>
                                    <small>{{ playlist.num_of_accesses }} clicks</small>

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

            <div class="col-sm-6 col-lg-4 mb-4">
                <div class="card">
                    <svg class="bd-placeholder-img card-img-top" width="100%" height="200" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Image cap" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"/><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text></svg>

                    <div class="card-body">
                        <h5 class="card-title">Card title that wraps to a new line</h5>
                        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                    </div>
                </div>
            </div>

        <div class="col-sm-6 col-lg-4 mb-4">
                <div class="card bg-dark text-white">
                    <div class="card-body">
                        <h6 class="d-flex align-items-center mb-3"><span class="text-info me-2">{{ user.playlists.count }}</span>Playlists Statistics</h6>
                        <div class="d-flex align-items-center mb-3">

                            <canvas id="overall-playlists-distribution" data-url="{% url 'overall_playlists_distribution' %}">

                            </canvas>

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

            <div class="col-sm-6 col-lg-4 mb-4">
                <div class="card">
                    <svg class="bd-placeholder-img card-img-top" width="100%" height="200" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Image cap" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"/><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text></svg>

                    <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
                        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                    </div>
                </div>
            </div>

        <div class="col-sm-6 col-lg-4 mb-4">
                <div class="card p-3">
                    <figure class="p-3 mb-0">
                        <blockquote class="blockquote">
                            <p>A well-known quote, contained in a blockquote element.</p>
                        </blockquote>
                        <figcaption class="blockquote-footer mb-0 text-muted">
                            Someone famous in <cite title="Source Title">Source Title</cite>
                        </figcaption>
                    </figure>
                </div>
            </div>

            <div class="col-sm-6 col-lg-4 mb-4">
                <div class="card text-center">
                    <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text">This card has a regular title and short paragraph of text below it.</p>
                        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-lg-4 mb-4">
                <div class="card">
                    <svg class="bd-placeholder-img card-img" width="100%" height="260" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Card image" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"/><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Card image</text></svg>

                </div>
            </div>
            <div class="col-sm-6 col-lg-4 mb-4">
                <div class="card p-3 text-end">
                    <figure class="mb-0">
                        <blockquote class="blockquote">
                            <p>A well-known quote, contained in a blockquote element.</p>
                        </blockquote>
                        <figcaption class="blockquote-footer mb-0 text-muted">
                            Someone famous in <cite title="Source Title">Source Title</cite>
                        </figcaption>
                    </figure>
                </div>
            </div>
            <div class="col-sm-6 col-lg-4 mb-4">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text">This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.</p>
                        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                    </div>
                </div>
            </div>
        </div>



        <div class="container" id="custom-cards">
            <h2 class="pb-2 border-bottom">Custom cards</h2>

            <div class="row row-cols-1 row-cols-lg-3 align-items-stretch g-4 py-5">
                {% for playlist in user_playlists|slice:"0:3" %}

                    <div class="col">
                        <div class="card card-cover h-100 overflow-hidden text-dark bg-dark rounded-5 shadow-lg" style="background-image: url('{% if playlist.videos.count != 0 %}{{ playlist.thumbnail_url }}{% endif %}'); background-position: center">

                            <div class="d-flex flex-column h-100 p-5 pb-3 text-white text-shadow-1">
                                <h2 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold"><a href="{% url 'playlist' playlist.playlist_id %}" class="stretched-link" style="text-decoration: none; color: #100f0f">{{ playlist.name }}</a> </h2>
                                <ul class="d-flex list-unstyled mt-auto">
                                    <li class="me-auto">
                                        <img src="{{ playlist.thumbnail_url }}" alt="Bootstrap" width="32" height="32" class="rounded-circle border border-white">
                                    </li>

                                    <li class="d-flex align-items-center me-3 text-dark">
                                        <small>by {{ playlist.channel_name }}</small>
                                    </li>
                                    <li class="d-flex align-items-center text-dark">
                                        <i class="fas fa-eye me-1"></i>
                                        <small>{{ playlist.num_of_accesses }}</small>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>
        </div>


        <div class="row text-dark mt-0 align-items-center">
            <div class="col">
                <div class="row">
                    <div class="col">
                        <div class="card" style="background: linear-gradient(-45deg, #aaae6b, #7b8eab, #8abc97, #e666f5); background-size: 400% 400%; animation: gradient 7s ease infinite;">
                            <a href="#" class="list-group-item bg-transparent list-group-item-action" aria-current="true">
                                <div class="card-body">
                                    <div class="d-flex justify-content-center h1">
                                        <i class="fas fa-map-pin" style="color:#c22929"></i>
                                    </div>
                                    <div class="d-flex justify-content-center h1">
                                        YOUR
                                    </div>
                                    <div class="d-flex justify-content-center h1">
                                        PINS
                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>
                    <div class="col">
                        <div class="card" style="background: linear-gradient(-45deg, #0645a4, #2480cd, #84bcf3, #b7d6f7); background-size: 400% 400%; animation: gradient 7s ease infinite;">
                            <a href="#" class="list-group-item list-group-item-action bg-transparent" aria-current="true">
                                <div class="card-body">
                                    <div class="d-flex justify-content-center h1">
                                        <i class="fas fa-heart" style="color: indianred"></i>
                                    </div>
                                    <div class="d-flex justify-content-center h1">
                                        LIKED
                                    </div>
                                    <div class="d-flex justify-content-center h1">
                                        VIDEOS
                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
                <!-- Implement later
                    <div class="row mt-3">
                        <div class="col">

                        </div>
                        <div class="col-6">
                        <div class="card">
                            <a style="background: linear-gradient(-45deg, #e2b968, #68af5b, #8a97bc, #d69ab2); background-size: 400% 400%; animation: gradient 7s ease infinite;" href="#" class="list-group-item list-group-item-action" aria-current="true">
                                <div class="card-body">
                                    <div class="d-flex justify-content-center h1">
                                        <i class="fas fa-history"></i>
                                    </div>
                                    <div class="d-flex justify-content-center h1">
                                        YOUR
                                    </div>
                                    <div class="d-flex justify-content-center h1">
                                        ACTIVITY
                                    </div>
                                </div>
                            </a>
                        </div>
                        </div>
                        <div class="col">

                        </div>
                    </div>
                    -->
            </div>
            <div class="col-8">
                <!--
                  <div class="card bg-transparent text-black border border-5 rounded-3 border-success p-3">
                        <div class="card-body">
                              <h3><span style="border-bottom: 3px #e24949 dashed;">Most viewed playlists</span> <a href="{% url 'all_playlists' 'all' %}" class="pt-1"><i class="fas fa-binoculars"></i> </a></h3>
                                {% if user_playlists %}
                                <div class="row row-cols-1 row-cols-md-3 g-4 text-dark mt-0">
                                    {% for playlist in user_playlists|slice:"0:3" %}
                                    <div class="col">
                                        <div class="card overflow-auto" style="background-color: #4790c7;">
                                            <a href="{% url 'playlist' playlist.playlist_id %}" class="list-group-item bg-transparent list-group-item-action" aria-current="true">
                                                <div class="card-body">
                                            <h5 class="card-title">
                                               #{{ forloop.counter }} <br><br>{{ playlist.name }}
                                                {% if playlist.is_private_on_yt %}<small><span class="badge bg-light text-dark">Private</span></small> {% endif %}
                                                {% if playlist.is_from_yt %}<small><span class="badge bg-danger text-dark">YT</span></small> {% endif %}
                                            </h5>
                                            <small>
                                                <span class="badge bg-primary rounded-pill">{{ playlist.video_count }} videos</span>
                                                <span class="badge bg-primary rounded-pill">{{ playlist.playlist_duration }} </span>
                                                <span class="badge bg-secondary rounded-pill">{{ playlist.num_of_accesses }} clicks </span>

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

                                </div>

                                {% else %}
                                    <br>
                                <h5>Nothing to see here... yet.</h5>
                                {% endif %}


                        </div>
                      </div>
                -->

            </div>
        </div>

        <br>

        <div class="row text-dark mt-0 d-flex justify-content-evenly">
            <div class="col">

                <h3><span style="border-bottom: 3px #e24949 dashed;">Recently Added</span> <i class="fas fa-plus-square" style="color:#972727;"></i></h3>
                {% if recently_added_playlists %}
                    <div class="row row-cols-1 row-cols-md-3 g-4 text-dark mt-0">
                        {% for playlist in recently_added_playlists %}
                            <div class="col">
                                <div class="card overflow-auto" style="background-color: #958a44;">
                                    <a href="{% url 'playlist' playlist.playlist_id %}" class="list-group-item bg-transparent list-group-item-action" aria-current="true">
                                        <div class="card-body">
                                            <h5 class="card-title">
                                                {{ playlist.name }}
                                                {% if playlist.is_private_on_yt %}<small><span class="badge bg-light text-dark">Private</span></small> {% endif %}
                                                {% if playlist.is_from_yt %}<small><span class="badge bg-danger text-dark">YT</span></small> {% endif %}
                                            </h5>
                                            <small>
                                                <span class="badge bg-primary rounded-pill">{{ playlist.video_count }} videos</span>
                                                <span class="badge bg-primary rounded-pill">{{ playlist.playlist_duration }} </span>
                                                <span class="badge bg-secondary rounded-pill">{{ playlist.num_of_accesses }} clicks </span>

                                            </small>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                {% else %}
                    <br>
                    <h5>You have no playlists ;-;</h5>
                {% endif %}
            </div>

            <div class="col">
                <h3><span style="border-bottom: 3px #e24949 dashed;">Recently Accessed</span> <i class="fas fa-redo fa-sm" style="color: #3c3fd2"></i></h3>

                {% if recently_accessed_playlists %}
                    <div class="row row-cols-1 row-cols-md-3 g-4 text-dark mt-0">
                        {% for playlist in recently_accessed_playlists %}
                            <div class="col">
                                <div class="card overflow-auto" style="background-color: #357779;">
                                    <a  href="{% url 'playlist' playlist.playlist_id %}" class="list-group-item bg-transparent list-group-item-action" aria-current="true">
                                        <div class="card-body">
                                            <h5 class="card-title">
                                                {{ playlist.name }}
                                                {% if playlist.is_private_on_yt %}<small><span class="badge bg-light text-dark">Private</span></small> {% endif %}
                                                {% if playlist.is_from_yt %}<small><span class="badge bg-danger text-dark">YT</span></small> {% endif %}
                                            </h5>
                                            <small>
                                                <span class="badge bg-primary rounded-pill">{{ playlist.video_count }} videos</span>
                                                <span class="badge bg-primary rounded-pill">{{ playlist.playlist_duration }} </span>
                                                <span class="badge bg-secondary rounded-pill">{{ playlist.num_of_accesses }} clicks </span>

                                            </small>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                {% else %}
                    <br>
                    <h5>Nothing to see here... yet.</h5>
                {% endif %}

            </div>
        </div>


        <br>
        <br>
        <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>

        <script type="application/javascript">

                    $(function () {

                  var $populationChart = $("#overall-playlists-distribution");
                  $.ajax({
                    url: $populationChart.data("url"),
                    success: function (data) {

                      var ctx = $populationChart[0].getContext("2d");
                       var coloR = [];

                     var dynamicColors = function() { // generate random color
                            var r = Math.floor(Math.random() * 255);
                            var g = Math.floor(Math.random() * 255);
                            var b = Math.floor(Math.random() * 255);
                            return "rgb(" + r + "," + g + "," + b + ")";
                         };

                      for (var i in data.labels) {
                          if (data.labels)
                          coloR.push(dynamicColors());
                     }

                      new Chart(ctx, {
                        type: 'pie',
                        data: {
                          labels: data.labels,
                          datasets: [{
                            label: 'Playlist Types',
                            backgroundColor: coloR,
                            data: data.data
                          }]
                        },
                        options: {
                          responsive: true,
                          legend: {
                            position: 'right',
                              display: true
                          },
                          title: {
                            display: false,
                              text: 'Video Count Distribution per Channel',
                              fontSize: 20,
                              fontColor: '#fff',
                          },

                        }
                      });

                    }
                  });

                });


        </script>
    {% endif %}




{% endblock %}