Format/slightly modernize the JS (#345)

* add basic JS tooling

* fix accidental uses of global variables

* auto-format

* add and fix a couple more standard lint rules

* remove useless return false from settimeout callbacks

* document JS contributing

* fix whitespace in package.json

* add JS stuff to codespell skiplist

* codespell take two

* update github action and add comments about duplicated logic

.eslintrc.js

@@ -0,0 +1,17 @@
+'use strict';
+module.exports = {
+  extends: ['eslint:recommended', 'eslint-config-prettier'],
+  parserOptions: {
+    ecmaVersion: 2020,
+  },
+  env: {
+    browser: true,
+  },
+  rules: {
+    strict: ['error', 'global'],
+    'no-unused-vars': ['error', { vars: 'local' }],
+    eqeqeq: ['error', 'always', { null: 'ignore' }],
+    curly: ['error', 'multi-line'],
+    'no-var': 'error',
+  },
+};

.github/workflows/lint_python.yml

@@ -6,11 +6,13 @@ jobs:
     steps:
       - uses: actions/checkout@v2
       - uses: actions/setup-python@v2
+      # note: this logic is duplicated in the `validate` function in ./deploy.sh
+      # if you update this file, you should update that as well
       - run: pip install --upgrade pip wheel
       - run: pip install bandit black codespell flake8 flake8-bugbear
                          flake8-comprehensions isort
       - run: black --check --diff --line-length 79 .
-      - run: codespell
+      - run: codespell --skip="./.git,./package.json,./package-lock.json,./node_modules"
       - run: flake8 . --count --max-complexity=10 --max-line-length=79
                       --show-source --statistics
       - run: isort --check-only --line-length 79 --profile black .

.gitignore

@@ -5,4 +5,7 @@ __pycache__
 db.sqlite3
 
 # vscode custom conf
-.vscode
+.vscode
+
+# JavaScript stuff
+node_modules

CONTRIBUTING.md

@@ -76,6 +76,10 @@ Do you see anything on the roadmap that you would like to take a closer look at
 
 To fix a bug or implement a feature, fork the repository and make all changes to the testing branch. When ready, create a pull request.
 
+## Making changes to the JavaScript
+
+The JavaScript does not require any build step; you just edit the files directly. However, there is config for eslint and prettier (a linter and formatter respectively); their use is recommended but not required. To use them, install `node`, run `npm i` from the root directory of this repository to install dependencies, then run `npm run lint` and `npm run format` to run eslint and prettier respectively.
+
 ## Releases
 
 There are three different docker tags:

deploy.sh

@@ -82,10 +82,12 @@ function validate {
 
     echo "run validate on $check_path"
 
+    # note: this logic is duplicated in the `./github/workflows/lint_python.yml` config
+    # if you update this file, you should update that as well
     echo "running black"
     black --diff --color --check -l 79 "$check_path"
     echo "running codespell"
-    codespell --skip="./.git" "$check_path"
+    codespell --skip="./.git,./package.json,./package-lock.json,./node_modules" "$check_path"
     echo "running flake8"
     flake8 "$check_path" --count --max-complexity=10 --max-line-length=79 \
         --show-source --statistics

package.json

@@ -0,0 +1,17 @@
+{
+  "private": true,
+  "scripts": {
+    "lint": "eslint 'tubearchivist/static/**/*.js'",
+    "format": "prettier --write 'tubearchivist/static/**/*.js'"
+  },
+  "devDependencies": {
+    "eslint": "^8.26.0",
+    "prettier": "^2.7.1",
+    "eslint-config-prettier": "^8.5.0"
+  },
+  "prettier": {
+    "singleQuote": true,
+    "arrowParens": "avoid",
+    "printWidth": 100
+  }
+}

tubearchivist/static/cast-videos.js

@@ -1,148 +1,157 @@
+'use strict';
+
+/* global cast chrome getVideoPlayerVideoId postVideoProgress setProgressBar getVideoPlayer getVideoPlayerWatchStatus watchedThreshold isWatched getVideoData getURL getVideoPlayerCurrentTime */
+
 function initializeCastApi() {
-    cast.framework.CastContext.getInstance().setOptions({
-        receiverApplicationId: chrome.cast.media.DEFAULT_MEDIA_RECEIVER_APP_ID, // Use built in receiver app on cast device, see https://developers.google.com/cast/docs/styled_receiver if you want to be able to add a theme, splash screen or watermark. Has a $5 one time fee.
-        autoJoinPolicy: chrome.cast.AutoJoinPolicy.ORIGIN_SCOPED
-    });
+  cast.framework.CastContext.getInstance().setOptions({
+    receiverApplicationId: chrome.cast.media.DEFAULT_MEDIA_RECEIVER_APP_ID, // Use built in receiver app on cast device, see https://developers.google.com/cast/docs/styled_receiver if you want to be able to add a theme, splash screen or watermark. Has a $5 one time fee.
+    autoJoinPolicy: chrome.cast.AutoJoinPolicy.ORIGIN_SCOPED,
+  });
 
-    var player = new cast.framework.RemotePlayer();
-    var playerController = new cast.framework.RemotePlayerController(player);
+  let player = new cast.framework.RemotePlayer();
+  let playerController = new cast.framework.RemotePlayerController(player);
 
-    // Add event listerner to check if a connection to a cast device is initiated
-    playerController.addEventListener(
-        cast.framework.RemotePlayerEventType.IS_CONNECTED_CHANGED, function() { 
-            castConnectionChange(player) 
-        }
-    );
-    playerController.addEventListener(
-        cast.framework.RemotePlayerEventType.CURRENT_TIME_CHANGED, function() { 
-            castVideoProgress(player) 
-        }
-    );
-    playerController.addEventListener(
-        cast.framework.RemotePlayerEventType.IS_PAUSED_CHANGED, function() { 
-            castVideoPaused(player) 
-        }
-    );
+  // Add event listerner to check if a connection to a cast device is initiated
+  playerController.addEventListener(
+    cast.framework.RemotePlayerEventType.IS_CONNECTED_CHANGED,
+    function () {
+      castConnectionChange(player);
+    }
+  );
+  playerController.addEventListener(
+    cast.framework.RemotePlayerEventType.CURRENT_TIME_CHANGED,
+    function () {
+      castVideoProgress(player);
+    }
+  );
+  playerController.addEventListener(
+    cast.framework.RemotePlayerEventType.IS_PAUSED_CHANGED,
+    function () {
+      castVideoPaused(player);
+    }
+  );
 }
 
-
 function castConnectionChange(player) {
-    // If cast connection is initialized start cast
-    if (player.isConnected) {
-        // console.log("Cast Connected.");
-        castStart();
-    } else if (!player.isConnected) {
-        // console.log("Cast Disconnected.");
-    }
+  // If cast connection is initialized start cast
+  if (player.isConnected) {
+    // console.log("Cast Connected.");
+    castStart();
+  } else if (!player.isConnected) {
+    // console.log("Cast Disconnected.");
+  }
 }
 
 function castVideoProgress(player) {
-    var videoId = getVideoPlayerVideoId();
-    if (player.mediaInfo.contentId.includes(videoId)) {
-        var currentTime = player.currentTime;
-        var duration = player.duration;
-        if ((currentTime % 10) <= 1.0 && currentTime != 0 && duration != 0) { // Check progress every 10 seconds or else progress is checked a few times a second
-            postVideoProgress(videoId, currentTime);
-            setProgressBar(videoId, currentTime, duration);
-            if (!getVideoPlayerWatchStatus()) { // Check if video is already marked as watched
-                if (watchedThreshold(currentTime, duration)) {
-                    isWatched(videoId);
-                }
-            }
+  let videoId = getVideoPlayerVideoId();
+  if (player.mediaInfo.contentId.includes(videoId)) {
+    let currentTime = player.currentTime;
+    let duration = player.duration;
+    if (currentTime % 10 <= 1.0 && currentTime !== 0 && duration !== 0) {
+      // Check progress every 10 seconds or else progress is checked a few times a second
+      postVideoProgress(videoId, currentTime);
+      setProgressBar(videoId, currentTime, duration);
+      if (!getVideoPlayerWatchStatus()) {
+        // Check if video is already marked as watched
+        if (watchedThreshold(currentTime, duration)) {
+          isWatched(videoId);
         }
+      }
     }
+  }
 }
 
 function castVideoPaused(player) {
-    var videoId = getVideoPlayerVideoId();
-    var currentTime = player.currentTime;
-    var duration = player.duration;
-    if (player.mediaInfo != null) {
-        if (player.mediaInfo.contentId.includes(videoId)) {
-            if (currentTime != 0 && duration != 0) {
-                postVideoProgress(videoId, currentTime);
-            }
-        }
+  let videoId = getVideoPlayerVideoId();
+  let currentTime = player.currentTime;
+  let duration = player.duration;
+  if (player.mediaInfo != null) {
+    if (player.mediaInfo.contentId.includes(videoId)) {
+      if (currentTime !== 0 && duration !== 0) {
+        postVideoProgress(videoId, currentTime);
+      }
     }
+  }
 }
 
 function castStart() {
-    var castSession = cast.framework.CastContext.getInstance().getCurrentSession();
-    // Check if there is already media playing on the cast target to prevent recasting on page reload or switching to another video page
-    if (!castSession.getMediaSession()) { 
-        var videoId = getVideoPlayerVideoId();
-        var videoData = getVideoData(videoId);
-        var contentId = getURL() + videoData.data.media_url;
-        var contentTitle = videoData.data.title;
-        var contentImage = getURL() + videoData.data.vid_thumb_url;
+  let castSession = cast.framework.CastContext.getInstance().getCurrentSession();
+  // Check if there is already media playing on the cast target to prevent recasting on page reload or switching to another video page
+  if (!castSession.getMediaSession()) {
+    let videoId = getVideoPlayerVideoId();
+    let videoData = getVideoData(videoId);
+    let contentId = getURL() + videoData.data.media_url;
+    let contentTitle = videoData.data.title;
+    let contentImage = getURL() + videoData.data.vid_thumb_url;
 
-        contentType = 'video/mp4'; // Set content type, only videos right now so it is hard coded
-        contentCurrentTime = getVideoPlayerCurrentTime(); // Get video's current position
-        contentActiveSubtitle = [];
-        // Check if a subtitle is turned on.
-        for (var i = 0; i < getVideoPlayer().textTracks.length; i++) {
-            if (getVideoPlayer().textTracks[i].mode == "showing") {
-                contentActiveSubtitle =[i + 1];
-            }
-        }
-        contentSubtitles = [];
-        var videoSubtitles = videoData.data.subtitles; // Array of subtitles
-        if (typeof(videoSubtitles) != 'undefined' && videoData.config.downloads.subtitle) {
-            for (var i = 0; i < videoSubtitles.length; i++) {
-                subtitle = new chrome.cast.media.Track(i, chrome.cast.media.TrackType.TEXT);
-                subtitle.trackContentId = videoSubtitles[i].media_url;
-                subtitle.trackContentType = 'text/vtt';
-                subtitle.subtype = chrome.cast.media.TextTrackType.SUBTITLES;
-                subtitle.name = videoSubtitles[i].name;
-                subtitle.language = videoSubtitles[i].lang;
-                subtitle.customData = null;
-                contentSubtitles.push(subtitle);
-            }
-        }
+    let contentType = 'video/mp4'; // Set content type, only videos right now so it is hard coded
+    let contentCurrentTime = getVideoPlayerCurrentTime(); // Get video's current position
+    let contentActiveSubtitle = [];
+    // Check if a subtitle is turned on.
+    for (let i = 0; i < getVideoPlayer().textTracks.length; i++) {
+      if (getVideoPlayer().textTracks[i].mode === 'showing') {
+        contentActiveSubtitle = [i + 1];
+      }
+    }
+    let contentSubtitles = [];
+    let videoSubtitles = videoData.data.subtitles; // Array of subtitles
+    if (typeof videoSubtitles !== 'undefined' && videoData.config.downloads.subtitle) {
+      for (let i = 0; i < videoSubtitles.length; i++) {
+        let subtitle = new chrome.cast.media.Track(i, chrome.cast.media.TrackType.TEXT);
+        subtitle.trackContentId = videoSubtitles[i].media_url;
+        subtitle.trackContentType = 'text/vtt';
+        subtitle.subtype = chrome.cast.media.TextTrackType.SUBTITLES;
+        subtitle.name = videoSubtitles[i].name;
+        subtitle.language = videoSubtitles[i].lang;
+        subtitle.customData = null;
+        contentSubtitles.push(subtitle);
+      }
+    }
 
-        mediaInfo = new chrome.cast.media.MediaInfo(contentId, contentType); // Create MediaInfo var that contains url and content type
-        // mediaInfo.streamType = chrome.cast.media.StreamType.BUFFERED; // Set type of stream, BUFFERED, LIVE, OTHER
-        mediaInfo.metadata = new chrome.cast.media.GenericMediaMetadata(); // Create metadata var and add it to MediaInfo
-        mediaInfo.metadata.title = contentTitle.replace("&amp;", "&"); // Set the video title
-        mediaInfo.metadata.images = [new chrome.cast.Image(contentImage)]; // Set the video thumbnail
-        // mediaInfo.textTrackStyle = new chrome.cast.media.TextTrackStyle();
-        mediaInfo.tracks = contentSubtitles;
+    let mediaInfo = new chrome.cast.media.MediaInfo(contentId, contentType); // Create MediaInfo var that contains url and content type
+    // mediaInfo.streamType = chrome.cast.media.StreamType.BUFFERED; // Set type of stream, BUFFERED, LIVE, OTHER
+    mediaInfo.metadata = new chrome.cast.media.GenericMediaMetadata(); // Create metadata var and add it to MediaInfo
+    mediaInfo.metadata.title = contentTitle.replace('&amp;', '&'); // Set the video title
+    mediaInfo.metadata.images = [new chrome.cast.Image(contentImage)]; // Set the video thumbnail
+    // mediaInfo.textTrackStyle = new chrome.cast.media.TextTrackStyle();
+    mediaInfo.tracks = contentSubtitles;
 
-        var request = new chrome.cast.media.LoadRequest(mediaInfo); // Create request with the previously set MediaInfo. 
-        // request.queueData = new chrome.cast.media.QueueData(); // See https://developers.google.com/cast/docs/reference/web_sender/chrome.cast.media.QueueData for playlist support.
-        request.currentTime = shiftCurrentTime(contentCurrentTime); // Set video start position based on the browser video position
-        request.activeTrackIds = contentActiveSubtitle; // Set active subtitle based on video player
-        // request.autoplay = false; // Set content to auto play, true by default
-        castSession.loadMedia(request).then(
-            function() { 
-                castSuccessful();
-            }, 
-            function() { 
-                castFailed(errorCode); 
-            }
-        ); // Send request to cast device
-    }   
+    let request = new chrome.cast.media.LoadRequest(mediaInfo); // Create request with the previously set MediaInfo.
+    // request.queueData = new chrome.cast.media.QueueData(); // See https://developers.google.com/cast/docs/reference/web_sender/chrome.cast.media.QueueData for playlist support.
+    request.currentTime = shiftCurrentTime(contentCurrentTime); // Set video start position based on the browser video position
+    request.activeTrackIds = contentActiveSubtitle; // Set active subtitle based on video player
+    // request.autoplay = false; // Set content to auto play, true by default
+    castSession.loadMedia(request).then(
+      function () {
+        castSuccessful();
+      },
+      function (error) {
+        castFailed(error.code);
+      }
+    ); // Send request to cast device
+  }
 }
 
-function shiftCurrentTime(contentCurrentTime) { // Shift media back 3 seconds to prevent missing some of the content
-    if (contentCurrentTime > 5) {
-        return(contentCurrentTime - 3);
-    } else {
-        return(0);
-    }
+function shiftCurrentTime(contentCurrentTime) {
+  // Shift media back 3 seconds to prevent missing some of the content
+  if (contentCurrentTime > 5) {
+    return contentCurrentTime - 3;
+  } else {
+    return 0;
+  }
 }
 
 function castSuccessful() {
-    // console.log('Cast Successful.');
-    getVideoPlayer().pause(); // Pause browser video on successful cast
+  // console.log('Cast Successful.');
+  getVideoPlayer().pause(); // Pause browser video on successful cast
 }
 
 function castFailed(errorCode) {
-    console.log('Error code: ' + errorCode);
+  console.log('Error code: ' + errorCode);
 }
 
-window['__onGCastApiAvailable'] = function(isAvailable) {
-    if (isAvailable) {
-        initializeCastApi();
-    }
-}
+window['__onGCastApiAvailable'] = function (isAvailable) {
+  if (isAvailable) {
+    initializeCastApi();
+  }
+};

tubearchivist/static/progress.js

@@ -1,106 +1,110 @@
 /**
  * Handle multi channel notifications
- * 
+ *
  */
 
-checkMessages()
+'use strict';
+
+checkMessages();
 
 // page map to notification status
 const messageTypes = {
-    "download": ["message:download", "message:add", "message:rescan", "message:playlistscan"],
-    "channel": ["message:subchannel"],
-    "channel_id": ["message:playlistscan"],
-    "playlist": ["message:subplaylist"],
-    "setting": ["message:setting"]
-}
+  download: ['message:download', 'message:add', 'message:rescan', 'message:playlistscan'],
+  channel: ['message:subchannel'],
+  channel_id: ['message:playlistscan'],
+  playlist: ['message:subplaylist'],
+  setting: ['message:setting'],
+};
 
 // start to look for messages
 function checkMessages() {
-    var notifications = document.getElementById("notifications");
-    if (notifications) {
-        var dataOrigin = notifications.getAttribute("data");
-        getMessages(dataOrigin);
-    }
+  let notifications = document.getElementById('notifications');
+  if (notifications) {
+    let dataOrigin = notifications.getAttribute('data');
+    getMessages(dataOrigin);
+  }
 }
 
 // get messages for page on timer
 function getMessages(dataOrigin) {
-    fetch('/progress/').then(response => {
-        return response.json();
-    }).then(responseData => {
-        var messages = buildMessage(responseData, dataOrigin);
-        if (messages.length > 0) {
-            // restart itself
-            setTimeout(function() {
-                getMessages(dataOrigin);
-            }, 3000);
-        };
+  fetch('/progress/')
+    .then(response => {
+      return response.json();
+    })
+    .then(responseData => {
+      let messages = buildMessage(responseData, dataOrigin);
+      if (messages.length > 0) {
+        // restart itself
+        setTimeout(function () {
+          getMessages(dataOrigin);
+        }, 3000);
+      }
     });
 }
 
 // make div for all messages, return relevant
 function buildMessage(responseData, dataOrigin) {
-    // filter relevan messages
-    var allMessages = responseData["messages"];
-    var messages = allMessages.filter(function(value) {
-        return messageTypes[dataOrigin].includes(value["status"])
-    }, dataOrigin);
-    // build divs
-    var notificationDiv = document.getElementById("notifications");
-    var nots = notificationDiv.childElementCount;
-    notificationDiv.innerHTML = "";
-    for (let i = 0; i < messages.length; i++) {
-        var messageData = messages[i];
-        var messageStatus = messageData["status"];
-        var messageBox = document.createElement("div");
-        var title = document.createElement("h3");
-        title.innerHTML = messageData["title"];
-        var message = document.createElement("p");
-        message.innerHTML = messageData["message"];
-        messageBox.appendChild(title);
-        messageBox.appendChild(message);
-        messageBox.classList.add(messageData["level"], "notification");
-        notificationDiv.appendChild(messageBox);
-        if (messageStatus === "message:download") {
-            checkDownloadIcons();
-        };
-    };
-    // reload page when no more notifications
-    if (nots > 0 && messages.length === 0) {
-        location.reload();
-    };
-    return messages
+  // filter relevan messages
+  let allMessages = responseData['messages'];
+  let messages = allMessages.filter(function (value) {
+    return messageTypes[dataOrigin].includes(value['status']);
+  }, dataOrigin);
+  // build divs
+  let notificationDiv = document.getElementById('notifications');
+  let nots = notificationDiv.childElementCount;
+  notificationDiv.innerHTML = '';
+  for (let i = 0; i < messages.length; i++) {
+    let messageData = messages[i];
+    let messageStatus = messageData['status'];
+    let messageBox = document.createElement('div');
+    let title = document.createElement('h3');
+    title.innerHTML = messageData['title'];
+    let message = document.createElement('p');
+    message.innerHTML = messageData['message'];
+    messageBox.appendChild(title);
+    messageBox.appendChild(message);
+    messageBox.classList.add(messageData['level'], 'notification');
+    notificationDiv.appendChild(messageBox);
+    if (messageStatus === 'message:download') {
+      checkDownloadIcons();
+    }
+  }
+  // reload page when no more notifications
+  if (nots > 0 && messages.length === 0) {
+    location.reload();
+  }
+  return messages;
 }
 
 // check if download icons are needed
 function checkDownloadIcons() {
-    var iconBox = document.getElementById("downloadControl");
-    if (iconBox.childElementCount === 0) {
-        var downloadIcons = buildDownloadIcons();
-        iconBox.appendChild(downloadIcons);
-    };
+  let iconBox = document.getElementById('downloadControl');
+  if (iconBox.childElementCount === 0) {
+    let downloadIcons = buildDownloadIcons();
+    iconBox.appendChild(downloadIcons);
+  }
 }
 
 // add dl control icons
 function buildDownloadIcons() {
-    var downloadIcons = document.createElement('div');
-    downloadIcons.classList = 'dl-control-icons';
-    // stop icon
-    var stopIcon = document.createElement('img');
-    stopIcon.setAttribute('id', "stop-icon");
-    stopIcon.setAttribute('title', "Stop Download Queue");
-    stopIcon.setAttribute('src', "/static/img/icon-stop.svg");
-    stopIcon.setAttribute('alt', "stop icon");
-    stopIcon.setAttribute('onclick', 'stopQueue()');
-    // kill icon
-    var killIcon = document.createElement('img');
-    killIcon.setAttribute('id', "kill-icon");
-    killIcon.setAttribute('title', "Kill Download Queue");
-    killIcon.setAttribute('src', "/static/img/icon-close.svg");
-    killIcon.setAttribute('alt', "kill icon");
-    killIcon.setAttribute('onclick', 'killQueue()');
-    // stich together
-    downloadIcons.appendChild(stopIcon);
-    downloadIcons.appendChild(killIcon);
-    return downloadIcons
+  let downloadIcons = document.createElement('div');
+  downloadIcons.classList = 'dl-control-icons';
+  // stop icon
+  let stopIcon = document.createElement('img');
+  stopIcon.setAttribute('id', 'stop-icon');
+  stopIcon.setAttribute('title', 'Stop Download Queue');
+  stopIcon.setAttribute('src', '/static/img/icon-stop.svg');
+  stopIcon.setAttribute('alt', 'stop icon');
+  stopIcon.setAttribute('onclick', 'stopQueue()');
+  // kill icon
+  let killIcon = document.createElement('img');
+  killIcon.setAttribute('id', 'kill-icon');
+  killIcon.setAttribute('title', 'Kill Download Queue');
+  killIcon.setAttribute('src', '/static/img/icon-close.svg');
+  killIcon.setAttribute('alt', 'kill icon');
+  killIcon.setAttribute('onclick', 'killQueue()');
+  // stich together
+  downloadIcons.appendChild(stopIcon);
+  downloadIcons.appendChild(killIcon);
+  return downloadIcons;
 }