Improve performance of list elements and icon buttons (#3355)

Co-authored-by: PikachuEXE <pikachuexe@gmail.com>

src/renderer/components/ft-community-post/ft-community-post.js

@@ -64,7 +64,7 @@ export default defineComponent({
       return this.$store.getters.getListType
     }
   },
-  mounted: function () {
+  created: function () {
     this.parseVideoData()
   },
   methods: {

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

@@ -74,8 +74,10 @@ export default defineComponent({
       window.addEventListener('resize', this.handleResize)
     }
   },
-  destroyed: function () {
-    window.removeEventListener('resize', this.handleResize)
+  beforeDestroy: function () {
+    if (this.dropdownModalOnMobile) {
+      window.removeEventListener('resize', this.handleResize)
+    }
   },
   methods: {
     sanitizeForHtmlId,

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

@@ -19,76 +19,78 @@
       @keydown.enter.prevent="handleIconClick"
       @keydown.space.prevent="handleIconClick"
     />
-    <ft-prompt
-      v-if="useModal"
-      v-show="dropdownShown"
-      :autosize="true"
-      :label="sanitizeForHtmlId(`iconButtonPrompt-${title}`)"
-      @click="dropdownShown = false"
+    <template
+      v-if="dropdownShown"
     >
-      <slot>
-        <ul
-          v-if="dropdownOptions.length > 0"
-          class="list"
-          role="listbox"
-          :aria-expanded="dropdownShown"
-        >
-          <li
-            v-for="(option, index) in dropdownOptions"
-            :id="sanitizeForHtmlId(title + '-' + index)"
-            :key="index"
-            role="option"
-            aria-selected="false"
-            tabindex="-1"
-            :class="option.type === 'divider' ? 'listItemDivider' : 'listItem'"
-            @click="handleDropdownClick({url: option.value, index: index}, $event)"
-            @keydown.enter="handleDropdownClick({url: option.value, index: index}, $event)"
-            @keydown.space="handleDropdownClick({url: option.value, index: index}, $event)"
+      <ft-prompt
+        v-if="useModal"
+        :autosize="true"
+        :label="sanitizeForHtmlId(`iconButtonPrompt-${title}`)"
+        @click="dropdownShown = false"
+      >
+        <slot>
+          <ul
+            v-if="dropdownOptions.length > 0"
+            class="list"
+            role="listbox"
+            :aria-expanded="dropdownShown"
           >
-            {{ option.type === 'divider' ? '' : option.label }}
-          </li>
-        </ul>
-      </slot>
-    </ft-prompt>
-    <div
-      v-else
-      v-show="dropdownShown"
-      ref="dropdown"
-      tabindex="-1"
-      class="iconDropdown"
-      :class="{
-        left: dropdownPositionX === 'left',
-        right: dropdownPositionX === 'right',
-        center: dropdownPositionX === 'center',
-        bottom: dropdownPositionY === 'bottom',
-        top: dropdownPositionY === 'top'
-      }"
-      @focusout="handleDropdownFocusOut"
-    >
-      <slot>
-        <ul
-          v-if="dropdownOptions.length > 0"
-          class="list"
-          role="listbox"
-          :aria-expanded="dropdownShown"
-        >
-          <li
-            v-for="(option, index) in dropdownOptions"
-            :id="sanitizeForHtmlId(title + '-' + index)"
-            :key="index"
-            role="option"
-            aria-selected="false"
-            tabindex="-1"
-            :class="option.type === 'divider' ? 'listItemDivider' : 'listItem'"
-            @click="handleDropdownClick({url: option.value, index: index}, $event)"
-            @keydown.enter="handleDropdownClick({url: option.value, index: index}, $event)"
-            @keydown.space="handleDropdownClick({url: option.value, index: index}, $event)"
+            <li
+              v-for="(option, index) in dropdownOptions"
+              :id="sanitizeForHtmlId(title + '-' + index)"
+              :key="index"
+              role="option"
+              aria-selected="false"
+              tabindex="-1"
+              :class="option.type === 'divider' ? 'listItemDivider' : 'listItem'"
+              @click="handleDropdownClick({url: option.value, index: index})"
+              @keydown.enter="handleDropdownClick({url: option.value, index: index})"
+              @keydown.space="handleDropdownClick({url: option.value, index: index})"
+            >
+              {{ option.type === 'divider' ? '' : option.label }}
+            </li>
+          </ul>
+        </slot>
+      </ft-prompt>
+      <div
+        v-else
+        ref="dropdown"
+        tabindex="-1"
+        class="iconDropdown"
+        :class="{
+          left: dropdownPositionX === 'left',
+          right: dropdownPositionX === 'right',
+          center: dropdownPositionX === 'center',
+          bottom: dropdownPositionY === 'bottom',
+          top: dropdownPositionY === 'top'
+        }"
+        @focusout="handleDropdownFocusOut"
+      >
+        <slot>
+          <ul
+            v-if="dropdownOptions.length > 0"
+            class="list"
+            role="listbox"
+            :aria-expanded="dropdownShown"
           >
-            {{ option.type === 'divider' ? '' : option.label }}
-          </li>
-        </ul>
-      </slot>
-    </div>
+            <li
+              v-for="(option, index) in dropdownOptions"
+              :id="sanitizeForHtmlId(title + '-' + index)"
+              :key="index"
+              role="option"
+              aria-selected="false"
+              tabindex="-1"
+              :class="option.type === 'divider' ? 'listItemDivider' : 'listItem'"
+              @click="handleDropdownClick({url: option.value, index: index}, $event)"
+              @keydown.enter="handleDropdownClick({url: option.value, index: index}, $event)"
+              @keydown.space="handleDropdownClick({url: option.value, index: index}, $event)"
+            >
+              {{ option.type === 'divider' ? '' : option.label }}
+            </li>
+          </ul>
+        </slot>
+      </div>
+    </template>
   </div>
 </template>
 

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

@@ -37,7 +37,7 @@ export default defineComponent({
       return this.$store.getters.getHideChannelSubscriptions
     }
   },
-  mounted: function () {
+  created: function () {
     if (this.data.dataSource === 'local') {
       this.parseLocalData()
     } else {

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

@@ -45,7 +45,7 @@ export default defineComponent({
       return this.$store.getters.getDefaultPlayback
     }
   },
-  mounted: function () {
+  created: function () {
     if (this.data.dataSource === 'local') {
       this.parseLocalData()
     } else {

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

@@ -99,7 +99,7 @@ export default defineComponent({
     inHistory: function () {
       // When in the history page, showing relative dates isn't very useful.
       // We want to show the exact date instead
-      return this.$router.currentRoute.name === 'history'
+      return this.$route.name === 'history'
     },
 
     invidiousUrl: function () {
@@ -152,15 +152,14 @@ export default defineComponent({
     },
 
     dropdownOptions: function () {
-      const options = []
-      options.push(
+      const options = [
         {
           label: this.watched
             ? this.$t('Video.Remove From History')
             : this.$t('Video.Mark As Watched'),
           value: 'history'
         }
-      )
+      ]
       if (!this.hideSharingActions) {
         options.push(
           {
@@ -295,9 +294,9 @@ export default defineComponent({
 
     displayTitle: function () {
       if (this.showDistractionFreeTitles) {
-        return toDistractionFreeTitle(this.data.title)
+        return toDistractionFreeTitle(this.title)
       } else {
-        return this.data.title
+        return this.title
       }
     },
 
@@ -332,7 +331,7 @@ export default defineComponent({
       this.checkIfWatched()
     },
   },
-  mounted: function () {
+  created: function () {
     this.parseVideoData()
     this.checkIfWatched()
   },