@saooti/octopus-sdk 33.2.6 → 33.2.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saooti/octopus-sdk",
-  "version": "33.2.6",
+  "version": "33.2.7",
   "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"

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/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

@@ -3,88 +3,55 @@
     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"
   >
-    <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>
@@ -116,15 +83,6 @@ export default defineComponent({
     };
   },
   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'},
@@ -190,9 +148,13 @@ 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;

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">