@saooti/octopus-sdk 33.2.6 → 33.2.8

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.6",
+  "version": "33.2.8",
   "private": false,
   "description": "Javascript SDK for using octopus",
   "author": "Saooti",

package/src/App.vue

@@ -1,9 +1,8 @@
 <template>
   <div
     v-if="isInit"
-    id="app"
     :key="reload"
-    class="octopus-app"
+    class="d-flex flex-column h-100 octopus-app"
   >
     <TopBar
       v-model:displayMenu="displayMenu"
@@ -17,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';
@@ -40,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/general.scss

@@ -12,8 +12,16 @@ body{
   background: #ebebeb;
   min-height: 100%;
   overscroll-behavior-y: contain;
+  display: flex;
+  flex-direction: column;
+}
+#app{
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
 }
 .octopus-app{
+  flex-grow: 1;
   *:focus-visible{
     outline: none;
     box-shadow: 0 0 10px 1px $octopus-primary-color !important;
@@ -66,6 +74,7 @@ body{
   .page-box{
     background-color: $octopus-background;
     padding: 2rem 5rem 5rem 5rem;
+    flex-grow: 1;
     @media (max-width: 1400px) {
       padding: 2rem;
     }

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/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/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/form/ClassicSelect.vue

@@ -10,6 +10,7 @@
       v-model="textValue"
       :disabled="isDisabled"
       class="c-hand w-100"
+      :class="transparent?'transparent':''"
       :style="getFontFamily"
     >
       <option
@@ -31,6 +32,7 @@ export default defineComponent({
     idSelect: { default: '', type: String },
     label: { default: '', type: String },
     displayLabel:{default: true, type: Boolean},
+    transparent:{ default: false, type: Boolean },
     isDisabled: { default: false, type: Boolean },
     options: { default: ()=>[], type: Array as () => Array<{title: string, value: string|undefined, fontFamily?: string}> },
     textInit: { default: undefined, type: String },
@@ -68,4 +70,15 @@ export default defineComponent({
     },
   },
 });
-</script>
+</script>
+<style lang="scss">
+.octopus-app{
+  select.transparent {
+		background: transparent !important;
+		outline-color: transparent !important;
+		padding:0;
+		border: 0;
+		height: unset;
+	}
+}
+</style>

package/src/components/misc/Footer.vue

@@ -1,98 +1,62 @@
 <template>
   <div
-    v-if="displayFooter"
     id="footer"
     ref="footer"
-    class="d-flex-column p-3 secondary-bg border-top"
+    class="d-flex align-items-center justify-content-between border-top mt-auto"
   >
-    <div class="d-flex flex-column flex-grow-1 align-items-end">
-      <div class="d-flex flex-column">
-        <template
-          v-for="link in routerLinkArray"
-          :key="link.routeName"
-        >
-          <router-link
-            v-if="link.condition"
-            class="link-hover"
-            :to="{
-              name: link.routeName,
-              query: getQueriesRouter(link.routeName),
-            }"
-          >
-            {{ link.title }}
-          </router-link>
-        </template>
+    <div class="d-flex align-items-center px-1" v-if="!isPodcastmaker">
+      <div class="text-dark me-2">
+        &copy; Saooti 2019
       </div>
-    </div>
-    <hr class="show-phone">
-    <div
-      v-if="!isPodcastmaker"
-      class="d-flex flex-grow-1 align-items-center flex-column"
-    >
-      <div class="d-flex flex-column">
-        <div class="text-dark">
-          &copy; Saooti 2019
-        </div>
-        <router-link
-          v-for="link in routerLinkSecondArray" 
-          :key="link.routeName"
-          class="link-hover"
-          :to="link.routeName"
-        >
-          {{ link.title }}
-        </router-link>
-        <ClassicSelect
-          v-model:textInit="language"
-          :display-label="false"
-          id-select="language-chooser-select"
-          :label="$t('Change locale')"
-          :options="[{title:'Deutsch', value:'de'},
-                      {title:'English', value:'en'},
-                      {title:'Español', value:'es'},
-                      {title:'Français', value:'fr'},
-                      {title:'Italiano', value:'it'},
-                      {title:'Slovenščina', value:'sl'}]"
-        />
-      </div>
-    </div>
-    <hr class="show-phone">
-    <div class="flex-grow-1">
-      <a
-        href="https://www.acpm.fr/L-ACPM/Certifications-et-Labels/Les-Podcasts"
-        rel="noopener"
-        target="_blank"
-        :title="$t('Octopus is ACPM Podcast accredited')"
+      <router-link
+        v-for="link in routerLinkSecondArray" 
+        :key="link.routeName"
+        class="link-hover me-2"
+        :to="link.routeName"
       >
-        <img
-          class="acpm_image"
-          src="/img/ACPM.webp"
-          :title="$t('Octopus is ACPM Podcast accredited')"
-          :alt="$t('Octopus is ACPM Podcast accredited')"
-        >
-      </a>
+        {{ link.title }}
+      </router-link>
+      <ClassicSelect
+        v-model:textInit="language"
+        :display-label="false"
+        id-select="language-chooser-select"
+        :label="$t('Change locale')"
+        :transparent="true"
+        :options="[{title:'Deutsch', value:'de'},
+                    {title:'English', value:'en'},
+                    {title:'Español', value:'es'},
+                    {title:'Français', value:'fr'},
+                    {title:'Italiano', value:'it'},
+                    {title:'Slovenščina', value:'sl'}]"
+      />
     </div>
-    <div
+    <a
       v-if="isPodcastmaker && isContactLink"
-      class="d-flex flex-column flex-grow-1 align-items-center"
+      id="footer-contact"
+      class="link-hover"
+      :href="isContactLink"
+      rel="noopener"
+      target="_blank"
+    >{{ $t('Contact') }}</a>
+    <a
+      href="https://www.acpm.fr/L-ACPM/Certifications-et-Labels/Les-Podcasts"
+      rel="noopener"
+      target="_blank"
+      :title="$t('Octopus is ACPM Podcast accredited')"
     >
-      <div class="d-flex flex-column">
-        <a
-          id="footer-contact"
-          class="link-hover"
-          :href="isContactLink"
-          rel="noopener"
-          target="_blank"
-        >{{ $t('Contact') }}</a>
-      </div>
-    </div>
+      <img
+        class="acpm_image"
+        src="/img/ACPM.webp"
+        :title="$t('Octopus is ACPM Podcast accredited')"
+        :alt="$t('Octopus is ACPM Podcast accredited')"
+      >
+    </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';
@@ -102,29 +66,16 @@ 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,
     };
   },
   computed: {
-    routerLinkArray(){
-      return [
-        {title : this.$t('Home'), routeName: 'home', condition : true},
-        {title : this.$t('Podcasts'), routeName: 'podcasts', condition : true},
-        {title : this.$t('Emissions'), routeName: 'emissions', condition : true},
-        {title : this.$t('Productors'), routeName: 'productors', condition : !this.isPodcastmaker && !this.$store.state.filter.organisationId},
-        {title : this.$t('Playlists'), routeName: 'playlists', condition : true},
-        {title : this.$t('Speakers'), routeName: 'participants', condition : true},]
-    },
     routerLinkSecondArray(){
       return [
         {title : this.$t('Contact'), routeName: '/main/pub/contact'},
@@ -158,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);
@@ -190,23 +132,17 @@ export default defineComponent({
 .octopus-app{
   #footer{
     font-size: 0.7rem;
+    position: sticky;
+    bottom: 0;
+    z-index: 10;
+    background: white;
     .acpm_image {
-      width: 70px;
-      height: 70px;
+      width: 44px;
+      height: 44px;
     }
     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>

package/src/components/misc/player/PlayerCompact.vue

@@ -18,13 +18,14 @@
       :class="{
         'saooti-play': isPaused,
         'saooti-pause': isPlaying,
-        '':!isPaused&&!isPlaying
+        'p-0':!isPaused&&!isPlaying
       }"
       class="btn play-button-box text-light bg-primary"
       @click="switchPausePlay"
     >
       <Spinner
         v-if="!isPaused&&!isPlaying"
+        :small="true"
       />
     </button>
     <div class="text-light player-grow-content">