Fix linting issues

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

@@ -15,7 +15,7 @@ export default Vue.extend({
   props: {
     label: {
       type: String,
-      default: ""
+      default: ''
     },
     textColor: {
       type: String,

src/renderer/components/ft-icon-button/ft-icon-button.vue

@@ -25,8 +25,8 @@
     >
       <slot>
         <ul
-          class="list"
           v-if="dropdownNames.length > 0"
+          class="list"
         >
           <li
             v-for="(label, index) in dropdownNames"

src/renderer/components/ft-input/ft-input.vue

@@ -14,8 +14,8 @@
     </label>
     <input
       :id="id"
-      :list="idDataList"
       v-model="inputData"
+      :list="idDataList"
       class="ft-input"
       type="text"
       :placeholder="placeholder"

src/renderer/components/ft-share-button/ft-share-button.vue

@@ -5,11 +5,17 @@
     theme="secondary"
     icon="share-alt"
     dropdown-position-x="left"
-		:forceDropdown="true"
+    :force-dropdown="true"
   >
     <div class="shareLinks">
       <div class="header">
-				<img class="youtubeLogo" src="~../../assets/img/yt_logo_mono_dark.png" alt="YouTube" width="794" height="178">
+        <img
+          class="youtubeLogo"
+          src="~../../assets/img/yt_logo_mono_dark.png"
+          alt="YouTube"
+          width="794"
+          height="178"
+        >
       </div>
 
       <div class="buttons">
@@ -17,67 +23,69 @@
           class="action"
           @click="copyYoutube()"
         >
-					<font-awesome-icon icon="copy"/>
+          <font-awesome-icon icon="copy" />
           Copy link
         </ft-button>
         <ft-button
           class="action"
           @click="openYoutube()"
         >
-					<font-awesome-icon icon="globe"/>
+          <font-awesome-icon icon="globe" />
           Open link
         </ft-button>
         <ft-button
           class="action"
-					backgroundColor="var(--accent-color-active)"
+          background-color="var(--accent-color-active)"
           @click="copyYoutubeEmbed()"
         >
-					<font-awesome-icon icon="copy"/>
+          <font-awesome-icon icon="copy" />
           Copy embed
         </ft-button>
         <ft-button
           class="action"
-					backgroundColor="var(--accent-color-active)"
+          background-color="var(--accent-color-active)"
           @click="openYoutubeEmbed()"
         >
-					<font-awesome-icon icon="globe"/>
+          <font-awesome-icon icon="globe" />
           Open embed
         </ft-button>
       </div>
 
-			<div class="divider"></div>
+      <div class="divider" />
 
-			<div class="header invidious"><span class="invidiousLogo"/>Invidious</div>
+      <div class="header invidious">
+        <span class="invidiousLogo" />Invidious
+      </div>
 
       <div class="buttons">
         <ft-button
           class="action"
           @click="copyInvidious()"
         >
-					<font-awesome-icon icon="copy"/>
+          <font-awesome-icon icon="copy" />
           Copy link
         </ft-button>
         <ft-button
           class="action"
           @click="openInvidious()"
         >
-					<font-awesome-icon icon="globe"/>
+          <font-awesome-icon icon="globe" />
           Open link
         </ft-button>
         <ft-button
           class="action"
-					backgroundColor="var(--accent-color-active)"
+          background-color="var(--accent-color-active)"
           @click="copyInvidiousEmbed()"
         >
-					<font-awesome-icon icon="copy"/>
+          <font-awesome-icon icon="copy" />
           Copy embed
         </ft-button>
         <ft-button
           class="action"
-					backgroundColor="var(--accent-color-active)"
+          background-color="var(--accent-color-active)"
           @click="openInvidiousEmbed()"
         >
-					<font-awesome-icon icon="globe"/>
+          <font-awesome-icon icon="globe" />
           Open embed
         </ft-button>
       </div>

src/renderer/components/ft-slider/ft-slider.vue

@@ -4,11 +4,11 @@
   >
     <input
       :id="id"
+      v-model.number="currentValue"
       type="range"
       :min="minValue"
       :max="maxValue"
       :step="step"
-      v-model.number="currentValue"
       @change="$emit('change', $event.target.value)"
     >
     <span>

src/renderer/components/ft-toggle-switch/ft-toggle-switch.vue

@@ -1,12 +1,12 @@
 <template>
   <div>
     <input
-      type="checkbox"
       :id="id"
+      v-model="currentValue"
+      type="checkbox"
       name="set-name"
       class="switch-input"
-      :checked='currentValue'
+      :checked="currentValue"
-      v-model="currentValue"
       @change="$emit('change', currentValue)"
     >
     <label

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

@@ -15,7 +15,7 @@
         :type="source.type || source.mimeType"
         :label="source.qualityLabel"
         :selected="source.qualityLabel === selectedDefaultQuality"
-      />
+      >
       <track
         v-for="(caption, index) in captionList"
         :key="index + '_caption'"

src/renderer/components/general-settings/general-settings.vue

@@ -1,6 +1,7 @@
 <template>
   <ft-card
-    class="card">
+    class="card"
+  >
     <h3
       class="videoTitle"
     >

src/renderer/components/player-settings/player-settings.vue

@@ -1,6 +1,7 @@
 <template>
   <ft-card
-    class="relative card">
+    class="relative card"
+  >
     <h3
       class="videoTitle"
     >

src/renderer/components/subscription-settings/subscription-settings.vue

@@ -1,6 +1,7 @@
 <template>
   <ft-card
-    class="relative card">
+    class="relative card"
+  >
     <h3
       class="videoTitle"
     >

src/renderer/components/theme-settings/theme-settings.vue

@@ -1,6 +1,7 @@
 <template>
   <ft-card
-    class="relative card">
+    class="relative card"
+  >
     <h3>
       {{ title }}
     </h3>

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

@@ -50,10 +50,10 @@
           <div
             class="likeBar"
             :style="{ background: `linear-gradient(to right, var(--accent-color) ${likePercentageRatio}%, #9E9E9E ${likePercentageRatio}%` }"
-          ></div>
+          />
           <div>
-            <span class="likeCount"><font-awesome-icon icon="thumbs-up"/> {{ likeCount }}</span>
+            <span class="likeCount"><font-awesome-icon icon="thumbs-up" /> {{ likeCount }}</span>
-            <span class="dislikeCount"><font-awesome-icon icon="thumbs-down"/> {{ dislikeCount }}</span>
+            <span class="dislikeCount"><font-awesome-icon icon="thumbs-down" /> {{ dislikeCount }}</span>
           </div>
         </div>
       </div>
@@ -75,8 +75,8 @@
           @click="handleFormatChange"
         />
         <ft-share-button
-          class="option"
           :id="id"
+          class="option"
         />
       </div>
     </div>

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

@@ -53,7 +53,7 @@
           <img
             :src="comment.author.thumbnail.url"
             class="channelThumbnail"
-          />
+          >
           <p
             class="superChatContent"
             :style="{ color: 'var(--text-with-main-color)' }"
@@ -67,8 +67,8 @@
         </div>
       </div>
       <div
-        class="openedSuperChat"
         v-if="showSuperChat"
+        class="openedSuperChat"
         :class="superChat.superchat.colorClass"
         @click="showSuperChat = false"
       >
@@ -82,7 +82,7 @@
             <img
               :src="superChat.author.thumbnail.url"
               class="channelThumbnail"
-            />
+            >
             <p
               class="channelName"
             >
@@ -95,11 +95,10 @@
             </p>
           </div>
           <p
-            class="chatMessage"
             v-if="superChat.message.length > 0"
+            class="chatMessage"
             v-html="superChat.messageHtml"
-          >
+          />
-          </p>
         </div>
       </div>
       <div
@@ -107,9 +106,11 @@
         :style="{ height: chatHeight }"
         @mousewheel="e => onScroll(e)"
       >
-        <div v-for="(comment, index) in comments"
+        <div
+          v-for="(comment, index) in comments"
           :key="index"
-        class="comment">
+          class="comment"
+        >
           <div
             v-if="typeof (comment.superchat) !== 'undefined'"
             class="superChatMessage"
@@ -121,7 +122,7 @@
               <img
                 :src="comment.author.thumbnail.url"
                 class="channelThumbnail"
-              />
+              >
               <p
                 class="channelName"
               >
@@ -134,11 +135,10 @@
               </p>
             </div>
             <p
-              class="chatMessage"
               v-if="comment.message.length > 0"
+              class="chatMessage"
               v-html="comment.messageHtml"
-            >
+            />
-            </p>
           </div>
           <div
             v-else
@@ -146,7 +146,7 @@
             <img
               :src="comment.author.thumbnail.url"
               class="channelThumbnail"
-          />
+            >
             <p
               class="chatContent"
             >
@@ -169,14 +169,13 @@
                   :alt="comment.author.badge.thumbnail.alt"
                   :title="comment.author.badge.thumbnail.alt"
                   class="badgeImage"
-              />
-            </span>
-            <span
-              class="chatMessage"
-              v-if="comment.message.length > 0"
-              v-html="comment.messageHtml"
                 >
               </span>
+              <span
+                v-if="comment.message.length > 0"
+                class="chatMessage"
+                v-html="comment.messageHtml"
+              />
             </p>
           </div>
         </div>

src/renderer/store/modules/utils.js

@@ -56,7 +56,7 @@ const actions = {
   getVideoIdFromUrl ({ state }, url) {
     console.log('checking for id')
     console.log(url)
-    const rx = /^.*(?:(?:(you|hook)tu\.?be\/|v\/|vi\/|u\/\w\/|embed\/)|(?:(?:watch)?\?v(?:i)?=|\&v(?:i)?=))([^#\&\?]*).*/
+    const rx = /^.*(?:(?:(you|hook)tu\.?be\/|v\/|vi\/|u\/\w\/|embed\/)|(?:(?:watch)?\?v(?:i)?=|&v(?:i)?=))([^#&?]*).*/
 
     const match = url.match(rx)
 

src/renderer/views/Watch/Watch.vue

@@ -14,6 +14,7 @@
       <div class="videoAreaMargin">
         <ft-video-player
           v-if="!isLoading && !hidePlayer"
+          ref="videoPlayer"
           :dash-src="dashSrc"
           :source-list="activeSourceList"
           :caption-list="captionSourceList"
@@ -22,7 +23,6 @@
           :thumbnail="thumbnail"
           class="videoPlayer"
           :class="{ theatrePlayer: useTheatreMode }"
-          ref="videoPlayer"
           @ended="handleVideoEnded"
           @error="handleVideoError"
         />
@@ -41,9 +41,9 @@
         :like-count="videoLikeCount"
         :dislike-count="videoDislikeCount"
         :view-count="videoViewCount"
-        @theatreMode="toggleTheatreMode"
         class="watchVideo"
         :class="{ theatreWatchVideo: useTheatreMode }"
+        @theatreMode="toggleTheatreMode"
       />
       <watch-video-description
         v-if="!isLoading"
@@ -71,9 +71,9 @@
       <watch-video-playlist
         v-if="watchingPlaylist"
         v-show="!isLoading"
+        ref="watchVideoPlaylist"
         :playlist-id="playlistId"
         :video-id="videoId"
-        ref="watchVideoPlaylist"
         class="watchVideoSideBar watchVideoPlaylist"
         :class="{ theatrePlaylist: useTheatreMode }"
       />

static/pwabuilder-sw.js

@@ -143,7 +143,7 @@ function fromCache(request) {
   return caches.open(CACHE).then(function (cache) {
     return cache.match(request).then(function (matching) {
       if (!matching || matching.status === 404) {
-        return Promise.reject('no-match')
+        return Promise.reject(new Error('no-match'))
       }
 
       return matching