@saooti/octopus-sdk 33.2.7 → 33.2.9

package/index.ts

@@ -61,6 +61,7 @@ export const getClassicCheckbox = () => import("./src/components/form/ClassicChe
 export const getClassicRadio = () => import("./src/components/form/ClassicRadio.vue");
 export const getClassicLoading = () => import("./src/components/form/ClassicLoading.vue");
 export const getClassicSelect = () => import("./src/components/form/ClassicSelect.vue");
+export const getClassicDatePicker = () => import("./src/components/form/ClassicDatePicker.vue");
 export const getPaginate = () => import("./src/components/display/list/Paginate.vue");
 export const getListPaginate = () => import("./src/components/display/list/ListPaginate.vue");
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saooti/octopus-sdk",
-  "version": "33.2.7",
+  "version": "33.2.9",
   "private": false,
   "description": "Javascript SDK for using octopus",
   "author": "Saooti",

package/src/App.vue

@@ -16,12 +16,14 @@
     <CategoryFilter />
     <router-view />
     <Footer />
+    <Player />
   </div>
 </template>
 
 <script lang="ts">
 import TopBar from '@/components/misc/TopBar.vue';
 import Footer from '@/components/misc/Footer.vue';
+import Player from '@/components/misc/player/Player.vue';
 import CategoryFilter from '@/components/display/categories/CategoryFilter.vue';
 import { state } from './store/paramStore';
 import { Rubriquage } from './store/class/rubrique/rubriquage';
@@ -39,6 +41,7 @@ export default defineComponent({
     LeftMenu,
     CategoryFilter,
     Footer,
+    Player
   },
 
   mixins: [initSDK],

package/src/assets/form.scss

@@ -27,18 +27,4 @@
 		position: relative;
 		width: 100%;
 	}
-	.vc-select select{
-		padding: 0 !important;
-	}
-	.vc-date{
-		.vc-month,.vc-day,.vc-year{
-			color: $octopus-primary-color !important;
-		}
-	}
-	.vc-highlight{
-		background-color: $octopus-primary-color !important;
-	}
-	.vc-select select:focus{
-		border-color: $octopus-primary-color !important;
-	}
 }

package/src/assets/octopus-library.scss

@@ -17,5 +17,4 @@ $breadcrumb-border-radius:          2rem !default;
 @import './form.scss';
 @import './multiselect.scss';
 @import './transition.scss';
-@import './share.scss';
-@import 'v-calendar/dist/style.css';
+@import './share.scss';

package/src/components/display/emission/EmissionItem.vue

@@ -18,17 +18,13 @@
         :alt="$t('Emission name image', {name:emission.name})"
       >
       <div class="emission-item-text">
-        <div class="d-flex align-items-center">
+        <div class="d-flex align-items-center emission-name">
           <span
             v-if="!activeEmission && !isPodcastmaker && editRight"
             :title="$t('Emission have not podcasts')"
             class="saooti-warning text-danger me-1"
           />
-          <div
-            class="emission-name"
-          >
-            {{ emission.name }}
-          </div>
+          {{ emission.name }}
         </div>
         <div
           ref="descriptionEmissionContainer"
@@ -41,18 +37,16 @@
           />
         <!-- eslint-enable -->
         </div>
-        <div class="flex-grow-1" />
         <router-link
           v-if="!isPodcastmaker"
+          class="emission-producer mt-auto"
           :to="{
             name: 'productor',
             params: { productorId: emission.orga.id },
             query: { productor: filterOrga },
           }"
         >
-          <div class="emission-producer">
-            © {{ emission.orga.name }}
-          </div>
+          © {{ emission.orga.name }}
         </router-link>
       </div>
     </router-link>

package/src/components/display/filter/DateFilter.vue

@@ -13,22 +13,12 @@
         id-checkbox="search-from-checkbox"
         :label="$t('From the :')"
       />
-      <DatePicker
-        v-model="fromDate"
+      <ClassicDatePicker
         class="ps-3 pe-3"
-        mode="dateTime"
-        color="green"
-        is24hr
-        @update:modelValue="updateFromDate()"
-      >
-        <template #default="{ inputValue, inputEvents }">
-          <input
-            class="px-2 py-1 border rounded focus:border-blue-300"
-            :value="inputValue"
-            v-on="inputEvents"
-          >
-        </template>
-      </DatePicker>
+        :date="fromDate"
+        templateClass="px-2 py-1 border rounded focus:border-blue-300"
+        @updateDate="fromDate=$event;updateFromDate"
+      />
     </div>
     <div class="d-flex align-items-center">
       <ClassicCheckbox
@@ -37,22 +27,12 @@
         id-checkbox="search-to-checkbox"
         :label="$t('To the :')"
       />
-      <DatePicker
-        v-model="toDate"
+      <ClassicDatePicker
         class="ps-3"
-        mode="dateTime"
-        color="green"
-        is24hr
-        @update:modelValue="updateToDate()"
-      >
-        <template #default="{ inputValue, inputEvents }">
-          <input
-            class="px-2 py-1 border rounded focus:border-blue-300"
-            :value="inputValue"
-            v-on="inputEvents"
-          >
-        </template>
-      </DatePicker>
+        :date="toDate"
+        templateClass="px-2 py-1 border rounded focus:border-blue-300"
+        @updateDate="toDate=$event;updateToDate"
+      />
     </div>
   </div>
 </template>
@@ -60,17 +40,17 @@
 <script lang="ts">
 import moment from 'moment';
 import ClassicCheckbox from '../../form/ClassicCheckbox.vue';
-import { DatePicker } from 'v-calendar';
+import ClassicDatePicker from '../../form/ClassicDatePicker.vue';
 import { defineComponent } from 'vue';
 export default defineComponent({
   components: {
-    DatePicker,
+    ClassicDatePicker,
     ClassicCheckbox,
   },
   props: {
     isEmission: { default: false, type:  Boolean},
-    initToDate: { default: undefined, type:  String},
-    initFromDate: { default: undefined, type:  String},
+    initToDate: { default: undefined, type:  Date},
+    initFromDate: { default: undefined, type:  Date},
   },
 
   emits: ['updateToDate', 'updateFromDate'],
@@ -79,8 +59,8 @@ export default defineComponent({
     return {
       isFrom: false as boolean,
       isTo: false as boolean,
-      fromDate: moment().subtract(10, 'days').toISOString(),
-      toDate: moment().toISOString(),
+      fromDate: moment().subtract(10, 'days').toDate(),
+      toDate: moment().toDate(),
     };
   },
 
@@ -139,4 +119,4 @@ export default defineComponent({
     },
   },
 })
-</script>
+</script>

package/src/components/display/participant/ParticipantItem.vue

@@ -18,15 +18,13 @@
         :alt="$t('Animator image')"
         class="img-box-circle"
       >
-      <div class="d-flex align-items-center">
+      <div class="d-flex align-items-center participant-name">
         <span
           v-if="!activeParticipant && !isPodcastmaker && editRight"
           :title="$t('Participant have not podcasts')"
           class="saooti-warning text-danger me-1"
         />
-        <div class="participant-name">
-          {{ name }}
-        </div>
+        {{ name }}
       </div>
       <div
         ref="descriptionParticipantContainer"

package/src/components/display/playlist/PlaylistItem.vue

@@ -19,15 +19,13 @@
         class="img-box"
       >
       <div class="emission-item-text">
-        <div class="d-flex align-items-center">
+        <div class="d-flex align-items-center emission-name">
           <span
             v-if="!activePlaylist && !isPodcastmaker"
             :title="$t('Playlist have not podcasts')"
             class="saooti-warning text-danger me-1"
           />
-          <div class="emission-name">
-            {{ name }}
-          </div>
+          {{ name }}
         </div>
         <div
           ref="descriptionPlaylistContainer"
@@ -40,7 +38,6 @@
           />
           <!-- eslint-enable -->
         </div>
-        <div class="flex-grow-1" />
         <router-link
           v-if="!isPodcastmaker && playlist.organisation"
           :to="{
@@ -48,11 +45,9 @@
             params: { productorId: playlist.organisation.id },
             query: { productor: $store.state.filter.organisationId },
           }"
-          class="text-dark"
+          class="emission-producer text-primary mt-auto"
         >
-          <div class="emission-producer text-primary">
-            © {{ playlist.organisation.name }}
-          </div>
+          © {{ playlist.organisation.name }}
         </router-link>
       </div>
     </router-link>

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

@@ -10,10 +10,9 @@
         query: { productor: $store.state.filter.organisationId },
       }"
       :title="$t('Participant')"
+      class="podcast-item-animator text-dark"
     >
-      <div class="podcast-item-animator text-dark">
-        {{ animatorName }}
-      </div>
+      {{ animatorName }}
     </router-link>
   </div>
 </template>
@@ -38,10 +37,6 @@ export default defineComponent({
 <style lang="scss">
 .octopus-app{
   .podcast-item-animator {
-    display: flex;
-    align-items: flex-start;
-    justify-content: center;
-
     font-size: 0.55rem;
     font-weight: 300;
     text-transform: capitalize;

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

@@ -36,37 +36,21 @@
       @click="play"
     >
       <div
-        v-if="!isLiveToBeRecorded"
+        :title="!playingPodcast? $t('Play') : textVisible"
         class="icon-container"
+        :class="{
+          'saooti-play text-primary': !playingPodcast,
+          'special-icon-play-button': !classicPodcastPlay,
+          iconName:!classicPodcastPlay || isLiveToBeRecorded,
+          'bloc-paddle':playingPodcast,
+          'error-icon':isLiveToBeRecorded
+        }"
       >
-        <div
-          v-show="!playingPodcast"
-          :title="$t('Play')"
-          class="saooti-play text-primary"
-        />
-        <div
-          v-if="!classicPodcastPlay"
-          class="special-icon-play-button"
-          :class="iconName"
-        />
-        <div
-          v-show="playingPodcast"
-          class="bloc-paddle"
-        >
+        <template v-if="playingPodcast">
           <span class="paddle1" />
           <span class="paddle2" />
           <span class="paddle3" />
-        </div>
-      </div>
-      <div
-        v-else
-        class="icon-container error-icon"
-      >
-        <div
-          :title="textVisible"
-          class="big-icon-error"
-          :class="iconName"
-        />
+        </template>
       </div>
       <div
         v-if="!classicPodcastPlay"
@@ -343,13 +327,14 @@ export default defineComponent({
     }
 
     .icon-container {
-      background: #00000050;
+      background: #00000050 !important;
       border-radius: 50%;
       height: 3rem;
       width: 3rem;
       display: flex;
       align-items: center;
       justify-content: center;
+      z-index: 2;
       &.error-icon {
         background: #00000050 !important;
         cursor: default !important;
@@ -357,16 +342,11 @@ export default defineComponent({
       &:hover {
         background: #00000030;
       }
-      > .saooti-play {
+      &.saooti-play {
         font-size: 2em;
         position: relative;
         right: -0.2rem;
       }
-      .big-icon-error {
-        font-size: 2em;
-        position: relative;
-      }
-      z-index: 2;
     }
   }
 }

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

@@ -1,5 +1,6 @@
 <template>
   <div
+    id="podcast-item-container"
     class="podcast-item-container"
     :class="[
       podcastShadow ? 'shadow-element' : '',
@@ -10,18 +11,18 @@
   >
     <PodcastImage
       :podcast="podcast"
-      :hide-play="!podcastItemDescription || (podcastItemDescription && (!hover || !description))"
+      :hide-play="!podcastItemDescription || (podcastItemDescription && (!hoverDesc || !description))"
       :display-description="0!==description.length && podcastItemDescription"
       :arrow-direction="arrowDirection"
       @hideDescription="hideDescription"
       @showDescription="showDescription"
     />
     <div
-      v-if="podcastItemDescription"
+      v-if="podcastItemDescription && hoverDesc"
       ref="descriptionPodcastContainer"
       class="description-podcast-item html-wysiwyg-content"
       :class="[
-        hover && ''!==description ? 'visible' : 'invisible',
+        hoverDesc && ''!==description ? 'visible' : 'invisible',
         isDescriptionBig ? 'after-podcast-description' : '',
       ]"
     >
@@ -67,7 +68,8 @@ export default defineComponent({
 
   data() {
     return {
-      hover: false as boolean,
+      firstDisplayDesc : false as boolean,
+      hoverDesc: false as boolean,
       arrowDirection: 'up' as string,
       isDescriptionBig: false as boolean,
     };
@@ -91,24 +93,28 @@ export default defineComponent({
     },
   },
 
-  mounted() {
-    if(!this.podcastItemDescription){return}
-    const podcastDesc = (this.$refs.descriptionPodcast as HTMLElement);
-    const podcastDescContainer = (this.$refs.descriptionPodcastContainer as HTMLElement);
-    if (podcastDesc?.clientHeight > podcastDescContainer?.clientHeight) {
-      this.isDescriptionBig = true;
-    }
-  },
   methods: {
+    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;
+    },
     showDescription(): void {
       if(!this.podcastItemDescription){return}
       this.arrowDirection = 'down';
-      this.hover = true;
+      this.hoverDesc = true;
+      this.$nextTick(() => {
+        this.initDescription();
+      });
     },
     hideDescription(): void {
       if(!this.podcastItemDescription){return}
       this.arrowDirection = 'up';
-      this.hover = false;
+      this.hoverDesc = false;
     },
   },
 })

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

@@ -1,51 +1,47 @@
 <template>
-  <div class="d-contents podcast-item-info">
-    <div class="d-flex justify-content-between flex-wrap text-secondary mb-3">
-      <div class="me-3 h6">
-        {{ date }}
-      </div>
-      <div
-        v-if="0 !== durationString.length"
-        class="h6"
-      >
-        {{ durationString }}
-      </div>
+  <div class="d-flex justify-content-between flex-wrap text-secondary m-2 mb-3">
+    <div class="me-3 h6">
+      {{ date }}
     </div>
-    <AnimatorsItem
-      v-if="animators && 0!==animators.length"
-      :animator="animators[0]"
-    />
+    <div
+      v-if="0 !== durationString.length"
+      class="h6"
+    >
+      {{ durationString }}
+    </div>
+  </div>
+  <AnimatorsItem
+    v-if="animators && 0!==animators.length"
+    :animator="animators[0]"
+  />
+  <router-link
+    :to="{
+      name: 'podcast',
+      params: { podcastId: podcastId },
+      query: { productor: filterOrga },
+    }"
+    class="text-dark flex-grow-1 title-podcast-item"
+  >
+  {{ title }}
+  </router-link>
+  <PodcastPlayBar
+    :podcast-id="podcastId"
+    :duration="duration"
+    class="mx-2"
+  />
+  <div class="d-flex justify-content-between">
+    <div v-if="isPodcastmaker" class="useless-div-for-podcastmaker" />
     <router-link
+      v-if="!isPodcastmaker"
       :to="{
-        name: 'podcast',
-        params: { podcastId: podcastId },
+        name: 'productor',
+        params: { productorId: podcastOrganisationId },
         query: { productor: filterOrga },
       }"
-      class="text-dark d-flex flex-column flex-grow-1"
+      class="text-dark producer-podcast-item"
     >
-      <div class="title-podcast-item">
-        {{ title }}
-      </div>
+      {{ '© ' + podcastOrganisationName }}
     </router-link>
-    <PodcastPlayBar
-      :podcast-id="podcastId"
-      :duration="duration"
-      class="mx-2"
-    />
-    <div class="d-flex justify-content-between">
-      <div class="useless-div-for-podcastmaker" />
-      <router-link
-        v-if="!isPodcastmaker"
-        :to="{
-          name: 'productor',
-          params: { productorId: podcastOrganisationId },
-          query: { productor: filterOrga },
-        }"
-        class="text-dark producer-podcast-item"
-      >
-        <div>{{ '© ' + podcastOrganisationName }}</div>
-      </router-link>
-    </div>
   </div>
 </template>
 
@@ -130,13 +126,6 @@ export default defineComponent({
 
 <style lang="scss">
 .octopus-app{
-.podcast-item-info {
-  .text-secondary {
-    margin: 0.5rem !important;
-  }
-  .saooti-pin {
-    font-size: 22px;
-  }
   .title-podcast-item {
     font-weight: 700;
     margin: 0.25rem 0.5rem 0.5rem;
@@ -155,7 +144,7 @@ export default defineComponent({
     margin: 0.2rem 0.5rem 0.5rem;
     font-size: 0.55rem;
     color: #666;
+    margin-left: auto;
   }
 }
-}
 </style>

package/src/components/form/ClassicCheckbox.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="d-flex octopus-form-item">
+  <div class="d-flex align-items-center octopus-form-item">
     <div
       :class="isSwitch?'octopus-form-switch me-2':''"
     >

package/src/components/form/ClassicDatePicker.vue

@@ -0,0 +1,81 @@
+<template>
+  <DatePicker
+    ref="datePicker"
+    :modelValue="undefined!==range ? range : date"
+    :mode="mode"
+    color="green"
+    is24hr
+    :is-range="undefined!==range"
+    :max-date="isMaxDate ? now : undefined"
+    :min-date="isMinDate ? now : undefined"
+    :columns="columnNumber"
+    :is-inline="columnNumber>1"
+    :update-on-input="conditionEdit"
+    :masks="isMask ? masks : undefined"
+    @update:modelValue="$emit('updateDate', $event)"
+  >
+    <template v-if="templateClass" #default="{ inputValue, inputEvents }">
+      <input
+        :class="templateClass"
+        :value="inputValue"
+        v-on="inputEvents"
+      >
+    </template>
+  </DatePicker>
+</template>
+
+<script lang="ts">
+import moment from 'moment';
+import { DatePicker } from 'v-calendar';
+import { defineComponent } from 'vue';
+export default defineComponent({
+  components: {
+    DatePicker,
+  },
+  props: {
+    date: { default: undefined, type: Date},
+    range: {default: undefined, type: Object as ()=>{ start: Date; end: Date }},
+    isMaxDate:{ default: false, type:  Boolean},
+    isMinDate:{ default: false, type:  Boolean},
+    columnNumber:{default:1, type: Number},
+    templateClass:{default: undefined,  type: String},
+    mode:{default:"dateTime", type: String},
+    isMask:{default: false,  type: Boolean},
+    conditionEdit:{default: true,  type: Boolean},
+  },
+
+  emits: ['updateDate', 'update:date'],
+  data() {
+    return {
+      masks: {
+        input: 'YYYY-MM-DD',
+      },
+    };
+  },
+  computed: {
+    now(): Date {
+      return moment().add(1, 'days').toDate();
+    },
+  }
+})
+</script>
+<style lang="scss">
+@import '@scss/_variables.scss';
+@import 'v-calendar/dist/style.css';
+.octopus-app{
+	.vc-select select{
+		padding: 0 !important;
+	}
+	.vc-date{
+		.vc-month,.vc-day,.vc-year{
+			color: $octopus-primary-color !important;
+		}
+	}
+	.vc-highlight{
+		background-color: $octopus-primary-color !important;
+	}
+	.vc-select select:focus{
+		border-color: $octopus-primary-color !important;
+	}
+}
+</style>

package/src/components/misc/Footer.vue

@@ -1,9 +1,8 @@
 <template>
   <div
-    v-if="displayFooter"
     id="footer"
     ref="footer"
-    class="d-flex align-items-center justify-content-between border-top"
+    class="d-flex align-items-center justify-content-between border-top mt-auto"
   >
     <div class="d-flex align-items-center px-1" v-if="!isPodcastmaker">
       <div class="text-dark me-2">
@@ -53,13 +52,11 @@
       >
     </a>
   </div>
-  <Player @hide="showBlackBorder" />
 </template>
 
 <script lang="ts">
 import cookies from '../mixins/cookies';
 import ClassicSelect from '../form/ClassicSelect.vue';
-import Player from './player/Player.vue';
 import { state } from '../../store/paramStore';
 import {loadLocaleMessages} from '@/i18n';
 import octopusApi from '@saooti/octopus-api';
@@ -69,14 +66,10 @@ import { defineComponent } from 'vue'
 export default defineComponent({
   name: 'Footer',
   components: {
-    Player,
     ClassicSelect
   },
 
   mixins:[cookies],
-  props: {
-    displayFooter: { default: true, type: Boolean},
-  },
   data() {
     return {
       language: this.$i18n.locale,
@@ -116,15 +109,6 @@ export default defineComponent({
                    iabId: this.$store.state.filter.iab?.id,
                    rubriquesId: this.rubriqueQueryParam}
     },
-    showBlackBorder(hide: boolean): void {
-      const footerElement = (this.$refs.footer as HTMLElement);
-      if(!footerElement){return;}
-      if (hide) {
-        footerElement.classList.remove('border-round');
-      } else {
-        footerElement.className += ' border-round';
-      }
-    },
     changeLanguage(): void{
       this.setCookie('octopus-language', this.language);
       loadLocaleMessages(this.$i18n, this.language, this.$store.state.general.isEducation);
@@ -159,16 +143,6 @@ export default defineComponent({
     a{
       color: #666;
     }
-    .border-round {
-      border-radius: 0 0 2rem 2rem;
-    }
-    /** PHONES*/
-    @media (max-width: 960px) {
-      .align-items-center,
-      .align-items-end {
-        align-items: flex-start !important;
-      }
-    }
   }
 }
 </style>