Update dependencies and fix linting problems

package.json

@@ -8,8 +8,8 @@
     "url": "https://github.com/FreeTubeApp/FreeTube/issues"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^1.2.30",
-    "@fortawesome/free-solid-svg-icons": "^5.14.0",
+    "@fortawesome/fontawesome-svg-core": "^1.2.31",
+    "@fortawesome/free-solid-svg-icons": "^5.15.0",
     "@fortawesome/vue-fontawesome": "^2.0.0",
     "@silvermine/videojs-quality-selector": "^1.2.4",
     "autolinker": "^3.14.1",
@@ -36,7 +36,7 @@
     "vue-electron": "^1.0.6",
     "vue-i18n": "^8.21.1",
     "vue-observe-visibility": "^0.4.6",
-    "vue-router": "^3.4.4",
+    "vue-router": "^3.4.5",
     "vuex": "^3.5.1",
     "xml2json": "^0.12.0",
     "youtube-chat": "^1.1.0",
@@ -48,7 +48,7 @@
     "yt-xml2vtt": "^1.1.2",
     "ytdl-core": "^3.3.0",
     "ytpl": "^1.0.1",
-    "ytsr": "^1.0.1"
+    "ytsr": "^1.0.3"
   },
   "description": "A private YouTube client",
   "devDependencies": {
@@ -57,40 +57,40 @@
     "@babel/plugin-proposal-object-rest-spread": "^7.11.0",
     "@babel/preset-env": "^7.11.5",
     "@babel/preset-typescript": "^7.10.4",
-    "@typescript-eslint/eslint-plugin": "^4.2.0",
-    "@typescript-eslint/parser": "^4.2.0",
-    "acorn": "^8.0.1",
+    "@typescript-eslint/eslint-plugin": "^4.3.0",
+    "@typescript-eslint/parser": "^4.3.0",
+    "acorn": "^8.0.3",
     "babel-eslint": "^10.1.0",
     "babel-loader": "^8.1.0",
-    "copy-webpack-plugin": "^6.1.1",
+    "copy-webpack-plugin": "^6.2.0",
     "css-loader": "^4.3.0",
     "devtron": "^1.4.0",
     "electron": "^9.3.1",
     "electron-builder": "^22.8.1",
     "electron-builder-squirrel-windows": "^22.9.1",
     "electron-debug": "^3.1.0",
-    "electron-rebuild": "^2.0.3",
-    "eslint": "^7.9.0",
+    "electron-rebuild": "^2.2.0",
+    "eslint": "^7.10.0",
     "eslint-config-prettier": "^6.12.0",
     "eslint-config-standard": "^14.1.1",
-    "eslint-plugin-import": "^2.22.0",
+    "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-prettier": "^3.1.4",
     "eslint-plugin-promise": "^4.2.1",
     "eslint-plugin-standard": "^4.0.1",
-    "eslint-plugin-vue": "^6.2.2",
+    "eslint-plugin-vue": "^7.0.0",
     "fast-glob": "^3.2.4",
     "file-loader": "^6.1.0",
     "html-webpack-plugin": "^4.5.0",
     "jest": "^26.4.2",
-    "mini-css-extract-plugin": "^0.11.2",
+    "mini-css-extract-plugin": "^0.11.3",
     "node-abi": "^2.19.1",
     "node-loader": "^1.0.1",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.1.2",
     "sass": "^1.26.11",
     "sass-loader": "^10.0.2",
-    "style-loader": "^1.2.1",
+    "style-loader": "^1.3.0",
     "tree-kill": "1.2.2",
     "typescript": "^4.0.3",
     "url-loader": "^4.1.0",

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

@@ -62,7 +62,7 @@ export default Vue.extend({
   },
   watch: {
     profile: function () {
-      this.subscriptions = [].concat(this.profile.subscriptions.sort((a, b) => {
+      this.subscriptions = [].concat(this.profile.subscriptions).sort((a, b) => {
         const nameA = a.name.toLowerCase()
         const nameB = b.name.toLowerCase()
         if (nameA < nameB) {
@@ -75,12 +75,12 @@ export default Vue.extend({
       }).map((channel) => {
         channel.selected = false
         return channel
-      }))
+      })
     }
   },
   mounted: function () {
     if (typeof this.profile.subscriptions !== 'undefined') {
-      this.subscriptions = [].concat(this.profile.subscriptions.sort((a, b) => {
+      this.subscriptions = [].concat(this.profile.subscriptions).sort((a, b) => {
         const nameA = a.name.toLowerCase()
         const nameB = b.name.toLowerCase()
         if (nameA < nameB) {
@@ -93,7 +93,7 @@ export default Vue.extend({
       }).map((channel) => {
         channel.selected = false
         return channel
-      }))
+      })
     }
   },
   methods: {

src/renderer/components/ft-timestamp-catcher/ft-timestamp-catcher.js

@@ -3,7 +3,7 @@ import Vue from 'vue'
 export default Vue.extend({
   name: 'FtTimestampCatcher',
   props: {
-    inputHTML: {
+    inputHtml: {
       type: String,
       default: ''
     }
@@ -13,14 +13,14 @@ export default Vue.extend({
       const match = event.detail.match(/(\d+):(\d+):?(\d+)?/)
       if (match[3] !== undefined) { // HH:MM:SS
         const seconds = 3600 * Number(match[1]) + 60 * Number(match[2]) + Number(match[3])
-        this.$emit('timestampEvent', seconds)
+        this.$emit('timestamp-event', seconds)
       } else { // MM:SS
         const seconds = 60 * Number(match[1]) + Number(match[2])
-        this.$emit('timestampEvent', seconds)
+        this.$emit('timestamp-event', seconds)
       }
     },
     detectTimestamps: function (input) {
-      return input.replace(/(\d+(:\d+)+)/g, '<a href="#" onclick="this.dispatchEvent(new CustomEvent(\'timestampClicked\',{bubbles:true, detail:\'$1\'}))">$1</a>')
+      return input.replace(/(\d+(:\d+)+)/g, '<a href="#" onclick="this.dispatchEvent(new CustomEvent(\'timestamp-clicked\',{bubbles:true, detail:\'$1\'}))">$1</a>')
     }
   }
 })

src/renderer/components/ft-timestamp-catcher/ft-timestamp-catcher.vue

@@ -1,7 +1,7 @@
 <template>
   <p
-    @timestampClicked="catchTimestampClick"
-    v-html="detectTimestamps(inputHTML)"
+    @timestamp-clicked="catchTimestampClick"
+    v-html="detectTimestamps(inputHtml)"
   />
 </template>
 

src/renderer/components/ft-toast/ft-toast.js

@@ -9,10 +9,10 @@ export default Vue.extend({
     }
   },
   mounted: function () {
-    FtToastEvents.$on('toast.open', this.open)
+    FtToastEvents.$on('toast-open', this.open)
   },
   beforeDestroy: function () {
-    FtToastEvents.$off('toast.open', this.open)
+    FtToastEvents.$off('toast-open', this.open)
   },
   methods: {
     performAction: function (index) {

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

@@ -13,6 +13,15 @@ export default Vue.extend({
   components: {
     'ft-card': FtCard
   },
+  beforeRouteLeave: function () {
+    if (this.player !== null && !this.player.isInPictureInPicture()) {
+      this.player.dispose()
+      this.player = null
+      clearTimeout(this.mouseTimeout)
+    } else if (this.player.isInPictureInPicture()) {
+      this.player.play()
+    }
+  },
   props: {
     format: {
       type: String,
@@ -599,14 +608,5 @@ export default Vue.extend({
         }
       }
     }
-  },
-  beforeRouteLeave: function () {
-    if (this.player !== null && !this.player.isInPictureInPicture()) {
-      this.player.dispose()
-      this.player = null
-      clearTimeout(this.mouseTimeout)
-    } else if (this.player.isInPictureInPicture()) {
-      this.player.play()
-    }
   }
 })

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

@@ -42,7 +42,7 @@ export default Vue.extend({
   },
   methods: {
     onTimestamp: function(timestamp) {
-      this.$emit('timestampEvent', timestamp)
+      this.$emit('timestamp-event', timestamp)
     },
 
     getCommentData: function () {

src/renderer/components/watch-video-comments/watch-video-comments.vue

@@ -48,8 +48,8 @@
         </p>
         <ft-timestamp-catcher
           class="commentText"
-          :inputHTML="comment.text"
-          @timestampEvent="onTimestamp"
+          :input-html="comment.text"
+          @timestamp-event="onTimestamp"
         />
         <p class="commentLikeCount">
           <font-awesome-icon

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

@@ -37,7 +37,7 @@ export default Vue.extend({
   },
   methods: {
     onTimestamp: function(timestamp) {
-      this.$emit('timestampEvent', timestamp)
+      this.$emit('timestamp-event', timestamp)
     },
     parseDescriptionHtml: function (descriptionText) {
       descriptionText = descriptionText.replace(/target="_blank"/g, '')

src/renderer/components/watch-video-description/watch-video-description.vue

@@ -2,8 +2,8 @@
   <ft-card class="videoDescription">
     <ft-timestamp-catcher
       class="description"
-      :inputHTML="shownDescription"
-      @timestampEvent="onTimestamp"
+      :input-html="shownDescription"
+      @timestamp-event="onTimestamp"
     />
   </ft-card>
 </template>

src/renderer/components/watch-video-info/watch-video-info.vue

@@ -64,7 +64,7 @@
           class="theatreModeButton option"
           icon="expand-alt"
           theme="secondary"
-          @click="$emit('theatreMode')"
+          @click="$emit('theatre-mode')"
         />
         <ft-icon-button
           v-if="!isUpcoming"

src/renderer/components/watch-video-live-chat/watch-video-live-chat.js

@@ -16,6 +16,10 @@ export default Vue.extend({
     'ft-button': FtButton,
     'ft-list-video': FtListVideo
   },
+  beforeRouteLeave: function () {
+    this.liveChat.stop()
+    this.hasEnded = true
+  },
   props: {
     videoId: {
       type: String,
@@ -248,9 +252,5 @@ export default Vue.extend({
       event.stopPropagation()
       event.preventDefault()
     }
-  },
-  beforeRouteLeave: function () {
-    this.liveChat.stop()
-    this.hasEnded = true
   }
 })

src/renderer/main.js

@@ -19,7 +19,7 @@ Vue.config.productionTip = isDev
 
 library.add(fas)
 
-Vue.component('font-awesome-icon', FontAwesomeIcon)
+Vue.component('FontAwesomeIcon', FontAwesomeIcon)
 Vue.use(VueI18n)
 
 // List of locales approved for use