@saooti/octopus-sdk 37.0.6 → 37.0.8

package/src/components/display/podcasts/PodcastItem.vue

@@ -1,41 +1,36 @@
 <template>
   <div
     class="podcast-item-container"
-    :class="[
-      podcastBorderBottom ? 'border-bottom' : '',
-    ]"
+    :class="[podcastBorderBottom ? 'border-bottom' : '']"
     :data-pubdate="displayDate"
     :data-count="podcast.downloadCount"
   >
     <PodcastImage
       :podcast="podcast"
-      :hide-play="!podcastItemDescription || (podcastItemDescription && (!hoverDesc || !description))"
-      :display-description="0!==description.length && podcastItemDescription"
+      :hide-play="
+        !podcastItemDescription ||
+        (podcastItemDescription && (!hoverDesc || !description))
+      "
+      :display-description="0 !== description.length && podcastItemDescription"
       :arrow-direction="arrowDirection"
       :fetch-conference="fetchConference"
-      @hideDescription="hideDescription"
-      @showDescription="showDescription"
+      @hide-description="hideDescription"
+      @show-description="showDescription"
     />
     <div
       v-if="podcastItemDescription && hoverDesc"
       ref="descriptionPodcastContainer"
       class="description-podcast-item html-wysiwyg-content"
       :class="[
-        hoverDesc && ''!==description ? 'visible' : 'invisible',
+        hoverDesc && '' !== description ? 'visible' : 'invisible',
         isDescriptionBig ? 'after-podcast-description' : '',
       ]"
     >
       <!-- eslint-disable vue/no-v-html -->
-      <div
-        ref="descriptionPodcast"
-        v-html="description"
-      />
-    <!-- eslint-enable -->
+      <div ref="descriptionPodcast" v-html="description" />
+      <!-- eslint-enable -->
     </div>
-    <div
-      @mouseenter="showDescription"
-      @mouseleave="hideDescription"
-    >
+    <div @mouseenter="showDescription" @mouseleave="hideDescription">
       <PodcastItemInfo
         :podcast-id="podcast.podcastId"
         :title="podcast.title"
@@ -50,129 +45,140 @@
 </template>
 
 <script lang="ts">
-import PodcastItemInfo from './PodcastItemInfo.vue';
-import PodcastImage from './PodcastImage.vue';
-import { state } from '../../../stores/ParamSdkStore';
-import dayjs from 'dayjs';
-import { Podcast } from '@/stores/class/general/podcast';
-import { defineComponent } from 'vue'
-import { Conference } from '@/stores/class/conference/conference';
+import PodcastItemInfo from "./PodcastItemInfo.vue";
+import PodcastImage from "./PodcastImage.vue";
+import { state } from "../../../stores/ParamSdkStore";
+import dayjs from "dayjs";
+import { Podcast } from "@/stores/class/general/podcast";
+import { defineComponent } from "vue";
+import { Conference } from "@/stores/class/conference/conference";
 export default defineComponent({
-  name: 'PodcastItem',
-  
+  name: "PodcastItem",
+
   components: {
     PodcastItemInfo,
     PodcastImage,
   },
 
   props: {
-    podcast: { default: ()=>({}), type: Object as ()=> Podcast},
-    fetchConference: { default: undefined, type: Object as ()=>Conference},
+    podcast: { default: () => ({}), type: Object as () => Podcast },
+    fetchConference: { default: undefined, type: Object as () => Conference },
   },
 
   data() {
     return {
-      firstDisplayDesc : false as boolean,
+      firstDisplayDesc: false as boolean,
       hoverDesc: false as boolean,
-      arrowDirection: 'up' as string,
+      arrowDirection: "up" as string,
       isDescriptionBig: false as boolean,
     };
   },
 
   computed: {
     podcastBorderBottom(): boolean {
-      return (state.podcastsPage.podcastBorderBottom as boolean);
+      return state.podcastsPage.podcastBorderBottom as boolean;
     },
     podcastItemDescription(): boolean {
-      return (state.podcastPage.podcastItemDescription as boolean);
+      return state.podcastPage.podcastItemDescription as boolean;
     },
     displayDate(): string {
       return dayjs(this.podcast.pubDate).format();
     },
     description(): string {
-      return this.podcast.description ?? '';
+      return this.podcast.description ?? "";
     },
   },
 
   methods: {
-    initDescription():void{
-      if(this.firstDisplayDesc){return;}
-      const podcastDesc = (this.$refs.descriptionPodcast as HTMLElement);
-      const podcastDescContainer = (this.$refs.descriptionPodcastContainer as HTMLElement);
+    initDescription(): void {
+      if (this.firstDisplayDesc) {
+        return;
+      }
+      const podcastDesc = this.$refs.descriptionPodcast as HTMLElement;
+      const podcastDescContainer = this.$refs
+        .descriptionPodcastContainer as HTMLElement;
       if (podcastDesc?.clientHeight > podcastDescContainer?.clientHeight) {
         this.isDescriptionBig = true;
       }
-      this.firstDisplayDesc=true;
+      this.firstDisplayDesc = true;
     },
     showDescription(): void {
-      if(!this.podcastItemDescription){return}
-      this.arrowDirection = 'down';
+      if (!this.podcastItemDescription) {
+        return;
+      }
+      this.arrowDirection = "down";
       this.hoverDesc = true;
       this.$nextTick(() => {
         this.initDescription();
       });
     },
     hideDescription(): void {
-      if(!this.podcastItemDescription){return}
-      this.arrowDirection = 'up';
+      if (!this.podcastItemDescription) {
+        return;
+      }
+      this.arrowDirection = "up";
       this.hoverDesc = false;
     },
   },
-})
+});
 </script>
 
 <style lang="scss">
-@import '@scss/_variables.scss';
-.octopus-app{
-.podcast-item-container {
-  border-radius: $octopus-borderradius;
-  list-style: none;
-  position: relative;
-  width: $octopus-item-podcast-size;
-  height: 20.5rem;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  text-align: left;
-  background: #fff;
-  flex-shrink: 0;
-  border: 2px solid #eee;
- 
-  .description-podcast-item {
-    padding: 1rem;
-    color: #333;
-    background-color: rgba(255, 255, 255, 0.92);
-    height: $octopus-item-podcast-size;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    font-size: 0.9em;
-    position: absolute;
+@import "@scss/_variables.scss";
+.octopus-app {
+  .podcast-item-container {
+    border-radius: $octopus-borderradius;
+    list-style: none;
+    position: relative;
     width: $octopus-item-podcast-size;
-    word-break: break-word;
-    &.after-podcast-description:after {
-      content: '...';
+    height: 20.5rem;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    text-align: left;
+    background: #fff;
+    flex-shrink: 0;
+    border: 2px solid #eee;
+
+    .description-podcast-item {
+      padding: 1rem;
+      color: #333;
+      background-color: rgba(255, 255, 255, 0.92);
+      height: $octopus-item-podcast-size;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      font-size: 0.9em;
       position: absolute;
-      padding-left: 1rem;
-      right: 0;
-      bottom: 0;
-      width: 100%;
-      font-size: 1rem;
-      font-weight: bolder;
-      text-align: center;
-      background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 40%);
+      width: $octopus-item-podcast-size;
+      word-break: break-word;
+      &.after-podcast-description:after {
+        content: "...";
+        position: absolute;
+        padding-left: 1rem;
+        right: 0;
+        bottom: 0;
+        width: 100%;
+        font-size: 1rem;
+        font-weight: bolder;
+        text-align: center;
+        background: linear-gradient(
+          to bottom,
+          rgba(255, 255, 255, 0),
+          #fff 40%
+        );
+      }
     }
-  }
-  @media (max-width: 960px) {
-    margin: 0.5rem !important;
-  }
-  @media (max-width: 450px) {
-    width: $octopus-mobile-item-size;
-    height: 18.8rem;
-    .description-podcast-item{
-      height: $octopus-mobile-item-size;
+    @media (max-width: 960px) {
+      margin: 0.5rem !important;
+    }
+    @media (max-width: 450px) {
       width: $octopus-mobile-item-size;
+      height: 18.8rem;
+      .description-podcast-item {
+        height: $octopus-mobile-item-size;
+        width: $octopus-mobile-item-size;
+      }
     }
   }
 }
-}
-</style>
+</style>

package/src/components/display/podcasts/PodcastItemInfo.vue

@@ -1,100 +1,96 @@
 <template>
   <div>
-  <div class="text-secondary h6 ms-2">
-    {{ date }}
-  </div>
-  <router-link
-    :to="{
-      name: 'podcast',
-      params: { podcastId: podcastId },
-      query: { productor: filterOrgaId },
-    }"
-    class="text-dark flex-grow-1 title-podcast-item"
-  >
-    {{ title }}
-  </router-link>
-  <PodcastPlayBar
-    :podcast-id="podcastId"
-    :duration="duration"
-    class="mx-2"
-  />
-  
-  <div class="mx-2 d-flex align-items-center justify-content-between mt-2">
-    <div
-      v-if="isPodcastmaker"
-      class="useless-div-for-podcastmaker"
-    />
-    <AnimatorsItem
-      v-if="animators && 0!==animators.length"
-      class="w-0 flex-grow-1"
-      :animator="animators[0]"
-    />
+    <div class="text-secondary h6 ms-2">
+      {{ date }}
+    </div>
     <router-link
-      v-if="!isPodcastmaker"
       :to="{
-        name: 'productor',
-        params: { productorId: podcastOrganisationId },
+        name: 'podcast',
+        params: { podcastId: podcastId },
         query: { productor: filterOrgaId },
       }"
-      class="text-dark producer-podcast-item"
+      class="text-dark flex-grow-1 title-podcast-item"
     >
-      {{ '© ' + orgaNameDisplay }}
+      {{ title }}
     </router-link>
-  </div>
+    <PodcastPlayBar :podcast-id="podcastId" :duration="duration" class="mx-2" />
+
+    <div class="mx-2 d-flex align-items-center justify-content-between mt-2">
+      <div v-if="isPodcastmaker" class="useless-div-for-podcastmaker" />
+      <AnimatorsItem
+        v-if="animators && 0 !== animators.length"
+        class="w-0 flex-grow-1"
+        :animator="animators[0]"
+      />
+      <router-link
+        v-if="!isPodcastmaker"
+        :to="{
+          name: 'productor',
+          params: { productorId: podcastOrganisationId },
+          query: { productor: filterOrgaId },
+        }"
+        class="text-dark producer-podcast-item"
+      >
+        {{ "© " + orgaNameDisplay }}
+      </router-link>
+    </div>
   </div>
 </template>
 
 <script lang="ts">
-import AnimatorsItem from './AnimatorsItem.vue';
-import { state } from '../../../stores/ParamSdkStore';
-import { orgaComputed } from '../../mixins/orgaComputed';
-import dayjs from 'dayjs';
-import PodcastPlayBar from './PodcastPlayBar.vue';
-import { defineComponent } from 'vue'
-import { Participant } from '@/stores/class/general/participant';
+import AnimatorsItem from "./AnimatorsItem.vue";
+import { state } from "../../../stores/ParamSdkStore";
+import { orgaComputed } from "../../mixins/orgaComputed";
+import dayjs from "dayjs";
+import PodcastPlayBar from "./PodcastPlayBar.vue";
+import { defineComponent } from "vue";
+import { Participant } from "@/stores/class/general/participant";
 export default defineComponent({
-  name: 'PodcastItemInfo',
-  
+  name: "PodcastItemInfo",
+
   components: {
     AnimatorsItem,
-    PodcastPlayBar
+    PodcastPlayBar,
   },
 
-  mixins:[orgaComputed],
+  mixins: [orgaComputed],
 
   props: {
-    podcastId: { default: undefined, type: Number},
-    title: { default: "", type: String},
-    pubDate: { default: "", type: String},
-    podcastOrganisationId: { default: "", type: String},
-    podcastOrganisationName: { default: "", type: String},
-    duration: { default: 0, type: Number},
-    animators: { default: undefined, type: Object as ()=> Array<Participant>},
+    podcastId: { default: undefined, type: Number },
+    title: { default: "", type: String },
+    pubDate: { default: "", type: String },
+    podcastOrganisationId: { default: "", type: String },
+    podcastOrganisationName: { default: "", type: String },
+    duration: { default: 0, type: Number },
+    animators: { default: undefined, type: Object as () => Array<Participant> },
   },
-  
+
   computed: {
     isPodcastmaker(): boolean {
-      return (state.generalParameters.podcastmaker as boolean);
+      return state.generalParameters.podcastmaker as boolean;
     },
     date(): string {
-      return dayjs(this.pubDate).format('D MMMM YYYY, HH[h]mm');
+      return dayjs(this.pubDate).format("D MMMM YYYY, HH[h]mm");
     },
     editRight(): boolean {
-      return (true===this.authenticated && this.myOrganisationId === this.podcastOrganisationId) ||
-        true===state.generalParameters.isAdmin
+      return (
+        (true === this.authenticated &&
+          this.myOrganisationId === this.podcastOrganisationId) ||
+        true === state.generalParameters.isAdmin
+      );
     },
-    orgaNameDisplay():string{
-      if(this.podcastOrganisationName.length > 30){
-        return this.podcastOrganisationName.substring(0, 30) + '...';
+    orgaNameDisplay(): string {
+      if (this.podcastOrganisationName.length > 30) {
+        return this.podcastOrganisationName.substring(0, 30) + "...";
       }
       return this.podcastOrganisationName;
-    }
+    },
   },
-})
+});
 </script>
 
 <style lang="scss">
-.octopus-app{
+.octopus-app {
   .title-podcast-item {
     font-weight: 700;
     margin: 0.25rem 0.5rem 0.5rem;
@@ -115,4 +111,4 @@ export default defineComponent({
     flex-shrink: 0;
   }
 }
-</style>
+</style>