Merge pull request #252 from lahmacunradio/#174-new-api

#174 new api

app/components/BottomArcsiPlayer.vue

@@ -55,16 +55,14 @@ export default {
       isArcsiPlaying: 'getArcsiPlayState'
 
     }),
-    arcsiList () {
-      return [...this.$store.getters.returnArcsiShows]
-    },
     arcsiAudio () {
-      if (!this.arcsiEpisode?.archive_lahmastore_canonical_url || !this.arcsiList) {
+      if (!this.arcsiEpisode?.play_file_name) {
         return false
       }
-      const showID = this.arcsiEpisode?.shows?.[0].id
-      const showObject = this.arcsiList?.find(show => show.id === showID)
-      return `${mediaServerURL}${showObject?.archive_lahmastore_base_url}/${this.arcsiEpisode?.archive_lahmastore_canonical_url}`
+      const showSlug = this.arcsiEpisode.shows?.[0].archive_lahmastore_base_url
+      const episodeNumber = this.arcsiEpisode.number
+      const fileName = this.arcsiEpisode.play_file_name
+      return `${mediaServerURL}${showSlug}/${episodeNumber}/${fileName}`
     }
   },
   methods: {

app/components/HeaderBlock.vue

@@ -23,7 +23,7 @@
 </template>
 
 <script>
-import { streamServer, arcsiServerURL, rareShowsURL, customScheduleURL } from '~/constants'
+import { streamServer, rareShowsURL, customScheduleURL, arcsiShowsBaseURL } from '~/constants'
 
 export default {
   data () {
@@ -55,27 +55,27 @@ export default {
 
       // refresh arcsiShows every 10 minutes
       if (minutes % 10 === 0) {
-        this.refreshArcsiShows()
+        this.refreshAllShows()
       }
 
-      // refresh arcsiShows every 3 minutes
+      // refresh rareShows every 3 minutes
       if (minutes % 3 === 0) {
         this.refreshRareShows()
       }
 
-      // refresh arcsiShows every 4 minutes
+      // refresh customSchedule every 4 minutes
       if (minutes % 4 === 0) {
         this.refreshCustomSchedule()
       }
     },
-    async refreshArcsiShows () {
-      await this.$axios.get(arcsiServerURL)
+    async refreshAllShows () {
+      await this.$axios.get(arcsiShowsBaseURL + '/all_without_items')
         .then((res) => {
-          this.$store.commit('refreshArcsiShows', res.data)
+          this.$store.commit('refreshAllShowsList', res.data)
         })
         .catch((e) => {
           this.$sentry.captureException(e)
-          this.error({ statusCode: 404, message: 'Latest news not found' })
+          this.error({ statusCode: 404, message: 'All shows endpoint not found' })
         })
     },
     async refreshRareShows () {
@@ -95,7 +95,7 @@ export default {
         })
         .catch((e) => {
           this.$sentry.captureException(e)
-          this.error({ statusCode: 404, message: 'Rare Shows not found' })
+          this.error({ statusCode: 404, message: 'Custom schedule not found' })
         })
     }
 

app/components/Pagination.vue

@@ -3,7 +3,7 @@
     <div v-if="totalCount > itemsCount && !isLoading" class="p-4 text-center load-more-container">
       <a href="#" @click.prevent="onClick">
         <div class="load-more">
-            LOAD MORE
+          LOAD MORE
         </div>
       </a>
     </div>
@@ -29,11 +29,11 @@ export default {
     totalCount: {
       type: Number,
       required: true
-    },
+    }
   },
   methods: {
-    async onClick() {
-      this.$emit('click');
+    async onClick () {
+      this.$emit('click')
     }
   }
 }

app/components/TagBlock.vue

@@ -10,8 +10,8 @@ export default {
     tag: {
       type: Object,
       required: true
-    },
-  },
+    }
+  }
 }
 </script>
 

app/components/TagList.vue

@@ -1,7 +1,8 @@
 <template>
   <div class="tag-list">
     <TagBlock
-      v-for="(tag, index) in tags" :key="`${tag.id}-${index}`"
+      v-for="(tag, index) in tags"
+      :key="`${tag.id}-${index}`"
       :tag="tag"
       class="tag"
     />
@@ -15,8 +16,8 @@ export default {
     tags: {
       type: Array,
       required: true
-    },
-  },
+    }
+  }
 }
 </script>
 

app/components/arcsi/EpisodeBlock.vue

@@ -1,14 +1,14 @@
 <template>
   <div v-if="episode" class="latest-arcsi-blokk">
-    <NuxtLink :to="`/shows/${showslug}/${episode.id}`" class="relative block w-full mb-2">
+    <NuxtLink :to="`/shows/${showslug}/${episodeLink}`" class="relative block w-full mb-2">
       <div class="absolute bottom-0 z-10 w-full p-2 text-center text-white bg-black">
         <b>{{ episode.shows[0].name }}</b>
       </div>
       <div class="arcsi-img aspect-ratio-1/1">
         <img class="block" :src="episodeImage" :alt="episode.name">
       </div>
     </NuxtLink>
-    <NuxtLink :to="`/shows/${showslug}/${episode.id}`">
+    <NuxtLink :to="`/shows/${showslug}/${episodeLink}`">
       <h5>{{ episode.name }}</h5>
     </NuxtLink>
     <NuxtLink :to="`/shows/${showslug}`">
@@ -51,6 +51,12 @@ export default {
   computed: {
     episodeImage () {
       return this.episode.image_url.length > 0 ? this.episode.image_url : this.arcsilist.find(item => item.id === this.episode.shows[0].id).cover_image_url
+    },
+    episodeLink () {
+      if (!this.episode.name_slug) {
+        return false
+      }
+      return this.episode.name_slug
     }
   },
   created () {

app/components/arcsi/Latest.vue

@@ -58,7 +58,7 @@ export default {
   data () {
     return {
       startIndex: 0,
-      numberOfEpisodes: 9,
+      numberOfEpisodes: 12,
       visibleEpisodes: 3,
       sliderPosition: 0,
       episodeWidth: 300,
@@ -67,7 +67,7 @@ export default {
     }
   },
   async fetch () {
-    this.arcsiEpisodes = await this.$axios.get(arcsiItemBaseURL + '/all')
+    this.arcsiEpisodes = await this.$axios.get(`${arcsiItemBaseURL}/latest?size=${this.startNumberofEpisodes}&page=${this.startIndex}`)
       .then(res => res.data)
       .catch((error) => {
         this.$sentry.captureException(new Error('Arcsi latest not found ', error))
@@ -91,6 +91,7 @@ export default {
         return showslist
           .filter(item => item.play_date < this.getToday)
           .filter(item => item.archived === true)
+          .filter(item => item.name_slug !== null)
           .sort((a, b) => new Date(b.play_date) - new Date(a.play_date))
           .slice(this.startIndex, this.numberOfEpisodes)
       }
@@ -105,6 +106,7 @@ export default {
       window.addEventListener('resize', this.changeBreakpoint, { passive: true })
       setTimeout(() => {
         this.changeBreakpoint()
+        this.numberOfEpisodes = this.arcsiEpisodesListSortedLatest?.length
       }, 3000)
     }
   },

app/components/arcsi/LatestBlock.vue

@@ -1,11 +1,11 @@
 <template>
   <div v-if="episode" class="latest-arcsi-blokk">
-    <NuxtLink :to="`/shows/${showslug}/${episode.id}`">
+    <NuxtLink :to="`/shows/${showslug}/${episodeLink}`">
       <div class="mb-4 arcsi-img aspect-ratio-1/1">
         <img class="block" :src="episodeImage">
       </div>
     </NuxtLink>
-    <NuxtLink :to="`/shows/${showslug}/${episode.id}`">
+    <NuxtLink :to="`/shows/${showslug}/${episodeLink}`">
       <h5>{{ episode.name }}</h5>
     </NuxtLink>
     <NuxtLink :to="`/shows/${showslug}`">
@@ -48,6 +48,12 @@ export default {
   computed: {
     episodeImage () {
       return this.episode.image_url.length > 0 ? this.episode.image_url : this.arcsilist.find(item => item.id === this.episode.shows[0].id).cover_image_url
+    },
+    episodeLink () {
+      if (!this.episode.name_slug) {
+        return false
+      }
+      return this.episode.name_slug
     }
   },
   created () {

app/components/arcsi/Player.vue

@@ -38,7 +38,7 @@
             {{ episode.shows[0].name }}
           </NuxtLink>
           <span> - </span>
-          <NuxtLink :to="`/shows/${arcsiShow.archive_lahmastore_base_url}/${episode.id}`">
+          <NuxtLink :to="`/shows/${arcsiShow.archive_lahmastore_base_url}/${episode.name_slug}`">
             {{ episode.name }}
           </NuxtLink>
         </h5>

app/components/itemList/ItemList.vue

@@ -16,9 +16,9 @@
         </div>
       </article>
       <Pagination
-        :itemsCount="items.length"
-        :totalCount="totalCount"
-        :isLoading="isLoading"
+        :items-count="items.length"
+        :total-count="totalCount"
+        :is-loading="isLoading"
         @click="callback"
       />
     </div>
@@ -28,7 +28,7 @@
 <script>
 
 export default {
-  props : {
+  props: {
     items: {
       type: Array,
       request: true
@@ -51,13 +51,13 @@ export default {
     isFilter: {
       type: Boolean,
       default: true
-    },
+    }
   },
   methods: {
-    onChange(event) {
+    onChange (event) {
       this.$emit('search', event.target.value)
     }
-  },
+  }
 }
 </script>
 

app/components/schedule/Fullitem.vue

@@ -42,7 +42,7 @@
             </NuxtLink>
             <div class="text-sm description">
               <div v-sanitize="[ sanitizeOptions, show.description ]" class="description-text" />
-              <p class="mt-2">
+              <p v-if="latestEpisodeData" class="mt-2">
                 Latest Episode:
                 <NuxtLink :to="latestEpisodeLink">
                   <b>{{ latestEpisodeTitle }}</b>
@@ -57,7 +57,7 @@
           </NuxtLink>
         </div>
         <div v-if="!showAirCheck(show.name)">
-          <a href="#" @click.prevent="opened = !opened">
+          <a href="#" @click.prevent="openShowDetails">
             <i v-if="opened" class="fa fa-chevron-up" aria-hidden="true" />
             <i v-else class="fa fa-chevron-down" aria-hidden="true" />
           </a>
@@ -68,6 +68,8 @@
 </template>
 
 <script>
+import { arcsiBaseURL } from '~/constants'
+
 export default {
   props: {
     show: {
@@ -82,7 +84,7 @@ export default {
   data () {
     return {
       opened: false,
-      loadedShow: null,
+      latestEpisodeData: null,
       sanitizeOptions: {
         allowedTags: ['b', 'i', 'em', 'strong', 'br', 'a', 'sup', 'sub'],
         allowedAttributes: {
@@ -92,6 +94,13 @@ export default {
     }
   },
   computed: {
+    getToday () {
+      const d = new Date()
+      const year = d.getFullYear()
+      const month = (d.getMonth() + 1).toLocaleString('en-US', { minimumIntegerDigits: 2 })
+      const day = d.getDate().toLocaleString('en-US', { minimumIntegerDigits: 2 })
+      return `${year}-${month}-${day}`
+    },
     isTouchEnabled () {
       return ('ontouchstart' in window) || (navigator.maxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0)
     },
@@ -125,49 +134,66 @@ export default {
       return this.showAirCheck(this.show.name) ? streamImage : this.show.cover_image_url
     },
     onAirDescription () {
-      if (!this.nowPlaying.now_playing && this.show.items) {
+      if (!this.nowPlaying.now_playing && this.latestEpisodeData) {
         return false
       }
       if (this.nowPlaying?.live?.is_live) {
         return this.show.description
       }
-      const descriptionFromArcsi = this.loadedShow?.[0]?.description
+      const descriptionFromArcsi = this.latestEpisodeData?.description
       return descriptionFromArcsi || this.show.description
     },
     latestEpisodeImage () {
-      if (!this.show.items) {
+      if (!this.latestEpisodeData) {
         return false
       }
       return this.show.cover_image_url
     },
     latestEpisodeTitle () {
-      if (!this.show.items) {
+      if (!this.latestEpisodeData) {
         return this.show.name
       }
-      const episodeTitleFromArcsi = this.loadedShow?.[0]?.name
+      const episodeTitleFromArcsi = this.latestEpisodeData?.name
       return episodeTitleFromArcsi ? `${episodeTitleFromArcsi}` : this.show.name
     },
     latestEpisodeLink () {
       const baseLink = '/shows/' + this.show.archive_lahmastore_base_url
-      if (!this.show.items) {
+      if (!this.latestEpisodeData) {
         return baseLink
       }
-      const episodeIdFromArcsi = this.loadedShow?.[0]?.id
+      const episodeIdFromArcsi = this.latestEpisodeData?.name_slug
       return episodeIdFromArcsi ? `/shows/${this.show.archive_lahmastore_base_url}/${episodeIdFromArcsi}` : baseLink
     }
   },
-  mounted () {
-    this.sortItems()
-  },
   methods: {
     showAirCheck (showname) {
       if (this.streamShowTitle && this.slugify(this.streamShowTitle) === this.slugify(showname)) {
         return true
       }
     },
-    sortItems () {
-      const showItems = [...this.show.items]
-      this.loadedShow = showItems.sort((a, b) => new Date(b.play_date) - new Date(a.play_date))
+    openShowDetails () {
+      this.opened = !this.opened
+      if (this.opened && !this.showAirCheck(this.show.name)) {
+        this.getShowInfos()
+      }
+    },
+    getShowInfos () {
+      this.$axios.get(arcsiBaseURL + '/show/' + this.show.archive_lahmastore_base_url + '/archive')
+        .then((res) => {
+          this.latestEpisodeData = this.getLatestEpisode(res.data)
+        })
+        .catch((error) => {
+          console.log(error)
+          this.$nuxt.error({ statusCode: 404, message: 'Show archive not found' })
+        })
+    },
+    getLatestEpisode (episodes) {
+      const sortedItems = episodes
+        .filter(show => show.play_date < this.getToday)
+        .filter(show => show.archived === true)
+        .sort((a, b) => b.number - a.number)
+        .sort((a, b) => new Date(b.play_date) - new Date(a.play_date))
+      return sortedItems[0]
     }
   }
 }