Merge branch 'feature/playlist-2023-05' into custom-builds/current

* feature/playlist-2023-05: (25 commits)
  ! Fix prompt style issue caused by old branch changes
  * Update single playlist view to only show `Remove watched videos` btn when there is any video
  Add button to pause playlist after current video (FreeTubeApp#3938)
  Translated using Weblate (Greek)
  Translated using Weblate (Lithuanian)
  Translated using Weblate (Swedish)
  Translated using Weblate (Catalan)
  Make ft-channel-bubble an actual link when it is being used as one (FreeTubeApp#3980)
  $ Remove unused and unusable playlist code for inserting video IDs into a playlist
  $ Remove unused mapActions entries
  * Make adding large no. of videos faster
  Translated using Weblate (Catalan)
  Translated using Weblate (Catalan)
  Translated using Weblate (French)
  Bump lefthook from 1.4.9 to 1.4.10 (FreeTubeApp#4003)
  Bump the babel group with 3 updates (FreeTubeApp#4000)
  Bump actions/checkout from 3 to 4 (FreeTubeApp#3999)
  Group dependabot created updates for some packages in fewer PRs (FreeTubeApp#3968)
  Chore: Update vscode configurations (FreeTubeApp#3986)
  Bump youtubei.js from 6.1.0 to 6.3.0 (FreeTubeApp#3994)
  ...

.github/dependabot.yml

@@ -8,6 +8,27 @@ updates:
       - "PR: waiting for review"
       - "PR: dependencies"
     open-pull-requests-limit: 15
+    groups:
+      babel:
+        patterns:
+          - "@babel/*"
+          - "babel-*"
+      eslint:
+        patterns:
+          - "eslint"
+          - "eslint-*"
+          - "yaml-eslint-parser"
+          - "vue-eslint-parser"
+      stylelint:
+        patterns:
+          - "stylelint"
+          - "stylelint-*"
+          - "postcss"
+          - "postcss-*"
+          - "@double-great/stylelint-a11y"
+      fortawesome:
+        patterns:
+          - "@fortawesome/*"
   - package-ecosystem: "github-actions"
     directory: "/"
     schedule:

.github/workflows/build.yml

@@ -48,7 +48,7 @@ jobs:
     runs-on: ${{ matrix.os }}
 
     steps:
-    - uses: actions/checkout@v3
+    - uses: actions/checkout@v4
     - name: Use Node.js ${{ matrix.node-version }}
       uses: actions/setup-node@v3
       with:

.github/workflows/calibreapp-image-actions.yml

@@ -11,7 +11,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout Repo
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
       - name: Compress Images
         id: calibre
         uses: calibreapp/image-actions@main

.github/workflows/codeql.yml

@@ -27,7 +27,7 @@ jobs:
 
     steps:
     - name: Checkout repository
-      uses: actions/checkout@v3
+      uses: actions/checkout@v4
 
     # Initializes the CodeQL tools for scanning.
     - name: Initialize CodeQL

.github/workflows/flatpak.yml

@@ -15,7 +15,7 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-    - uses: actions/checkout@v3
+    - uses: actions/checkout@v4
       with:
         repository: flathub/io.freetubeapp.FreeTube
         token: ${{ secrets.FLATHUB_TOKEN }}

.github/workflows/linter.yml

@@ -17,7 +17,7 @@ jobs:
 
     # Steps represent a sequence of tasks that will be executed as part of the job
     steps:
-    - uses: actions/checkout@v3
+    - uses: actions/checkout@v4
     - name: Use Node.js 18.x
       uses: actions/setup-node@v3
       with:

.github/workflows/release.yml

@@ -48,7 +48,7 @@ jobs:
     runs-on: ${{ matrix.os }}
 
     steps:
-    - uses: actions/checkout@v3
+    - uses: actions/checkout@v4
     - name: Use Node.js ${{ matrix.node-version }}
       uses: actions/setup-node@v3
       with:

.vscode/launch.json

@@ -0,0 +1,23 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "dev-runner (Electron)",
+      "type": "node",
+      "request": "launch",
+      "program": "${workspaceFolder}/_scripts/dev-runner.js",
+      "args": ["--remote-debug"]
+    },
+    {
+      "name": "Attach to renderer process (Electron)",
+      "type": "chrome",
+      "request": "attach",
+      "port": 9223,
+      "webRoot": "http://localhost:9080",
+      "sourceMapPathOverrides": {
+        "webpack://freetube/./~/*": "${workspaceFolder}/node_modules/*",
+        "webpack://freetube/./*": "${workspaceFolder}/*"
+      }
+    }
+  ]
+}

package.json

@@ -63,7 +63,7 @@
     "autolinker": "^4.0.0",
     "electron-context-menu": "^3.6.1",
     "lodash.debounce": "^4.0.8",
-    "marked": "^7.0.5",
+    "marked": "^8.0.0",
     "path-browserify": "^1.0.1",
     "process": "^0.11.10",
     "video.js": "7.21.5",
@@ -78,20 +78,20 @@
     "vue-router": "^3.6.5",
     "vue-tiny-slider": "^0.1.39",
     "vuex": "^3.6.2",
-    "youtubei.js": "^6.1.0"
+    "youtubei.js": "^6.3.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.22.11",
-    "@babel/eslint-parser": "^7.22.11",
+    "@babel/core": "^7.22.15",
+    "@babel/eslint-parser": "^7.22.15",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
-    "@babel/preset-env": "^7.22.10",
+    "@babel/preset-env": "^7.22.15",
     "@double-great/stylelint-a11y": "^2.0.2",
     "babel-loader": "^9.1.3",
     "copy-webpack-plugin": "^11.0.0",
     "css-loader": "^6.8.1",
     "css-minimizer-webpack-plugin": "^5.0.1",
     "electron": "^22.3.18",
-    "electron-builder": "^24.6.3",
+    "electron-builder": "^24.6.4",
     "eslint": "^8.48.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-config-standard": "^17.1.0",
@@ -107,10 +107,10 @@
     "html-webpack-plugin": "^5.5.3",
     "js-yaml": "^4.1.0",
     "json-minimizer-webpack-plugin": "^4.0.0",
-    "lefthook": "^1.4.9",
+    "lefthook": "^1.4.10",
     "mini-css-extract-plugin": "^2.7.6",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.4.26",
+    "postcss": "^8.4.29",
     "postcss-scss": "^4.0.7",
     "prettier": "^2.8.8",
     "rimraf": "^5.0.1",

src/constants.js

@@ -44,7 +44,7 @@ const DBActions = {
 
   PLAYLISTS: {
     UPSERT_VIDEO: 'db-action-playlists-upsert-video-by-playlist-name',
-    UPSERT_VIDEO_IDS: 'db-action-playlists-upsert-video-ids-by-playlist-id',
+    UPSERT_VIDEOS: 'db-action-playlists-upsert-videos-by-playlist-name',
     DELETE_VIDEO_ID: 'db-action-playlists-delete-video-by-playlist-name',
     DELETE_VIDEO_IDS: 'db-action-playlists-delete-video-ids',
     DELETE_ALL_VIDEOS: 'db-action-playlists-delete-all-videos'

src/datastores/handlers/base.js

@@ -124,10 +124,10 @@ class Playlists {
     )
   }
 
-  static upsertVideoIdsByPlaylistId(_id, videoIds) {
+  static upsertVideosByPlaylistId(_id, videos) {
     return db.playlists.updateAsync(
       { _id },
-      { $push: { videos: { $each: videoIds } } },
+      { $push: { videos: { $each: videos } } },
       { upsert: true }
     )
   }

src/datastores/handlers/electron.js

@@ -143,12 +143,12 @@ class Playlists {
     )
   }
 
-  static upsertVideoIdsByPlaylistId(_id, videoIds) {
+  static upsertVideosByPlaylistId(_id, videos) {
     return ipcRenderer.invoke(
       IpcChannels.DB_PLAYLISTS,
       {
-        action: DBActions.PLAYLISTS.UPSERT_VIDEO_IDS,
-        data: { _id, videoIds }
+        action: DBActions.PLAYLISTS.UPSERT_VIDEOS,
+        data: { _id, videos }
       }
     )
   }

src/datastores/handlers/web.js

@@ -89,8 +89,8 @@ class Playlists {
     return baseHandlers.playlists.upsertVideoByPlaylistId(_id, videoData)
   }
 
-  static upsertVideoIdsByPlaylistId(_id, videoIds) {
-    return baseHandlers.playlists.upsertVideoIdsByPlaylistId(_id, videoIds)
+  static upsertVideosByPlaylistId(_id, videoData) {
+    return baseHandlers.playlists.upsertVideosByPlaylistId(_id, videoData)
   }
 
   static delete(_id) {

src/main/index.js

@@ -472,8 +472,12 @@ function runApp() {
       searchQueryText = null
     } = { }) {
     // Syncing new window background to theme choice.
-    const windowBackground = await baseHandlers.settings._findTheme().then(({ value }) => {
-      switch (value) {
+    const windowBackground = await baseHandlers.settings._findTheme().then((setting) => {
+      if (!setting) {
+        return nativeTheme.shouldUseDarkColors ? '#212121' : '#f1f1f1'
+      }
+
+      switch (setting.value) {
         case 'dark':
           return '#212121'
         case 'light':
@@ -971,10 +975,13 @@ function runApp() {
           )
           return null
 
-        case DBActions.PLAYLISTS.UPSERT_VIDEO_IDS:
-          await baseHandlers.playlists.upsertVideoIdsByPlaylistId(data._id, data.videoIds)
-          // TODO: Syncing (implement only when it starts being used)
-          // syncOtherWindows(IpcChannels.SYNC_PLAYLISTS, event, { event: '_', data })
+        case DBActions.PLAYLISTS.UPSERT_VIDEOS:
+          await baseHandlers.playlists.upsertVideosByPlaylistId(data._id, data.videos)
+          syncOtherWindows(
+            IpcChannels.SYNC_PLAYLISTS,
+            event,
+            { event: SyncEvents.PLAYLISTS.UPSERT_VIDEOS, data }
+          )
           return null
 
         case DBActions.GENERAL.DELETE:

src/renderer/components/channel-about/channel-about.js

@@ -61,10 +61,5 @@ export default defineComponent({
     formattedViews: function () {
       return formatNumber(this.views)
     },
-  },
-  methods: {
-    goToChannel: function (id) {
-      this.$router.push({ path: `/channel/${id}` })
-    },
   }
 })

src/renderer/components/channel-about/channel-about.vue

@@ -90,10 +90,9 @@
         <ft-channel-bubble
           v-for="(channel, index) in relatedChannels"
           :key="index"
+          :channel-id="channel.id"
           :channel-name="channel.name"
           :channel-thumbnail="channel.thumbnailUrl"
-          role="link"
-          @click="goToChannel(channel.id)"
         />
       </ft-flex-box>
     </template>

src/renderer/components/ft-channel-bubble/ft-channel-bubble.css

@@ -9,6 +9,8 @@
   align-items: center;
   gap: 16px;
   overflow: hidden;
+  color: inherit;
+  text-decoration: none;
   -webkit-transition: background 0.2s ease-out;
   -moz-transition: background 0.2s ease-out;
   -o-transition: background 0.2s ease-out;

src/renderer/components/ft-channel-bubble/ft-channel-bubble.js

@@ -1,9 +1,12 @@
 import { defineComponent } from 'vue'
-import { sanitizeForHtmlId } from '../../helpers/accessibility'
 
 export default defineComponent({
   name: 'FtChannelBubble',
   props: {
+    channelId: {
+      type: String,
+      required: true
+    },
     channelName: {
       type: String,
       required: true
@@ -24,15 +27,12 @@ export default defineComponent({
   },
   computed: {
     sanitizedId: function() {
-      return 'channelBubble' + sanitizeForHtmlId(this.channelName)
+      return 'channelBubble' + this.channelId
     }
   },
   methods: {
     handleClick: function (event) {
       if (event instanceof KeyboardEvent) {
-        if (event.target.getAttribute('role') === 'link' && event.key !== 'Enter') {
-          return
-        }
         event.preventDefault()
       }
 

src/renderer/components/ft-channel-bubble/ft-channel-bubble.vue

@@ -1,6 +1,26 @@
 <template>
+  <router-link
+    v-if="!showSelected"
+    class="bubblePadding"
+    :aria-labelledby="sanitizedId"
+    :to="`/channel/${channelId}`"
+  >
+    <img
+      class="bubble"
+      :src="channelThumbnail"
+      alt=""
+    >
+    <div
+      :id="sanitizedId"
+      class="channelName"
+    >
+      {{ channelName }}
+    </div>
+  </router-link>
   <div
+    v-else
     class="bubblePadding"
+    role="button"
     tabindex="0"
     :aria-labelledby="sanitizedId"
     @click="handleClick"

src/renderer/components/ft-list-video/ft-list-video.js

@@ -664,7 +664,6 @@ export default defineComponent({
       'openInExternalPlayer',
       'updateHistory',
       'removeFromHistory',
-      'addVideo',
       'showAddToPlaylistPromptForManyVideos',
     ])
   }

src/renderer/components/ft-playlist-add-video-prompt/ft-playlist-add-video-prompt.js

@@ -218,15 +218,12 @@ export default Vue.extend({
         const playlist = this.allPlaylists.find((list) => list._id === selectedPlaylistId)
         if (playlist == null) { return }
 
-        this.toBeAddedToPlaylistVideoList.forEach((videoObject) => {
-          const payload = {
-            _id: playlist._id,
-            // Avoid `do not mutate vuex store state outside mutation handlers`
-            videoData: videoObject,
-          }
-          this.addVideo(payload)
-          addedPlaylistIds.add(playlist._id)
+        this.addVideos({
+          _id: playlist._id,
+          // Use [].concat to avoid `do not mutate vuex store state outside mutation handlers`
+          videos: [].concat(this.toBeAddedToPlaylistVideoList),
         })
+        addedPlaylistIds.add(playlist._id)
         // Update playlist's `lastUpdatedAt`
         this.updatePlaylist({ _id: playlist._id })
       })
@@ -254,7 +251,7 @@ export default Vue.extend({
     },
 
     ...mapActions([
-      'addVideo',
+      'addVideos',
       'updatePlaylist',
       'hideAddToPlaylistPrompt',
       'showCreatePlaylistPrompt',

src/renderer/components/ft-profile-channel-list/ft-profile-channel-list.vue

@@ -12,10 +12,10 @@
           v-for="(channel, index) in subscriptions"
           :key="index"
           :ref="`channel-${index}`"
+          :channel-id="channel.id"
           :channel-name="channel.name"
           :channel-thumbnail="channel.thumbnail"
           :show-selected="true"
-          role="button"
           @click="handleChannelClick(index)"
         />
       </ft-flex-box>