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 %}

        <div class="row">

            <div class="col-6 mb-4">
                <div class="card bg-transparent text-dark">
                    <div class="card-body">
                        <h6 class="d-flex align-items-center mb-3"><span class="text-warning me-2">{{ user.playlists.count }}</span>Playlists Statistics{% if user.playlists.count == 0 %}: You have no playlists in your UnTube!{% endif %}</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-6 mb-4">
                <div class="card bg-transparent text-dark">
                    <div class="card-body">
                        <h6 class="d-flex align-items-center mb-3"><span class="text-warning me-2">{{ watching.count }}</span>
                            {% if watching.count > 0 %}
                                Playlist{% if watching.count > 1 %}s{% endif %} Watching: Percent Complete Chart
                                <small> <a class="btn btn-sm btn-success ms-2" href="#continue-watching">View</a></small>
                            {% else %}
                                Watching: Mark playlists as watching to view their completeness % here!
                            {% endif %}
                        </h6>
                        <div class="d-flex align-items-center mb-3">

                            <canvas id="watching-playlists-percent-distribution" data-url="{% url 'watching_playlists_percent_distribution' %}">

                            </canvas>



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

        </div>

        <div class="row" ><!--data-masonry='{"percentPosition": true }'-->
                <div class="col-sm-6 col-lg-4 mb-4">
                    <div class="card card-cover h-100 overflow-hidden text-white {% if not user.profile.enable_gradient_bg  %}gradient-bg-3{% else %}bg-dark{% endif %} 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 'all_playlists' 'all' %}" class="stretched-link" style="text-decoration: none; color: #fafafa">
                                    All Playlists</a>
                            </h2>
                            <ul class="d-flex list-unstyled mt-auto">
                                <li class="me-auto">
                                    <h3>
                                        <i class="fas fa-mountain fa-lg" style="color: #e26f94"></i>
                                    </h3>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>

                <div class="col-sm-6 col-lg-4 mb-4">
                <div class="card card-cover h-100 overflow-hidden text-white {% if not user.profile.enable_gradient_bg  %}gradient-bg-3{% else %}bg-dark{% endif %} 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' 'LL' %}" class="stretched-link" style="text-decoration: none; color: #fafafa">
                    Liked Videos
                </a>
                </h2>
                <ul class="d-flex list-unstyled mt-auto">
                <li class="me-auto">
                    <h3>
                        <i class="fas fa-thumbs-up fa-lg" style="color: #0090ff"></i>
                    </h3>
                </li>
                </ul>
                </div>
                </div>
                </div>

                <div class="col-sm-6 col-lg-4 mb-4">
                <div class="card card-cover h-100 overflow-hidden text-white {% if not user.profile.enable_gradient_bg  %}gradient-bg-3{% else %}bg-dark{% endif %} 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 'favorites' %}" class="stretched-link" style="text-decoration: none; color: #fafafa">
                    Your Favorites
                </a>
                </h2>
                <ul class="d-flex list-unstyled mt-auto">
                <li class="me-auto">
                    <h3>
                        <i class="fas fa-star fa-lg" style="color: #dbcc47"></i>
                    </h3>
                </li>
                </ul>
                </div>
                </div>
                </div>

            <!-- FULL IMAGE CARD: might be useful
            <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>

        <br>

        <div class="row text-dark mt-0 align-items-center">
            <div class="col">
                <div class="card bg-transparent text-dark">
                    <div class="card-body">
                        <h6 class="d-flex align-items-center mb-3">A total of <span class="text-warning me-1 ms-1" id="num-channels">{{ channels.count|intword|intcomma }} channels</span> and <span class="text-warning ms-1 me-1" id="num-channels"> {{ videos.count|intword|intcomma }} videos</span> found in your UnTube collection</h6>
                        <div class="d-flex align-items-center mb-3">

                            <canvas id="overall-channels-distribution" data-url="{% url 'overall_channels_distribution' %}">

                            </canvas>
                        </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">
                <div class="card bg-transparent border border-0 text-black">
                    <div class="card-body">
                        <h3><span style="border-bottom: 3px #a35a5a 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>

        {% if watching %}
            <div class="d-flex justify-content-between" id="continue-watching">
                <h3>
                    <span style="border-bottom: 3px #e24949 dashed;">Continue Watching</span>
                    <i class="fas fa-fire-alt ms-2" style="color: #d24646"></i>
                </h3>
                {% if watching.count > 5 %}

                    <h3 class="ms-2 me-1">
                        <a href="{% url 'all_playlists' 'watching' %}" style="text-decoration: none; color: #4675d2">
                            <i class="fas fa-search" style="color: #4675d2"></i>
                        </a>
                    </h3>
                {% endif %}

            </div>


            <br>

            {% if watching.count > 4 %}
                <div class="container-fluid overflow-auto border border-5 rounded-3 border-primary p-3">
                    <div class="row flex-row g-3 flex-nowrap">
                        {% for playlist in watching %}
                            <div class="col">
                                <div class="card" style="background-color: #EFEFEF; width: 275px; height: auto">
                                    <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|naturaltime }}</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>
            {% else %}

                <div class="container-fluid overflow-auto border border-5 rounded-3 border-primary pb-4">

                    <div class="row row-cols-1 row-cols-md-4 g-4 text-dark mt-0">
                        {% 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"><small class="text-muted">Last watched {{ playlist.last_watched|naturaltime }}</small></p>
                                    </div>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            {% endif %}
            <br>
        {% endif %}

        <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 $overallPlaylists = $("#overall-playlists-distribution");
                $.ajax({
                    url: $overallPlaylists.data("url"),
                    success: function (data) {

                        var ctx = $overallPlaylists[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',
                                },
                                tooltips: {
                                    callbacks: {
                                        label: function(tooltipItem, object) {
                                              return object['labels'][tooltipItem['index']] + ": " + object['datasets'][0]['data'][tooltipItem['index']] + ' playlists';
                                            }
                                    }
                                }


                            }
                        });

                    }
                });

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

                        var ctx = $watchingPlaylists[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: 'polarArea',
                            data: {
                                labels: data.labels,
                                datasets: [{
                                    label: 'Playlist Types',
                                    backgroundColor: coloR,
                                    data: data.data
                                }]
                            },
                            options: {
                                scale: {
                                    reverse: false,
                                    ticks: {
                                        min: -10,
                                        max: 100,
                                        interval: 10,
                                    }
                                },
                                responsive: true,
                                legend: {
                                    position: 'right',
                                    display: {% if watching.count <= 10 %}true{% else %}false{% endif %},
                                },
                                title: {
                                    display: false,
                                },
                                tooltips: {
                                    callbacks: {
                                        label: function(tooltipItem, object) {
                                              return object['labels'][tooltipItem['index']] + ": " + object['datasets'][0]['data'][tooltipItem['index']] + '% complete';
                                            }
                                    }
                                }
                            }
                        });

                    }
                });

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

                        var ctx = $overallChannels[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: 'Channel',
                                    backgroundColor: coloR,
                                    data: data.data
                                }]
                            },
                            options: {
                                responsive: true,
                                legend: {
                                    position: 'right',
                                    display: false
                                },
                                title: {
                                    display: false,
                                    text: 'Video Count Distribution per Channel',
                                    fontSize: 20,
                                    fontColor: '#fff',
                                },
                                tooltips: {
                                    callbacks: {
                                        label: function(tooltipItem, object) {
                                              return object['labels'][tooltipItem['index']] + ": " + object['datasets'][0]['data'][tooltipItem['index']] + ' videos';
                                            }
                                    }
                                }


                            }
                        });

                    }
                });

            });


        </script>
    {% endif %}




{% endblock %}