UnTube/backend/main/templates/home.html

{% extends 'base.html' %}
{% load humanize %}
{% block content %}
    {% if user.playlists.all.count|add:"-1" <= -1 %}
        <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_view_page' 'import' %}" class="btn btn-sm btn-primary">Import</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 'settings' %}" 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>{{ imported_playlists_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 justify-content-center align-items-center mb-3">You have a total of <span class="text-warning ms-1 me-1">{{ user.playlists.count }}</span> Playlists in your UnTube collection</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 justify-content-center 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>
                        {% if channels.count > 100 %}<h6 class="d-flex justify-content-center">(Only top 100 channels shown below)</h6>{% endif %}
                        <div class="d-flex align-items-center mb-3">

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

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

        </div>

        <div class="row row-cols-1 row-cols-md-4 g-4"><!--data-masonry='{"percentPosition": true }'-->
            <div class="col 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 'library' '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: #a9e26f"></i>
                                </h3>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="col 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 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>

            <div class="col 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 'planned_to_watch' %}" class="stretched-link" style="text-decoration: none; color: #fafafa">
                                Planned to Watch
                            </a>
                        </h2>
                        <ul class="d-flex list-unstyled mt-auto">
                            <li class="me-auto">
                                <h3>
                                    <i class="fas fa-sad-cry fa-lg" style="color: #db477b"></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 justify-content-center 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

                            {% 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 class="col">
                <div class="d-flex justify-content-center">
                    <h2>Popular Playlist Tags</h2>
                </div>

                <div class="d-flex justify-content-evenly h4">
                    {% if playlist_tags %}
                    <div class="w-100 d-flex justify-content-center flex-wrap">
                    {% for tag in playlist_tags|slice:"0:19" %}
                        <a href="{% url 'tagged_playlists' tag.name %}" style="text-decoration: none" class="me-lg-1 mb-lg-1">
                        <span class="badge rounded-pill bg-warning bg-gradient text-black-50">{{ tag.name }} <span class="badge bg-dark text-white">{{ tag.times_viewed_per_week }} views</span></span>
                        </a>
                    {% endfor %}

                    </div>
                    {% else %}
                        {% if user.playlist_tags.all.count != 0 %}
                        No playlist tag views this week.
                        {% else %}
                        You haven't created any playlist tags yet.
                            {% endif %}
                    {% endif %}
                </div>
            {% if playlist_tags %}
                <div class="d-flex justify-content-center">
                    <h3>
                        <a href="{% url 'search' %}" class="btn btn-success">Filter Playlists by Tags</a>
                    </h3>
                </div>
                {% endif %}
            </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 'library' '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 overflow-auto" style="background-color: #9363af; 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>

                        {% 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">
                        {% include 'intercooler/playlists.html' with playlists=watching watching=True %}
                    </div>
                </div>
            {% endif %}
            <br>
        {% endif %}

        <br>

        <div class="row text-dark mt-0 d-flex justify-content-evenly" id="recent-playlists">
            <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">
                        {% include 'intercooler/playlists.html' with playlists=recently_added_playlists watching=False bg_color="#958a44" show_controls=False %}
                    </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">
                        {% include 'intercooler/playlists.html' with playlists=recently_accessed_playlists watching=False bg_color="#9363af" show_controls=False %}
                    </div>
                {% else %}
                    <br>
                    <h5>Nothing to see here... yet.</h5>
                {% endif %}

            </div>
        </div>


        <br>


        <br>



        <footer class="footer mt-auto py-3 bg-transparent">
            <div class="container d-flex justify-content-center">
                <span class="text-dark">Loved what I made?
                    <a href="https://www.buymeacoffee.com/mohammedabkhan" style="text-decoration: none" target="_blank">
                        <span style="border-bottom: 3px #d56b6b dashed;">You can support me by buying me some coffee </span><i class="far fa-smile" style="color: black"></i>
                    </a></span>
            </div>
        </footer>


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