add "Most Popular Tags" to sidebar

vidzy-social · Jan 3, 2025 · 3d57964 · 3d57964
1 parent 6606226
commit 3d57964
Show file tree

Hide file tree

Showing 2 changed files with 114 additions and 2 deletions.
diff --git a/app.py b/app.py
@@ -944,6 +944,28 @@ def api_explore_page():
 
     return jsonify(rv)
 
+@app.route("/api/get_most_popular_tags")
+def api_get_popular_tags():
+    cur = mysql.connection.cursor()
+    cur.execute("""
+SELECT tag, COUNT(*) AS tag_count
+FROM (
+    SELECT REGEXP_SUBSTR(description, '#[A-Za-z0-9_]+') AS tag
+    FROM shorts
+    JOIN (SELECT 1 AS n UNION SELECT 2 UNION SELECT 3 UNION SELECT 4 UNION SELECT 5 
+          UNION SELECT 6 UNION SELECT 7 UNION SELECT 8 UNION SELECT 9 UNION SELECT 10) numbers
+    ON CHAR_LENGTH(description)
+    -CHAR_LENGTH(REPLACE(description, '#', '')) >= n - 1
+) AS tags
+WHERE tag != '' AND tag IS NOT NULL
+GROUP BY tag
+ORDER BY tag_count DESC
+LIMIT 3;
+    """)
+    rv = cur.fetchall()
+
+    return jsonify(rv)
+
 ############ API ROUTES ############
 ####################################
 

diff --git a/templates/topnav.html b/templates/topnav.html
@@ -115,6 +115,41 @@
             display: block;
         }
     }
+
+    #popular-tags-container {
+        padding: 15px;
+        margin-top: 20px;
+        background-color: #1a1a1a;
+        border-radius: 8px;
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
+        transform: translateY(40%);
+    }
+
+    #popular-tags-container h3 {
+        color: #f1f1f1;
+        font-size: 20px;
+        margin-bottom: 10px;
+        text-align: center;
+    }
+
+    #popular-tags-container ul {
+        padding-left: 0;
+    }
+
+    #popular-tags-container li {
+        color: #f1f1f1;
+        font-size: 14px;
+        padding: 10px;
+        margin: 5px 0;
+        border-radius: 8px;
+        background-color: #333;
+        cursor: pointer;
+        transition: background-color 0.3s ease;
+    }
+
+    #popular-tags-container li:hover {
+        background-color: #575757;
+    }
 </style>
 
 <div class="sidenav">
@@ -137,10 +172,13 @@
     <div style="bottom: 0; position: absolute; padding: 5px;">
         <a id="special" href="/about">About</a>
         <br><br>
-        <!--<a id="special" href="https://github.com/vidzy-social/vidzy">View source code</a>
-        <br><br>-->
+        <a id="special" href="https://github.com/vidzy-social/vidzy">View source code</a>
+        <br><br>
         <p style="font-size: 13px;">{{VIDZY_VERSION}}</p>
     </div>
+    <div id="popular-tags-container" style="padding: 15px; color: #333;">
+        <!-- Popular tags will be inserted here by JS -->
+    </div>
 </div>
 
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
@@ -206,4 +244,56 @@
         }
       }
     }
+
+
+
+
+function fetchPopularTags() {
+    var xhr = new XMLHttpRequest();
+    xhr.open("GET", "/api/get_most_popular_tags", true);
+    xhr.onreadystatechange = function() {
+        if (xhr.readyState === 4 && xhr.status === 200) {
+            var tags = JSON.parse(xhr.responseText);
+            displayPopularTags(tags);
+        }
+    };
+    xhr.send();
+}
+
+function displayPopularTags(tags) {
+    var container = document.getElementById('popular-tags-container');
+
+    var header = document.createElement('h3');
+    header.textContent = 'Most Popular Tags';
+    container.appendChild(header);
+
+    var tagList = document.createElement('ul');
+
+    tags.forEach(function(tag) {
+        var listItem = document.createElement('li');
+        var link = document.createElement('a');
+        link.href = "/tags/" + encodeURIComponent(tag["tag"].substring(1)); // Removes the "#"
+        link.textContent = tag["tag"];
+        link.style.padding = '1px';
+        link.style.fontSize = '14px';
+        link.style.textDecoration = 'none';
+        link.style.color = 'white';
+
+        link.onmouseover = function() {
+            link.style.color = '#4CAF50';
+        };
+        link.onmouseout = function() {
+            link.style.color = 'white';
+        };
+
+        listItem.style.listStyleType = 'none';
+        listItem.style.borderBottom = '1px solid #ddd';
+        listItem.appendChild(link);
+        tagList.appendChild(listItem);
+    });
+
+    container.appendChild(tagList);
+}
+
+window.onload = fetchPopularTags;
 </script>