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

@@ -1,88 +1,96 @@
 <template>
-	<ft-icon-button
+  <ft-icon-button
-		ref="iconButton"
+    ref="iconButton"
-		title="Share Video"
+    title="Share Video"
-		theme="secondary"
+    theme="secondary"
-		icon="share-alt"
+    icon="share-alt"
-		dropdown-position-x="left"
+    dropdown-position-x="left"
-		:forceDropdown="true"
+    :force-dropdown="true"
-	>
+  >
-		<div class="shareLinks">
+    <div class="shareLinks">
-			<div class="header">
+      <div class="header">
-				<img class="youtubeLogo" src="~../../assets/img/yt_logo_mono_dark.png" alt="YouTube" width="794" height="178">
+        <img
-			</div>
+          class="youtubeLogo"
+          src="~../../assets/img/yt_logo_mono_dark.png"
+          alt="YouTube"
+          width="794"
+          height="178"
+        >
+      </div>
 
-			<div class="buttons">
+      <div class="buttons">
-				<ft-button
+        <ft-button
-					class="action"
+          class="action"
-					@click="copyYoutube()"
+          @click="copyYoutube()"
-				>
+        >
-					<font-awesome-icon icon="copy"/>
+          <font-awesome-icon icon="copy" />
-					Copy link
+          Copy link
-				</ft-button>
+        </ft-button>
-				<ft-button
+        <ft-button
-					class="action"
+          class="action"
-					@click="openYoutube()"
+          @click="openYoutube()"
-				>
+        >
-					<font-awesome-icon icon="globe"/>
+          <font-awesome-icon icon="globe" />
-					Open link
+          Open link
-				</ft-button>
+        </ft-button>
-				<ft-button
+        <ft-button
-					class="action"
+          class="action"
-					backgroundColor="var(--accent-color-active)"
+          background-color="var(--accent-color-active)"
-					@click="copyYoutubeEmbed()"
+          @click="copyYoutubeEmbed()"
-				>
+        >
-					<font-awesome-icon icon="copy"/>
+          <font-awesome-icon icon="copy" />
-					Copy embed
+          Copy embed
-				</ft-button>
+        </ft-button>
-				<ft-button
+        <ft-button
-					class="action"
+          class="action"
-					backgroundColor="var(--accent-color-active)"
+          background-color="var(--accent-color-active)"
-					@click="openYoutubeEmbed()"
+          @click="openYoutubeEmbed()"
-				>
+        >
-					<font-awesome-icon icon="globe"/>
+          <font-awesome-icon icon="globe" />
-					Open embed
+          Open embed
-				</ft-button>
+        </ft-button>
-			</div>
+      </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">
+      <div class="buttons">
-				<ft-button
+        <ft-button
-					class="action"
+          class="action"
-					@click="copyInvidious()"
+          @click="copyInvidious()"
-				>
+        >
-					<font-awesome-icon icon="copy"/>
+          <font-awesome-icon icon="copy" />
-					Copy link
+          Copy link
-				</ft-button>
+        </ft-button>
-				<ft-button
+        <ft-button
-					class="action"
+          class="action"
-					@click="openInvidious()"
+          @click="openInvidious()"
-				>
+        >
-					<font-awesome-icon icon="globe"/>
+          <font-awesome-icon icon="globe" />
-					Open link
+          Open link
-				</ft-button>
+        </ft-button>
-				<ft-button
+        <ft-button
-					class="action"
+          class="action"
-					backgroundColor="var(--accent-color-active)"
+          background-color="var(--accent-color-active)"
-					@click="copyInvidiousEmbed()"
+          @click="copyInvidiousEmbed()"
-				>
+        >
-					<font-awesome-icon icon="copy"/>
+          <font-awesome-icon icon="copy" />
-					Copy embed
+          Copy embed
-				</ft-button>
+        </ft-button>
-				<ft-button
+        <ft-button
-					class="action"
+          class="action"
-					backgroundColor="var(--accent-color-active)"
+          background-color="var(--accent-color-active)"
-					@click="openInvidiousEmbed()"
+          @click="openInvidiousEmbed()"
-				>
+        >
-					<font-awesome-icon icon="globe"/>
+          <font-awesome-icon icon="globe" />
-					Open embed
+          Open embed
-				</ft-button>
+        </ft-button>
-			</div>
+      </div>
-		</div>
+    </div>
-	</ft-icon-button>
+  </ft-icon-button>
 </template>
 
 <script src="./ft-share-button.js" />

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

@@ -4,19 +4,19 @@
   >
     <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>
+      {{ label }} -
       <span>
-        {{ label }} -
+        {{ displayLabel }}
-        <span>
-          {{ displayLabel }}
-        </span>
       </span>
+    </span>
   </label>
 </template>
 

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

@@ -24,8 +24,8 @@
       />
     </div>
     <div
-     v-else-if="comments.length === 0"
+      v-else-if="comments.length === 0"
-     class="messageContainer liveChatMessage"
+      class="messageContainer liveChatMessage"
     >
       <p
         class="message"
@@ -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
-        :key="index"
+          v-for="(comment, index) in comments"
-        class="comment">
+          :key="index"
+          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,50 +135,48 @@
               </p>
             </div>
             <p
-              class="chatMessage"
               v-if="comment.message.length > 0"
+              class="chatMessage"
               v-html="comment.messageHtml"
-            >
+            />
-            </p>
           </div>
           <div
             v-else
           >
-          <img
+            <img
-            :src="comment.author.thumbnail.url"
+              :src="comment.author.thumbnail.url"
-            class="channelThumbnail"
+              class="channelThumbnail"
-          />
-          <p
-            class="chatContent"
-          >
-            <span
-              class="channelName"
-              :class="{
-                member: typeof (comment.author.badge) !== 'undefined' || comment.membership,
-                moderator: comment.isOwner,
-                owner: comment.author.name === channelName
-              }"
             >
-              {{ comment.author.name }}
+            <p
-            </span>
+              class="chatContent"
-            <span
-              v-if="typeof (comment.author.badge) !== 'undefined'"
-              class="badge"
             >
-              <img
+              <span
-                :src="comment.author.badge.thumbnail.url"
+                class="channelName"
-                :alt="comment.author.badge.thumbnail.alt"
+                :class="{
-                :title="comment.author.badge.thumbnail.alt"
+                  member: typeof (comment.author.badge) !== 'undefined' || comment.membership,
-                class="badgeImage"
+                  moderator: comment.isOwner,
+                  owner: comment.author.name === channelName
+                }"
+              >
+                {{ comment.author.name }}
+              </span>
+              <span
+                v-if="typeof (comment.author.badge) !== 'undefined'"
+                class="badge"
+              >
+                <img
+                  :src="comment.author.badge.thumbnail.url"
+                  :alt="comment.author.badge.thumbnail.alt"
+                  :title="comment.author.badge.thumbnail.alt"
+                  class="badgeImage"
+                >
+              </span>
+              <span
+                v-if="comment.message.length > 0"
+                class="chatMessage"
+                v-html="comment.messageHtml"
               />
-            </span>
+            </p>
-            <span
-              class="chatMessage"
-              v-if="comment.message.length > 0"
-              v-html="comment.messageHtml"
-            >
-            </span>
-          </p>
           </div>
         </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