Merge branch 'development' into feature/playlist-2023-05

* development:
  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)
  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)
  Bump postcss from 8.4.28 to 8.4.29 (FreeTubeApp#3995)
  Bump @babel/preset-env from 7.22.10 to 7.22.14 (FreeTubeApp#3996)
  Bump marked from 7.0.5 to 8.0.0 (FreeTubeApp#3993)
  Bump electron-builder from 24.6.3 to 24.6.4 (FreeTubeApp#3992)

# Conflicts:
#	src/renderer/views/Watch/Watch.js

.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/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':

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-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>

src/renderer/components/ft-profile-filter-channels-list/ft-profile-filter-channels-list.vue

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

src/renderer/components/subscriptions-tab-ui/subscriptions-tab-ui.js

@@ -77,10 +77,6 @@ export default defineComponent({
     document.removeEventListener('keydown', this.keyboardShortcutHandler)
   },
   methods: {
-    goToChannel: function (id) {
-      this.$router.push({ path: `/channel/${id}` })
-    },
-
     increaseLimit: function () {
       this.dataLimit += 100
       sessionStorage.setItem('subscriptionLimit', this.dataLimit)

src/renderer/components/subscriptions-tab-ui/subscriptions-tab-ui.vue

@@ -14,7 +14,6 @@
           :channel-name="channel.name"
           :channel-id="channel.id"
           :channel-thumbnail="channel.thumbnail"
-          @click="goToChannel(channel.id)"
         />
       </ft-flex-box>
     </div>

src/renderer/components/watch-video-playlist/watch-video-playlist.css

@@ -36,6 +36,8 @@
 }
 
 .playlistIcon {
+  height: 20px;
+  width: 20px;
   font-size: 20px;
   padding: 10px;
   margin-top: -25px;

src/renderer/components/watch-video-playlist/watch-video-playlist.js

@@ -34,6 +34,7 @@ export default defineComponent({
       shuffleEnabled: false,
       loopEnabled: false,
       reversePlaylist: false,
+      pauseOnCurrentVideo: false,
       channelName: '',
       channelId: '',
       playlistTitle: '',
@@ -83,7 +84,7 @@ export default defineComponent({
       return !this.loopEnabled
     },
 
-    videoIsLastInInPlaylistItems: function() {
+    videoIsLastInInPlaylistItems: function () {
       if (this.shuffleEnabled) {
         return this.videoIndexInPlaylistItems === this.randomizedPlaylistItems.length - 1
       } else {
@@ -124,7 +125,7 @@ export default defineComponent({
         }
       }
     },
-    watchViewLoading: function(newVal, oldVal) {
+    watchViewLoading: function (newVal, oldVal) {
       // This component is loaded/rendered before watch view loaded
       if (oldVal && !newVal) {
         // Scroll after watch view loaded, otherwise doesn't work
@@ -133,7 +134,7 @@ export default defineComponent({
         this.scrollToCurrentVideo()
       }
     },
-    isLoading: function(newVal, oldVal) {
+    isLoading: function (newVal, oldVal) {
       // This component is loaded/rendered before watch view loaded
       if (oldVal && !newVal) {
         // Scroll after this component loaded, otherwise doesn't work
@@ -217,6 +218,16 @@ export default defineComponent({
       }, 1)
     },
 
+    togglePauseOnCurrentVideo: function () {
+      if (this.pauseOnCurrentVideo) {
+        this.pauseOnCurrentVideo = false
+        showToast(this.$t('Playlist will not pause when current video is finished'))
+      } else {
+        this.pauseOnCurrentVideo = true
+        showToast(this.$t('Playlist will pause when current video is finished'))
+      }
+    },
+
     playNextVideo: function () {
       const playlistInfo = {
         playlistId: this.playlistId