From ca34f8e0e81f3970b2a95213409e3d433c9485f5 Mon Sep 17 00:00:00 2001
From: Alejandro Akbal <37181533+VoidlessSeven7@users.noreply.github.com>
Date: Mon, 22 Feb 2021 13:28:17 +0100
Subject: [PATCH] feat!: merge all post components into one

---
 components/pages/posts/content/Post.vue       | 326 +++++++++++++++++-
 components/pages/posts/content/PostMedia.vue  | 240 -------------
 components/pages/posts/content/PostSource.vue |  58 ----
 components/pages/posts/content/PostTags.vue   |  66 ----
 4 files changed, 314 insertions(+), 376 deletions(-)
 delete mode 100644 components/pages/posts/content/PostMedia.vue
 delete mode 100644 components/pages/posts/content/PostSource.vue
 delete mode 100644 components/pages/posts/content/PostTags.vue

diff --git a/components/pages/posts/content/Post.vue b/components/pages/posts/content/Post.vue
index 82c17ef8..d038f86b 100644
--- a/components/pages/posts/content/Post.vue
+++ b/components/pages/posts/content/Post.vue
@@ -1,27 +1,113 @@
 <template>
   <figure class="text-center material-container text-default-text">
-    <post-media :post="post" @click.native="isActive = !isActive" />
+    <!-- Media -->
+    <div @click="isActive = !isActive">
+      <template v-if="error.show">
+        <Error
+          :show-action="false"
+          :render-borders="false"
+          :error-data="error.message"
+        />
+      </template>
+
+      <template v-else-if="isImage">
+        <img
+          :src="mediaResolutionChooser.url"
+          loading="'lazy'"
+          :class="{
+            'opacity-100': media.hasLoaded,
+          }"
+          :alt="'Image ' + post.id"
+          class="w-full h-auto opacity-0 post-animation"
+          :height="mediaResolutionChooser.height"
+          :width="mediaResolutionChooser.width"
+          referrerpolicy="no-referrer"
+          decoding="async"
+          @load="media.hasLoaded = true"
+          @error="retryToLoadManager"
+        />
+      </template>
+
+      <template v-else-if="isVideo">
+        <!-- TODO: Show button to show tags -->
+
+        <video
+          :alt="'Video ' + post.id"
+          class="w-full h-auto"
+          preload="none"
+          :poster="post.preview_file.url"
+          controls
+          loop
+          playsinline
+        >
+          <source
+            :src="mediaResolutionChooser.url"
+            @error="retryToLoadManager"
+          />
+          Your browser does not support HTML5 video.
+        </video>
+      </template>
+    </div>
 
     <figcaption class="flex flex-wrap overflow-hidden text-sm">
-      <post-tags
-        v-if="post.tags.length"
-        :tags="post.tags"
-        :is-active="isActive"
-      />
+      <template v-if="post.tags.length">
+        <div class="w-full overflow-hidden">
+          <TransitionCollapse>
+            <div v-if="isActive">
+              <!-- Workaround for this not jumping is having a div before -->
+              <div class="min-w-full tag-container">
+                <button
+                  v-for="tag in post.tags"
+                  :key="tag"
+                  type="button"
+                  class="tag color-util"
+                  @click="fetchSpecificTag(tag)"
+                  v-text="tag"
+                />
+              </div>
+            </div>
+          </TransitionCollapse>
+        </div>
+      </template>
+
+      <template v-if="post.source.length">
+        <div class="w-full p-1 text-center">
+          <template v-if="isUrl">
+            <!-- If text is an Url then make it linkable -->
+            <a
+              :href="post.source[0]"
+              class="inline-flex"
+              rel="noopener"
+              target="_blank"
+            >
+              <p class="color-util">
+                {{ sourceText }}
+              </p>
+
+              <!-- Icon -->
+              <ExternalLinkIcon class="w-5 h-5 ml-2 icon text-default" />
+            </a>
+          </template>
 
-      <post-source v-if="post.source.length" :source="post.source" />
+          <template v-else>
+            <!-- If the text is not a url then just show the text -->
+            <p title="Source">{{ sourceText }}</p>
+          </template>
+        </div>
+      </template>
     </figcaption>
   </figure>
 </template>
 
 <script>
-// Components
-import PostMedia from './PostMedia.vue'
-import PostTags from './PostTags.vue'
-import PostSource from './PostSource.vue'
+import { mapGetters, mapActions } from 'vuex'
+import { ExternalLinkIcon } from 'vue-feather-icons'
+
+import TransitionCollapse from '~/components/utils/TransitionCollapse.vue'
+import Error from '~/components/utils/Error'
 
 export default {
-  components: { PostMedia, PostTags, PostSource },
+  components: { Error, TransitionCollapse, ExternalLinkIcon },
 
   props: {
     post: {
@@ -35,7 +121,223 @@ export default {
   data() {
     return {
       isActive: false,
+
+      media: {
+        hasLoaded: false,
+
+        retryLogic: {
+          count: 0,
+
+          tried: {
+            extraSlash: false,
+            proxy: false,
+            proxyWithExtraSlash: false,
+          },
+        },
+      },
+
+      error: {
+        show: false,
+        message: 'An error ocurred.',
+      },
+    }
+  },
+
+  computed: {
+    ...mapGetters('user', ['getUserSettings']),
+
+    // #region Post media
+    isImage() {
+      return this.post.media_type === 'image'
+    },
+
+    isVideo() {
+      return this.post.media_type === 'video'
+    },
+
+    mediaResolutionChooser() {
+      // Always return high res file if its a video
+      if (this.isVideo && this.post.high_res_file) {
+        return this.post.high_res_file
+      }
+
+      // Return full image if its setting is enabled OR if low resolution file doesn't exist
+      if (
+        !this.post.low_res_file.url ||
+        this.getUserSettings.fullSizeImages.value
+      ) {
+        return this.post.high_res_file
+      }
+
+      // Return low res file
+      return this.post.low_res_file
+    },
+    // #endregion
+
+    // #region Post media
+    isUrl() {
+      return this.post.source[0].startsWith('http', 'www')
+    },
+
+    sourceText() {
+      if (this.isUrl) {
+        return new URL(this.post.source[0]).hostname
+      }
+
+      // Return the entire source as it's text
+      return this.post.source[0]
+    },
+    // #endregion
+  },
+
+  mounted() {
+    if (!this.isVideo && !this.isImage) {
+      const message = 'Unknown media type.'
+
+      console.warn(message)
+
+      this.error.message = message
+      this.error.show = true
     }
   },
+
+  methods: {
+    ...mapActions('booru', ['tagsManager']),
+
+    // #region Post media
+    retryToLoadManager(event) {
+      // console.log('Media source: ', event.target.src)
+
+      if (this.showError) {
+        const message = 'An error is set.'
+
+        console.warn(message)
+        return
+      }
+
+      if (this.$nuxt.isOffline) {
+        const message = 'Browser is offline.'
+
+        console.warn(message)
+
+        this.error.message = message
+        this.error.show = true
+        return
+      }
+
+      // Add extra slash to URL
+      if (!this.media.retryLogic.tried.extraSlash) {
+        console.info('Adding extra slash...')
+
+        event.target.src = this.addExtraSlashToURL(
+          this.mediaResolutionChooser.url
+        )
+
+        if (this.isVideo) {
+          console.info('Reloading data and playing video')
+          event.target.parentElement.load()
+          event.target.parentElement.play()
+        }
+
+        this.media.retryLogic.tried.extraSlash = true
+      }
+
+      // Proxy URL
+      else if (!this.media.retryLogic.tried.proxy) {
+        console.info('Proxying media...')
+
+        event.target.src = this.addProxyToURL(this.mediaResolutionChooser.url)
+
+        if (this.isVideo) {
+          console.info('Reloading data and playing video')
+          event.target.parentElement.load()
+          event.target.parentElement.play()
+        }
+
+        this.media.retryLogic.tried.proxy = true
+      }
+
+      // Proxy URL with extra slash
+      else if (!this.media.retryLogic.tried.proxyWithExtraSlash) {
+        console.info('Proxying media with extra slash...')
+
+        event.target.src = this.addProxyToURL(
+          this.addExtraSlashToURL(this.mediaResolutionChooser.url)
+        )
+
+        if (this.isVideo) {
+          console.info('Reloading data and playing video')
+          event.target.parentElement.load()
+          event.target.parentElement.play()
+        }
+
+        this.media.retryLogic.tried.proxyWithExtraSlash = true
+      }
+
+      // Retry to load it
+      else if (
+        this.media.retryLogic.count < this.getUserSettings.imgRetry.value
+      ) {
+        console.info(
+          `Retry number ${this.media.retryLogic.count} to load the media`
+        )
+
+        event.target.src = ''
+
+        event.target.src = this.mediaResolutionChooser.url
+
+        if (this.isVideo) {
+          console.info('Reloading data and playing video')
+          event.target.parentElement.load()
+          event.target.parentElement.play()
+        }
+
+        this.media.retryLogic.count++
+      }
+
+      // At last, show error
+      else {
+        const message = 'Can not load media.'
+
+        console.warn(message)
+
+        this.error.message = message
+        this.error.show = true
+      }
+    },
+
+    addProxyToURL(url) {
+      return this.$config.PROXY_URL + url
+    },
+
+    addExtraSlashToURL(url) {
+      const currentURL = new URL(url)
+
+      /* console.log({
+        original: currentURL.toString(),
+        modified: currentURLWithExtraSlash,
+      }) */
+
+      return currentURL
+        .toString()
+        .replace(currentURL.hostname, currentURL.hostname + '/')
+    },
+    // #endregion
+
+    // #region Post tags
+    fetchSpecificTag(tag) {
+      this.tagsManager({
+        operation: 'set',
+        value: [tag],
+      })
+    },
+    // #endregion
+  },
 }
 </script>
+
+<style lang="postcss">
+.post-animation {
+  transition: opacity 0.75s;
+}
+</style>
diff --git a/components/pages/posts/content/PostMedia.vue b/components/pages/posts/content/PostMedia.vue
deleted file mode 100644
index 30373142..00000000
--- a/components/pages/posts/content/PostMedia.vue
+++ /dev/null
@@ -1,240 +0,0 @@
-<template>
-  <div>
-    <template v-if="showError">
-      <Error
-        :show-action="false"
-        :render-borders="false"
-        error-data="Media couln't be loaded"
-      />
-    </template>
-
-    <template v-else-if="isImage">
-      <!-- if media is an Image -->
-      <img
-        :src="mediaResolutionChooser.url"
-        :loading="getUserSettings.lazyLoading.value ? 'lazy' : 'auto'"
-        :class="{
-          'post-animation opacity-0': getUserSettings.animations.value,
-          'opacity-100': hasMediaLoaded && getUserSettings.animations.value,
-        }"
-        :alt="'Image ' + post.id"
-        class="w-full h-auto"
-        :height="mediaResolutionChooser.height"
-        :width="mediaResolutionChooser.width"
-        referrerpolicy="no-referrer"
-        decoding="async"
-        @load="hasMediaLoaded = true"
-        @error="retryToLoadManager($event)"
-      />
-    </template>
-
-    <template v-else-if="isVideo">
-      <!-- if its a Video -->
-      <video
-        :controls="getUserSettings.videoControls.value"
-        :alt="'Video ' + post.id"
-        class="w-full h-auto"
-        preload="none"
-        :poster="post.preview_file.url"
-        loop
-        playsinline
-      >
-        <source
-          :src="mediaResolutionChooser.url"
-          @error="retryToLoadManager($event)"
-        />
-        Your browser doesnt support HTML5 video.
-      </video>
-    </template>
-
-    <template v-else>
-      <Error
-        :show-action="false"
-        :render-borders="false"
-        error-data="Unknown media type"
-      />
-    </template>
-  </div>
-</template>
-
-<script>
-import { mapGetters } from 'vuex'
-
-import Error from '~/components/utils/Error'
-
-export default {
-  components: { Error },
-
-  props: {
-    post: {
-      type: Object,
-      default() {
-        return undefined
-      },
-    },
-  },
-
-  data() {
-    return {
-      showError: false,
-
-      hasMediaLoaded: false,
-
-      retryLogic: {
-        count: 0,
-
-        tried: {
-          proxy: false,
-          extraSlash: false,
-          proxyWithExtraSlash: false,
-        },
-      },
-    }
-  },
-
-  computed: {
-    ...mapGetters('user', ['getUserSettings']),
-    ...mapGetters(['getCORSProxyURL']),
-
-    isImage() {
-      return this.post.media_type === 'image'
-    },
-
-    isVideo() {
-      return this.post.media_type === 'video'
-    },
-
-    mediaResolutionChooser() {
-      // Always return high res file if its a video
-      if (this.isVideo) return this.post.high_res_file
-
-      // Return full image if its setting is enabled OR if low resolution file doesnt exist
-      if (
-        this.getUserSettings.fullSizeImages.value ||
-        !this.post.low_res_file.url
-      ) {
-        return this.post.high_res_file
-      }
-
-      // Return low res file
-      else {
-        return this.post.low_res_file
-      }
-    },
-  },
-
-  methods: {
-    retryToLoadManager(event) {
-      // console.log('Media source: ', event.target.src)
-
-      if (this.showError) {
-        console.debug('Error set, dont try to load image anymore')
-        return
-      }
-
-      if (this.$nuxt.isOffline) {
-        console.debug('Browser offline, dont try to load image anymore')
-        this.showError = true
-        return
-      }
-
-      // Proxy URL
-      if (!this.retryLogic.tried.proxy) {
-        console.debug('Proxying media')
-
-        event.target.src = this.addProxyToURL(this.mediaResolutionChooser.url)
-
-        if (this.isVideo) {
-          console.debug('Reloading data and playing video')
-          this.reloadVideoElement(event.target.parentElement)
-        }
-
-        this.retryLogic.tried.proxy = true
-      }
-
-      // Add extra slash to URL
-      else if (!this.retryLogic.tried.extraSlash) {
-        console.debug('Adding extra slash')
-
-        event.target.src = this.addExtraSlashToURL(
-          this.mediaResolutionChooser.url
-        )
-
-        if (this.isVideo) {
-          console.debug('Reloading data and playing video')
-          this.reloadVideoElement(event.target.parentElement)
-        }
-
-        this.retryLogic.tried.extraSlash = true
-      }
-
-      // Proxy URL with extra slash
-      else if (!this.retryLogic.tried.proxyWithExtraSlash) {
-        console.debug('Proxying media with extra slash')
-
-        event.target.src = this.addProxyToURL(
-          this.addExtraSlashToURL(this.mediaResolutionChooser.url)
-        )
-
-        if (this.isVideo) {
-          console.debug('Reloading data and playing video')
-          this.reloadVideoElement(event.target.parentElement)
-        }
-
-        this.retryLogic.tried.proxyWithExtraSlash = true
-      }
-
-      // Retry to load it
-      else if (this.retryLogic.count < this.getUserSettings.imgRetry.value) {
-        console.debug(`Retry ${this.retryLogic.count} to load the media`)
-
-        event.target.src = ''
-
-        event.target.src = this.mediaResolutionChooser.url
-
-        if (this.isVideo) {
-          console.debug('Reloading data and playing video')
-          this.reloadVideoElement(event.target.parentElement)
-        }
-
-        this.retryLogic.count++
-      }
-
-      // At last, show error
-      else {
-        console.debug("Can't load media")
-
-        this.showError = true
-      }
-    },
-
-    reloadVideoElement(videoElement) {
-      videoElement.load()
-      videoElement.play()
-    },
-
-    addProxyToURL(url) {
-      return this.getCORSProxyURL + '?q=' + url
-    },
-
-    addExtraSlashToURL(url) {
-      const currentURL = new URL(url)
-
-      /* console.log({
-        original: currentURL.toString(),
-        modified: currentURLWithExtraSlash,
-      }) */
-
-      return currentURL
-        .toString()
-        .replace(currentURL.hostname, currentURL.hostname + '/')
-    },
-  },
-}
-</script>
-
-<style lang="postcss">
-.post-animation {
-  transition: opacity 0.75s;
-}
-</style>
diff --git a/components/pages/posts/content/PostSource.vue b/components/pages/posts/content/PostSource.vue
deleted file mode 100644
index f463838b..00000000
--- a/components/pages/posts/content/PostSource.vue
+++ /dev/null
@@ -1,58 +0,0 @@
-<template>
-  <div class="w-full p-1 text-center">
-    <template v-if="isUrl">
-      <!-- If text is an Url then make it linkable -->
-      <a
-        :href="source[0]"
-        class="inline-flex"
-        rel="noopener nofollow"
-        target="_blank"
-      >
-        <p class="color-util">
-          {{ sourceText }}
-        </p>
-
-        <!-- Icon -->
-        <ExternalLinkIcon class="w-5 h-5 ml-2 icon text-default" />
-      </a>
-    </template>
-
-    <template v-else>
-      <!-- If the text is not a url then just show the text -->
-      <p title="Source">{{ sourceText }}</p>
-    </template>
-  </div>
-</template>
-
-<script>
-import { ExternalLinkIcon } from 'vue-feather-icons'
-
-export default {
-  components: { ExternalLinkIcon },
-
-  props: {
-    source: {
-      type: Array,
-      default: () => [],
-    },
-  },
-
-  computed: {
-    isUrl() {
-      return this.source[0].startsWith('http', 'www')
-    },
-
-    sourceText() {
-      // Return only the domain of the Url
-      if (this.isUrl) {
-        return new URL(this.source[0]).hostname
-      }
-
-      // Return the entire source as it's text
-      else {
-        return this.source[0]
-      }
-    },
-  },
-}
-</script>
diff --git a/components/pages/posts/content/PostTags.vue b/components/pages/posts/content/PostTags.vue
deleted file mode 100644
index f309c9c1..00000000
--- a/components/pages/posts/content/PostTags.vue
+++ /dev/null
@@ -1,66 +0,0 @@
-<template>
-  <div class="w-full overflow-hidden">
-    <TransitionCollapse>
-      <div v-if="isActive">
-        <!-- Workaround for this not jumping is having a div before -->
-        <div class="min-w-full tag-container">
-          <button
-            v-for="tag in tags"
-            :key="tag"
-            type="button"
-            class="tag color-util"
-            @click="fetchSpecificTag(tag)"
-            v-text="tag"
-          />
-        </div>
-      </div>
-    </TransitionCollapse>
-  </div>
-</template>
-
-<script>
-import { mapActions } from 'vuex'
-
-// Components
-import TransitionCollapse from '~/components/utils/TransitionCollapse.vue'
-
-// JS
-import { scrollToTop } from '~/assets/js/scrollUtils.js'
-
-export default {
-  components: { TransitionCollapse },
-
-  props: {
-    tags: {
-      type: Array,
-      default: () => [],
-    },
-
-    isActive: {
-      type: Boolean,
-      default: false,
-    },
-  },
-
-  methods: {
-    ...mapActions('booru', ['addedTagsManager', 'pidManager', 'fetchPosts']),
-
-    fetchSpecificTag(tag) {
-      this.pidManager({ operation: 'reset' })
-
-      this.addedTagsManager({
-        operation: 'reset',
-      })
-
-      this.addedTagsManager({
-        operation: 'add',
-        value: tag,
-      })
-
-      scrollToTop()
-
-      this.fetchPosts()
-    },
-  },
-}
-</script>