use swiper.js instead of tinyslider (#4427)

package.json

@@ -65,6 +65,7 @@
     "marked": "^11.0.0",
     "path-browserify": "^1.0.1",
     "process": "^0.11.10",
+    "swiper": "^11.0.5",
     "video.js": "7.21.5",
     "videojs-contrib-quality-levels": "^3.0.0",
     "videojs-http-source-selector": "^1.1.6",
@@ -75,7 +76,6 @@
     "vue-i18n": "^8.28.2",
     "vue-observe-visibility": "^1.0.0",
     "vue-router": "^3.6.5",
-    "vue-tiny-slider": "^0.1.39",
     "vuex": "^3.6.2",
     "youtubei.js": "^7.0.0"
   },

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

@@ -4,20 +4,16 @@ import FtListPlaylist from '../ft-list-playlist/ft-list-playlist.vue'
 import FtCommunityPoll from '../ft-community-poll/ft-community-poll.vue'
 
 import autolinker from 'autolinker'
-import VueTinySlider from 'vue-tiny-slider'
 
 import { deepCopy, toLocalePublicationString } from '../../helpers/utils'
 import { youtubeImageUrlToInvidious } from '../../helpers/api/invidious'
 
-import 'tiny-slider/dist/tiny-slider.css'
-
 export default defineComponent({
   name: 'FtCommunityPost',
   components: {
     'ft-list-playlist': FtListPlaylist,
     'ft-list-video': FtListVideo,
-    'ft-community-poll': FtCommunityPoll,
+    'ft-community-poll': FtCommunityPoll
-    'tiny-slider': VueTinySlider
   },
   props: {
     data: {
@@ -44,26 +40,15 @@ export default defineComponent({
     }
   },
   computed: {
-    tinySliderOptions: function() {
-      return {
-        items: 1,
-        arrowKeys: false,
-        controls: false,
-        autoplay: false,
-        slideBy: 'page',
-        navPosition: 'bottom'
-      }
-    },
-
     listType: function () {
       return this.$store.getters.getListType
     }
   },
   created: function () {
-    this.parseVideoData()
+    this.parseCommunityData()
   },
   methods: {
-    parseVideoData: function () {
+    parseCommunityData: function () {
       if ('backstagePostThreadRenderer' in this.data) {
         this.postText = 'Shared post'
         this.type = 'text'

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

@@ -136,3 +136,7 @@
   min-block-size: 0 !important;
   padding-block-end: 20px;
 }
+
+.sliderContainer {
+  display: block;
+}

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

@@ -56,19 +56,30 @@
       class="postText"
       v-html="postText"
     />
-    <tiny-slider
+    <div class="sliderContainer">
-      v-if="type === 'multiImage' && postContent.content.length > 0"
+      <swiper-container
-      v-bind="tinySliderOptions"
+        v-if="type === 'multiImage' && postContent.content.length > 0"
-      class="slider"
+        slides-per-view="1"
-    >
+        navigation="true"
-      <img
+        pagination-clickable="true"
-        v-for="(img, index) in postContent.content"
+        pagination="true"
-        :key="index"
+        a11y="true"
-        :src="getBestQualityImage(img)"
+        class="slider"
-        class="communityImage tns-lazy-img"
-        alt=""
       >
-    </tiny-slider>
+        <swiper-slide
+          v-for="(img, index) in postContent.content"
+          :key="index"
+          lazy="true"
+        >
+          <img
+            :src="getBestQualityImage(img)"
+            class="communityImage"
+            alt=""
+            loading="lazy"
+          >
+        </swiper-slide>
+      </swiper-container>
+    </div>
     <div
       v-if="type === 'image' && postContent.content.length > 0"
     >
@@ -118,4 +129,3 @@
 
 <script src="./ft-community-post.js" />
 <style scoped src="./ft-community-post.scss" lang="scss" />
-<style src="./slider-style.css" lang="css" />

src/renderer/components/ft-community-post/slider-style.css

@@ -1,11 +0,0 @@
-.tns-nav .tns-nav-active {
-  background-color: #999;
-}
-
-.tns-nav button {
-  background-color: #ddd;
-  border-radius: 50%;
-  block-size: 1.5em;
-  padding: 0;
-  inline-size: 1.5em;
-}

src/renderer/main.js

@@ -5,6 +5,9 @@ import router from './router/index'
 import store from './store/index'
 import i18n from './i18n/index'
 import { library } from '@fortawesome/fontawesome-svg-core'
+
+import { register as registerSwiper } from 'swiper/element/bundle'
+
 // Please keep the list of constants sorted by name
 // to avoid code conflict and duplicate entries
 import {
@@ -145,6 +148,8 @@ library.add(
   faMonero
 )
 
+registerSwiper()
+
 Vue.component('FontAwesomeIcon', FontAwesomeIcon)
 
 /* eslint-disable-next-line no-new */

yarn.lock

@@ -5690,7 +5690,7 @@ lodash.uniq@^4.5.0:
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
   integrity sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ==
 
-lodash@^4.17.11, lodash@^4.17.15, lodash@^4.17.20, lodash@^4.17.21:
+lodash@^4.17.15, lodash@^4.17.20, lodash@^4.17.21:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
@@ -8038,6 +8038,11 @@ svgo@^3.0.2:
     csso "^5.0.5"
     picocolors "^1.0.0"
 
+swiper@^11.0.5:
+  version "11.0.5"
+  resolved "https://registry.yarnpkg.com/swiper/-/swiper-11.0.5.tgz#6ed1ad06e6906ba42fd4b93d4988f0626a49046e"
+  integrity sha512-rhCwupqSyRnWrtNzWzemnBLMoyYuoDgGgspAm/8iBD3jCvAWycPLH4Z3TB0O5520DHLzMx94yUMH/B9Efpa48w==
+
 synckit@^0.8.5:
   version "0.8.5"
   resolved "https://registry.yarnpkg.com/synckit/-/synckit-0.8.5.tgz#b7f4358f9bb559437f9f167eb6bc46b3c9818fa3"
@@ -8123,11 +8128,6 @@ thunky@^1.0.2:
   resolved "https://registry.yarnpkg.com/thunky/-/thunky-1.1.0.tgz#5abaf714a9405db0504732bbccd2cedd9ef9537d"
   integrity sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==
 
-tiny-slider@^2.9.2:
-  version "2.9.4"
-  resolved "https://registry.yarnpkg.com/tiny-slider/-/tiny-slider-2.9.4.tgz#dd5cbf3065f1688ade8383ea6342aefcba22ccc4"
-  integrity sha512-LAs2kldWcY+BqCKw4kxd4CMx2RhWrHyEePEsymlOIISTlOVkjfK40sSD7ay73eKXBLg/UkluAZpcfCstimHXew==
-
 titleize@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/titleize/-/titleize-3.0.0.tgz#71c12eb7fdd2558aa8a44b0be83b8a76694acd53"
@@ -8619,14 +8619,6 @@ vue-template-es2015-compiler@^1.9.0:
   resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825"
   integrity sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==
 
-vue-tiny-slider@^0.1.39:
-  version "0.1.39"
-  resolved "https://registry.yarnpkg.com/vue-tiny-slider/-/vue-tiny-slider-0.1.39.tgz#9301eada256fa12725b050767e1e67a287b3e3ef"
-  integrity sha512-dLOuMI6YyIBabXPZTQ0LL2jhOqZuwsCD7ztPEoE1ejFQ9GNxyRxwkRsIwUtVnq5SCTzQAhCYlgoibyMGoDHReA==
-  dependencies:
-    lodash "^4.17.11"
-    tiny-slider "^2.9.2"
-
 vue@^2.7.15:
   version "2.7.15"
   resolved "https://registry.yarnpkg.com/vue/-/vue-2.7.15.tgz#94cd34e6e9f22cd2d35a02143f96a5beac1c1f54"