From e823d6e1b319c82f9ef4c042738a50d239486091 Mon Sep 17 00:00:00 2001 From: simon Date: Thu, 30 Dec 2021 22:13:47 +0700 Subject: [PATCH] add multi search js functions to dynamically populate results --- tubearchivist/home/templates/home/search.html | 11 +- tubearchivist/static/css/style.css | 4 + tubearchivist/static/script.js | 172 ++++++++++++++++++ 3 files changed, 182 insertions(+), 5 deletions(-) diff --git a/tubearchivist/home/templates/home/search.html b/tubearchivist/home/templates/home/search.html index d109263..7a0f411 100644 --- a/tubearchivist/home/templates/home/search.html +++ b/tubearchivist/home/templates/home/search.html @@ -1,5 +1,6 @@ {% extends "home/base.html" %} {% block content %} +

Search

@@ -7,21 +8,21 @@
{{ search_form }}
-
+

Video Results

No videos found.

-
+

Channel Results

-
+

No channels found.

-
+

Playlist Results

-
+

No playlists found.

diff --git a/tubearchivist/static/css/style.css b/tubearchivist/static/css/style.css index b62e594..dee97f9 100644 --- a/tubearchivist/static/css/style.css +++ b/tubearchivist/static/css/style.css @@ -662,6 +662,10 @@ button:hover { width: 100%; } +.multi-search-result { + padding: 1rem 0; +} + /* channel overview page */ .channel-list.list { display: block; diff --git a/tubearchivist/static/script.js b/tubearchivist/static/script.js index 49218b0..ff36c72 100644 --- a/tubearchivist/static/script.js +++ b/tubearchivist/static/script.js @@ -360,6 +360,178 @@ function removePlayer() { }; } + +// multi search form +function searchMulti(query) { + if (query.length > 1) { + var payload = JSON.stringify({'multi_search': query}) + var http = new XMLHttpRequest(); + http.onreadystatechange = function() { + if (http.readyState === 4) { + allResults = JSON.parse(http.response)['results']; + populateMultiSearchResults(allResults); + }; + }; + http.open("POST", "/process/", true); + http.setRequestHeader("X-CSRFToken", getCookie("csrftoken")); + http.setRequestHeader("Content-type", "application/json"); + http.send(payload); + }; +} + + +function populateMultiSearchResults(allResults) { + // videos + var allVideos = allResults["video_results"]; + var videoBox = document.getElementById("video-results"); + videoBox.innerHTML = ""; + for (let index = 0; index < allVideos.length; index++) { + const video = allVideos[index]["source"]; + const videoDiv = createVideo(video, "grid"); + videoBox.appendChild(videoDiv); + }; + // channels + var allChannels = allResults["channel_results"]; + var channelBox = document.getElementById("channel-results"); + channelBox.innerHTML = ""; + for (let index = 0; index < allChannels.length; index++) { + const channel = allChannels[index]["source"]; + const channelDiv = createChannel(channel, "list"); + channelBox.appendChild(channelDiv); + }; + // playlists + var allPlaylists = allResults["playlist_results"]; + var playlistBox = document.getElementById("playlist-results"); + playlistBox.innerHTML = ""; + for (let index = 0; index < allPlaylists.length; index++) { + const playlist = allPlaylists[index]["source"]; + const playlistDiv = createPlaylist(playlist, "grid"); + playlistBox.appendChild(playlistDiv); + }; +} + + +function createVideo(video, viewStyle) { + // create video item div from template + const videoId = video["youtube_id"]; + const mediaUrl = video["media_url"]; + const thumbUrl = "/cache/" + video["vid_thumb_url"]; + const videoTitle = video["title"]; + const videoPublished = video["published"]; + const videoDuration = video["player"]["duration_str"]; + if (video["player"]["watched"]) { + var playerState = "seen"; + } else { + var playerState = "unseen"; + }; + const channelId = video["channel"]["channel_id"]; + const channelName = video["channel"]["channel_name"]; + // build markup + const markup = ` + +
+
+ video-thumb +
+
+ play-icon +
+
+ +
+
+ ${playerState}-icon + ${videoPublished} | ${videoDuration} +
+ +
+ ` + const videoDiv = document.createElement("div"); + videoDiv.setAttribute("class", "video-item " + viewStyle); + videoDiv.innerHTML = markup + return videoDiv +} + + +function createChannel(channel, viewStyle) { + // create channel item div from template + const channelId = channel["channel_id"]; + const channelName = channel["channel_name"]; + const channelSubs = channel["channel_subs"]; + const channelLastRefresh = channel["channel_last_refresh"]; + if (channel["channel_subscribed"]) { + var button = `` + } else { + var button = `` + }; + // build markup + const markup = ` +
+ + ${channelId}-banner + +
+
+
+
+ + channel-thumb + +
+
+

${channelName}

+

Subscribers: ${channelSubs}

+
+
+
+
+

Last refreshed: ${channelLastRefresh}

+ ${button} +
+
+
+ ` + const channelDiv = document.createElement("div"); + channelDiv.setAttribute("class", "channel-item " + viewStyle); + channelDiv.innerHTML = markup; + return channelDiv +} + +function createPlaylist(playlist, viewStyle) { + // create playlist item div from template + const playlistId = playlist["playlist_id"]; + const playlistName = playlist["playlist_name"]; + const playlistChannelId = playlist["playlist_channel_id"]; + const playlistChannel = playlist["playlist_channel"]; + const playlistLastRefresh = playlist["playlist_last_refresh"]; + if (playlist["playlist_subscribed"]) { + var button = `` + } else { + var button = `` + }; + const markup = ` +
+ + ${playlistId}-thumbnail + +
+
+

${playlistChannel}

 +

${playlistName}

 +

Last refreshed: ${playlistLastRefresh}

+ ${button} +
+ ` + const playlistDiv = document.createElement("div"); + playlistDiv.setAttribute("class", "playlist-item " + viewStyle); + playlistDiv.innerHTML = markup; + return playlistDiv +} + + // searching channels function searchChannels(query) { var searchResultBox = document.getElementById('resultBox');