mirror of
https://git.vectorsigma.ru/public/tubearchivist.git
synced 2026-08-08 01:09:37 +00:00
minimal viable product
This commit is contained in:
simon
271
tubearchivist/static/script.js
Normal file
271
tubearchivist/static/script.js
Normal file
@@ -0,0 +1,271 @@
|
||||
|
||||
function sortChange(sortValue) {
|
||||
var payload = JSON.stringify({'sort_order': sortValue});
|
||||
sendPost(payload);
|
||||
setTimeout(function(){
|
||||
location.reload();
|
||||
return false;
|
||||
}, 500);
|
||||
}
|
||||
|
||||
function hideWatched(hideValue) {
|
||||
var payload = JSON.stringify({'hide_watched': hideValue});
|
||||
sendPost(payload);
|
||||
setTimeout(function(){
|
||||
location.reload();
|
||||
return false;
|
||||
}, 500);
|
||||
}
|
||||
|
||||
function showSubscribedOnly(showValue) {
|
||||
var payload = JSON.stringify({'show_subed_only': showValue});
|
||||
sendPost(payload);
|
||||
setTimeout(function(){
|
||||
location.reload();
|
||||
return false;
|
||||
}, 500);
|
||||
}
|
||||
|
||||
function isWatched(youtube_id) {
|
||||
var payload = JSON.stringify({'watched': youtube_id});
|
||||
sendPost(payload);
|
||||
var seenIcon = document.createElement('img');
|
||||
seenIcon.setAttribute('src', "/static/img/icon-seen.svg");
|
||||
seenIcon.setAttribute('alt', 'seen-icon');
|
||||
seenIcon.setAttribute('id', youtube_id);
|
||||
seenIcon.classList = 'seen-icon';
|
||||
document.getElementById(youtube_id).replaceWith(seenIcon);
|
||||
}
|
||||
|
||||
function unsubscribe(channel_id) {
|
||||
var payload = JSON.stringify({'unsubscribe': channel_id});
|
||||
sendPost(payload);
|
||||
document.getElementById('sub-' + channel_id).remove();
|
||||
}
|
||||
|
||||
// download page buttons
|
||||
function rescanPending() {
|
||||
var payload = JSON.stringify({'rescan_pending': true});
|
||||
animate('rescan-icon', 'rotate-img');
|
||||
sendPost(payload);
|
||||
setTimeout(function(){
|
||||
handleInterval();
|
||||
}, 500);
|
||||
}
|
||||
|
||||
function dlPending() {
|
||||
var payload = JSON.stringify({'dl_pending': true});
|
||||
animate('download-icon', 'bounce-img');
|
||||
sendPost(payload);
|
||||
setTimeout(function(){
|
||||
handleInterval();
|
||||
}, 500);
|
||||
}
|
||||
|
||||
function toIgnore(button) {
|
||||
var youtube_id = button.getAttribute('data-id');
|
||||
var payload = JSON.stringify({'ignore': youtube_id});
|
||||
console.log(payload);
|
||||
sendPost(payload);
|
||||
document.getElementById('dl-' + youtube_id).remove();
|
||||
}
|
||||
|
||||
function downloadNow(button) {
|
||||
var youtube_id = button.getAttribute('data-id');
|
||||
var payload = JSON.stringify({'dlnow': youtube_id});
|
||||
animate('download-icon', 'bounce-img');
|
||||
sendPost(payload);
|
||||
setTimeout(function(){
|
||||
handleInterval();
|
||||
}, 500);
|
||||
}
|
||||
|
||||
// player
|
||||
function createPlayer(button) {
|
||||
var mediaUrl = button.getAttribute('data-src');
|
||||
var mediaThumb = button.getAttribute('data-thumb');
|
||||
var mediaTitle = button.getAttribute('data-title');
|
||||
var mediaChannel = button.getAttribute('data-channel');
|
||||
var dataId = button.getAttribute('data-id');
|
||||
// get watched status
|
||||
var playedStatus = document.createDocumentFragment();
|
||||
playedStatus.appendChild(document.getElementById(dataId));
|
||||
// create player
|
||||
removePlayer();
|
||||
var playerElement = document.getElementById('player');
|
||||
playerElement.setAttribute('data-id', dataId);
|
||||
// playerElement.innerHTML = '';
|
||||
var videoPlayer = document.createElement('video');
|
||||
videoPlayer.setAttribute('src', mediaUrl);
|
||||
videoPlayer.setAttribute('controls', true);
|
||||
videoPlayer.setAttribute('autoplay', true);
|
||||
videoPlayer.setAttribute('width', '100%');
|
||||
videoPlayer.setAttribute('poster', mediaThumb);
|
||||
playerElement.appendChild(videoPlayer);
|
||||
// title bar
|
||||
var titleBar = document.createElement('div');
|
||||
titleBar.className = 'player-title';
|
||||
// close
|
||||
var closeButton = document.createElement('img');
|
||||
closeButton.className = 'close-button';
|
||||
closeButton.setAttribute('src', "/static/img/icon-close.svg");
|
||||
closeButton.setAttribute('alt', 'close-icon');
|
||||
closeButton.setAttribute('data', dataId);
|
||||
closeButton.setAttribute('onclick', "removePlayer()");
|
||||
closeButton.setAttribute('title', 'Close player');
|
||||
titleBar.appendChild(closeButton);
|
||||
// played
|
||||
titleBar.appendChild(playedStatus);
|
||||
playerElement.appendChild(titleBar);
|
||||
// title
|
||||
var videoTitle = document.createElement('p');
|
||||
videoTitle.innerText = mediaTitle;
|
||||
titleBar.appendChild(videoTitle);
|
||||
var videoChannel = document.createElement('p');
|
||||
videoChannel.innerText = mediaChannel
|
||||
titleBar.appendChild(videoChannel);
|
||||
// button
|
||||
var videoButton = document.createElement('button');
|
||||
videoButton.innerText = 'Details';
|
||||
videoButton.setAttribute('onclick', "window.location.href='/video/" + dataId + "/';");
|
||||
titleBar.appendChild(videoButton);
|
||||
}
|
||||
|
||||
function removePlayer() {
|
||||
var playerElement = document.getElementById('player');
|
||||
if (playerElement.hasChildNodes()) {
|
||||
var youtubeId = playerElement.getAttribute('data-id');
|
||||
var playedStatus = document.createDocumentFragment();
|
||||
playedStatus.appendChild(document.getElementById(youtubeId));
|
||||
playerElement.innerHTML = '';
|
||||
// append played status
|
||||
var videoInfo = document.getElementById('video-info-' + youtubeId);
|
||||
videoInfo.insertBefore(playedStatus, videoInfo.firstChild);
|
||||
};
|
||||
}
|
||||
|
||||
// searching channels
|
||||
function searchChannels(query) {
|
||||
var searchResultBox = document.getElementById('resultBox');
|
||||
searchResultBox.innerHTML = '';
|
||||
if (query.length > 1) {
|
||||
var payload = JSON.stringify({'channel-search': query})
|
||||
sendSearchAsYouType(payload);
|
||||
console.log(payload);
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
function populateChannelResults(allResults) {
|
||||
|
||||
var searchResultBox = document.getElementById('resultBox');
|
||||
|
||||
for (let i = 0; i < allResults.length; i++) {
|
||||
|
||||
var singleResult = allResults[i];
|
||||
var source = singleResult['source'];
|
||||
var channelName = source['channel_name'];
|
||||
var channelId = source['channel_id'];
|
||||
var optionElement = document.createElement('option');
|
||||
optionElement.value = channelName;
|
||||
optionElement.setAttribute('data', channelId);
|
||||
searchResultBox.appendChild(optionElement);
|
||||
console.log(channelId, channelName);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function channelRedirect(){
|
||||
var response = document.getElementById('resultBox');
|
||||
var firstChild = response.firstChild
|
||||
if (firstChild) {
|
||||
var redirectId = firstChild.getAttribute('data');
|
||||
console.log('redirecting: ' + redirectId);
|
||||
location = '/channel/' + redirectId;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
|
||||
function sendSearchAsYouType(payload) {
|
||||
console.log(payload);
|
||||
var http = new XMLHttpRequest();
|
||||
|
||||
http.onreadystatechange = function() {
|
||||
if (http.readyState === 4) {
|
||||
allResults = JSON.parse(http.response)['results'];
|
||||
populateChannelResults(allResults);
|
||||
}
|
||||
}
|
||||
|
||||
http.open("POST", "/process/", true);
|
||||
http.setRequestHeader("X-CSRFToken", getCookie("csrftoken"));
|
||||
http.setRequestHeader("Content-type", "application/json");
|
||||
http.send(payload);
|
||||
}
|
||||
|
||||
|
||||
|
||||
// generic
|
||||
function sendPost(payload) {
|
||||
console.log(payload);
|
||||
var http = new XMLHttpRequest();
|
||||
http.open("POST", "/process/", true);
|
||||
http.setRequestHeader("X-CSRFToken", getCookie("csrftoken"));
|
||||
http.setRequestHeader("Content-type", "application/json");
|
||||
http.send(payload);
|
||||
}
|
||||
|
||||
|
||||
function getCookie(c_name) {
|
||||
if (document.cookie.length > 0) {
|
||||
c_start = document.cookie.indexOf(c_name + "=");
|
||||
if (c_start != -1) {
|
||||
c_start = c_start + c_name.length + 1;
|
||||
c_end = document.cookie.indexOf(";", c_start);
|
||||
if (c_end == -1) c_end = document.cookie.length;
|
||||
return unescape(document.cookie.substring(c_start,c_end));
|
||||
};
|
||||
};
|
||||
return "";
|
||||
}
|
||||
|
||||
|
||||
// animations
|
||||
function textReveal() {
|
||||
var textBox = document.getElementById('text-reveal');
|
||||
var button = document.getElementById('text-reveal-button');
|
||||
var textBoxHeight = textBox.style.height;
|
||||
if (textBoxHeight === 'unset') {
|
||||
textBox.style.height = '0px';
|
||||
button.innerText = 'Show';
|
||||
} else {
|
||||
textBox.style.height = 'unset';
|
||||
button.innerText = 'Hide';
|
||||
};
|
||||
}
|
||||
|
||||
function showSearch() {
|
||||
var searchBox = document.getElementById('search-box');
|
||||
var displayStyle = searchBox.style.display
|
||||
if (displayStyle === "") {
|
||||
searchBox.style.display = 'block';
|
||||
} else {
|
||||
searchBox.style.display = "";
|
||||
}
|
||||
var inputBox = document.getElementById('searchInput');
|
||||
inputBox.focus();
|
||||
}
|
||||
|
||||
function showForm() {
|
||||
console.log('show hidden form');
|
||||
var formElement = document.getElementById('hidden-form');
|
||||
var displayStyle = formElement.style.display
|
||||
if (displayStyle === "") {
|
||||
formElement.style.display = 'block';
|
||||
animate('add-icon', 'pulse-img');
|
||||
} else {
|
||||
formElement.style.display = "";
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user