@saooti/octopus-sdk 30.0.7 → 30.0.11

package/src/components/misc/HomeDropdown.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="d-flex align-items-center justify-content-end flex-no-wrap top-bar-dropdown"
+    class="top-bar-dropdown"
   >
     <div
       v-if="authenticated"
@@ -17,46 +17,37 @@
         data-bs-toggle="dropdown"
         aria-expanded="false"
       />
-      <ul class="dropdown-menu dropdown-menu-right px-4">
-        <li>
-          <router-link
-            v-if="isContribution && !isPodcastmaker"
-            to="/main/priv/upload"
-            class="align-self-center w-100"
-          >
-            <button class="btn btn-primary w-100 mb-2">
-              {{ $t('Upload') }}
-            </button>
-          </router-link>
-        </li>
-        <li v-if="!isPodcastmaker">
+      <div class="dropdown-menu dropdown-menu-right px-4">
+        <router-link
+          v-if="isContribution && !isPodcastmaker"
+          class="btn btn-primary w-100"
+          to="/main/priv/upload"
+        >
+          {{ $t('Upload') }}
+        </router-link>
+        <template v-if="!isPodcastmaker">
           <router-link
             to="/main/priv/backoffice"
-            class="linkSpace dropdown-item"
+            class="show-phone dropdown-item"
           >
             {{ $t('My space') }}
           </router-link>
-        </li>
-        <li v-if="!isPodcastmaker">
           <router-link
             class="dropdown-item"
             to="/main/priv/edit/profile"
           >
             {{ $t('Edit my profile') }}
           </router-link>
-        </li>
-        <li v-if="!isPodcastmaker && isOrganisation">
           <router-link
+            v-if="isOrganisation"
             class="dropdown-item"
             to="/main/priv/edit/organisation"
           >
             {{ $t('Edit my organisation') }}
           </router-link>
-        </li>
-        <li v-if="!isEducation">
+        </template>
+        <template v-if="!isEducation">
           <hr class="dropdown-divider">
-        </li>
-        <li v-if="!isEducation">
           <a
             href="https://help.octopus.saooti.com/Aide/"
             class="dropdown-item"
@@ -65,8 +56,6 @@
           >
             {{ $t('Help') }}
           </a>
-        </li>
-        <li v-if="!isEducation">
           <a
             href="https://help.octopus.saooti.com/"
             class="dropdown-item"
@@ -75,50 +64,41 @@
           >
             {{ $t('TutoMag') }}
           </a>
-        </li>
-        <li><hr class="dropdown-divider"></li>
-        <li v-if="!isEducation">
+          <hr class="dropdown-divider">
           <a
             class="dropdown-item"
             href="/sso/logout"
           >
             {{ $t('Logout') }}
           </a>
-        </li>
-      </ul>
+        </template>
+      </div>
     </div>
     <div
       v-else
       class="dropdown btn-group"
     >
       <button
-        class="btn dropdown-toggle btn-secondary text-decoration-none m-1 admin-button btn-rounded-icon dropdown-toggle-no-caret"
+        class="btn dropdown-toggle m-1 admin-button dropdown-toggle-no-caret saooti-user-octopus"
         data-bs-toggle="dropdown"
         aria-expanded="false"
-      >
-        <i class="saooti-user-octopus text-dark" />
-        <span class="visually-hidden">Profile</span>
-      </button>
-      <ul class="dropdown-menu dropdown-menu-right px-4">
-        <li>
-          <a
-            class="dropdown-item"
-            href="/sso/login"
-          >
-            {{ $t('Login') }}
-          </a>
-        </li>
-        <li v-if="!isPodcastmaker">
-          <router-link
-            class="dropdown-item"
-            to="/main/pub/create"
-          >
-            {{
-              $t('Create an account')
-            }}
-          </router-link>
-        </li>
-      </ul>
+        aria-label="Profile"
+      />
+      <div class="dropdown-menu dropdown-menu-right px-4">
+        <a
+          class="dropdown-item"
+          href="/sso/login"
+        >
+          {{ $t('Login') }}
+        </a>
+        <router-link
+          v-if="!isPodcastmaker"
+          class="dropdown-item"
+          to="/main/pub/create"
+        >
+          {{ $t('Create an account') }}
+        </router-link>
+      </div>
     </div>
   </div>
 </template>
@@ -133,12 +113,6 @@ export default defineComponent({
     isEducation: { default: false, type: Boolean},
   },
 
-  data() {
-    return {
-      showMenu: false as boolean
-    };
-  },
-
   computed: {
     isPodcastmaker(): boolean {
       return (state.generalParameters.podcastmaker as boolean);
@@ -154,7 +128,6 @@ export default defineComponent({
     },
   },
 
-
   methods: {
     goToUrl(url: string): void {
       if (this.authenticated) {
@@ -167,19 +140,24 @@ export default defineComponent({
 
 <style lang="scss">
 .top-bar-dropdown {
+  display: flex;
+  align-items: center;
+
   .main-button-dropdown {
     padding-bottom: 0.4rem;
     width: 140px;
     text-align: left;
     padding-left: 15px;
     margin-right: 30px;
+    @media (max-width: 650px) {
+      display: none;
+    }
   }
   .btn-group .dropdown-toggle-split {
     align-items: center;
-    border-radius: 50% !important;
+    border-radius: 50%;
     width: 40px !important;
     height: 40px !important;
-    display: flex;
     justify-content: center;
     position: absolute;
     right: 5px;
@@ -190,32 +168,5 @@ export default defineComponent({
       right: auto;
     }
   }
-  .dropdown-header {
-    display: flex;
-    align-items: center;
-    font-weight: bold;
-  }
-  .linkSpace {
-    display: none;
-  }
-
-  /** PHONES*/
-  @media (max-width: 1200px) {
-    .linkSpace {
-      display: block;
-    }
-  }
-  @media (max-width: 650px) {
-    .dropdown {
-      .main-button-dropdown {
-        display: none;
-      }
-    }
-    .btn-group .dropdown-toggle-split {
-      height: 30px;
-      width: 30px;
-      border-radius: 50% !important;
-    }
-  }
 }
 </style>

package/src/components/misc/LeftMenu.vue

@@ -3,114 +3,101 @@
     v-show="displayMenu"
     class="left-menu-container"
   >
-    <div class="routes-container h5">
-      <router-link
-        class="text-dark fw-bold mb-3 show-phone home-route"
-        :to="{
-          name: 'home',
-          query: { productor: $store.state.filter.organisationId,
-                   iabId: $store.state.filter.iab ? $store.state.filter.iab.id : undefined,
-                   rubriquesId: rubriqueQueryParam},
-        }"
-        @click="onMenuClick"
-      >
-        {{ $t('Home') }}
-      </router-link>
-      <router-link
-        v-if="isLiveTab && filterOrga && filterOrgaLive"
-        class="text-dark fw-bold mb-3 live-route"
-        :to="{
-          name: 'lives',
-          query: { productor: $store.state.filter.organisationId},
-        }"
-        @click="onMenuClick"
-      >
-        {{ $t('Live') }}
-      </router-link>
-      <router-link
-        class="text-dark fw-bold mb-3 podcasts-route"
-        :to="{
-          name: 'podcasts',
-          query: { productor: $store.state.filter.organisationId,
-                   iabId: $store.state.filter.iab ? $store.state.filter.iab.id : undefined,
-                   rubriquesId: rubriqueQueryParam},
-        }"
-        @click="onMenuClick"
-      >
-        {{ $t('Podcasts') }}
-      </router-link>
-      <router-link
-        class="text-dark fw-bold mb-3 emissions-route"
-        :to="{
-          name: 'emissions',
-          query: { productor: $store.state.filter.organisationId,
-                   iabId: $store.state.filter.iab ? $store.state.filter.iab.id : undefined ,
-                   rubriquesId: rubriqueQueryParam},
-        }"
-        @click="onMenuClick"
-      >
-        {{ $t('Emissions') }}
-      </router-link>
-      <router-link
-        v-if="!isPodcastmaker && (!filterOrga || isEducation)"
-        class="text-dark fw-bold mb-3 productors-route"
-        :to="{
-          name: 'productors',
-          query: { productor: $store.state.filter.organisationId },
-        }"
-        @click="onMenuClick"
-      >
-        {{ $t('Productors') }}
-      </router-link>
-      <router-link
-        class="text-dark fw-bold mb-3 participants-route"
-        :to="{
-          name: 'participants',
-          query: { productor: $store.state.filter.organisationId },
-        }"
-        @click="onMenuClick"
-      >
-        {{ $t('Speakers') }}
-      </router-link>
-      <router-link
-        :to="{
-          name: 'playlists',
-          query: { productor: $store.state.filter.organisationId },
-        }"
-        class="linkHover pb-3 text-dark fw-bold playlists-route"
-        @click="onMenuClick"
-      >
-        {{ $t('Playlists') }}
-      </router-link>
-      <OrganisationChooserLight
-        v-if="!isPodcastmaker"
-        width="auto"
-        page="leftMenu"
-        :defaultanswer="$t('No organisation filter')"
-        :value="organisationId"
-        :light="true"
-        class="me-2 hide-top-bar"
-        :reset="reset"
-        @selected="onOrganisationSelected"
-      />
-      <hr class="divided-line show-phone">
-      <router-link
-        v-for="category in categories"
-        :key="category.id"
-        class="text-dark fw-bold mb-3 show-phone category-route"
-        :to="{
-          name: 'category',
-          params: { iabId: category.id },
-          query: { productor: $store.state.filter.organisationId },
-        }"
-        @click="onMenuClick"
-      >
-        {{ category.name }}
-      </router-link>
-      <div class="d-flex hostedBy">
-        <span>{{ $t('Hosted by') }}</span><span class="ms-1 me-1 primary-color">Saooti</span>
-      </div>
-    </div>
+    <router-link
+      class="show-phone"
+      :to="{
+        name: 'home',
+        query: { productor: $store.state.filter.organisationId,
+                 iabId: $store.state.filter.iab ? $store.state.filter.iab.id : undefined,
+                 rubriquesId: rubriqueQueryParam},
+      }"
+      @click="onMenuClick"
+    >
+      {{ $t('Home') }}
+    </router-link>
+    <router-link
+      v-if="isLiveTab && filterOrga && filterOrgaLive"
+      :to="{
+        name: 'lives',
+        query: { productor: $store.state.filter.organisationId},
+      }"
+      @click="onMenuClick"
+    >
+      {{ $t('Live') }}
+    </router-link>
+    <router-link
+      :to="{
+        name: 'podcasts',
+        query: { productor: $store.state.filter.organisationId,
+                 iabId: $store.state.filter.iab ? $store.state.filter.iab.id : undefined,
+                 rubriquesId: rubriqueQueryParam},
+      }"
+      @click="onMenuClick"
+    >
+      {{ $t('Podcasts') }}
+    </router-link>
+    <router-link
+      :to="{
+        name: 'emissions',
+        query: { productor: $store.state.filter.organisationId,
+                 iabId: $store.state.filter.iab ? $store.state.filter.iab.id : undefined ,
+                 rubriquesId: rubriqueQueryParam},
+      }"
+      @click="onMenuClick"
+    >
+      {{ $t('Emissions') }}
+    </router-link>
+    <router-link
+      v-if="!isPodcastmaker && (!filterOrga || isEducation)"
+      :to="{
+        name: 'productors',
+        query: { productor: $store.state.filter.organisationId },
+      }"
+      @click="onMenuClick"
+    >
+      {{ $t('Productors') }}
+    </router-link>
+    <router-link
+      :to="{
+        name: 'participants',
+        query: { productor: $store.state.filter.organisationId },
+      }"
+      @click="onMenuClick"
+    >
+      {{ $t('Speakers') }}
+    </router-link>
+    <router-link
+      :to="{
+        name: 'playlists',
+        query: { productor: $store.state.filter.organisationId },
+      }"
+      @click="onMenuClick"
+    >
+      {{ $t('Playlists') }}
+    </router-link>
+    <OrganisationChooserLight
+      v-if="!isPodcastmaker"
+      width="auto"
+      page="leftMenu"
+      :defaultanswer="$t('No organisation filter')"
+      :value="organisationId"
+      :reset="reset"
+      @selected="onOrganisationSelected"
+    />
+    <hr class="show-phone">
+    <router-link
+      v-for="category in categories"
+      :key="category.id"
+      class="show-phone"
+      :to="{
+        name: 'category',
+        params: { iabId: category.id },
+        query: { productor: $store.state.filter.organisationId },
+      }"
+      @click="onMenuClick"
+    >
+      {{ category.name }}
+    </router-link>
   </div>
 </template>
 
@@ -217,46 +204,25 @@ export default defineComponent({
   background: #fff;
   width: 20%;
   padding: 2rem;
+  display: flex;
+  flex-direction: column;
+  font-size: 0.9rem;
 
-  .routes-container {
-    display: flex;
-    flex-direction: column;
-    font-size: 0.9rem;
+  a{
+    color: black !important;
+    font-weight: bold;
+    margin-bottom: 1rem;
   }
-  .hostedBy {
-    font-size: 0.6rem;
-    position: absolute;
-    bottom: 10px;
-    right: 0;
-  }
-}
-/** PHONES*/
-@media (max-width: 960px) {
-  .left-menu-container {
+  /** PHONES*/
+  @media (max-width: 960px) {
     width: 75%;
     max-height: 80%;
-    left: 0.5rem;
     top: 2.5rem;
-    padding-left: 1rem;
-    font-size: 0.5rem;
-    border-radius: 0.5rem;
-    box-shadow: 0 0.2rem 1rem rgba(79, 83, 90, 0.3);
-
-    .routes-container {
-      overflow-y: scroll;
-      height: 100%;
-    }
-  }
-  .divided-line {
-    margin: 0.5rem 0;
-    border-top: 1px solid lightgray;
+    overflow-y: auto;
+    height: 100%;
   }
-}
-@media (max-width: 450px) {
-  .left-menu-container {
+  @media (max-width: 450px) {
     width: 94%;
-    font-size: 0.3rem;
-    padding: 2rem 0 1.5rem 1rem;
   }
 }
 </style>

package/src/components/misc/Player.vue

@@ -10,7 +10,7 @@
     >
       <div
         v-if="isBarTop"
-        class="progress secondary-bg c-hand"
+        class="progress c-hand"
         @mouseup="seekTo"
       >
         <div
@@ -25,12 +25,12 @@
       </div>
       <div
         v-if="display"
-        class="d-flex align-items-center justify-center flex-grow pe-5 ps-5"
+        class="d-flex align-items-center flex-grow-1 px-5"
       >
         <audio
           v-if="!live"
           id="audio-player"
-          :src="audioUrl"
+          :src="!live? audioUrl: undefined"
           autoplay
           @timeupdate="onTimeUpdate"
           @ended="onFinished"
@@ -38,16 +38,6 @@
           @durationChange="onTimeUpdate"
           @error="onError"
         />
-        <audio
-          v-else
-          id="audio-player"
-          src
-          @timeupdate="onTimeUpdate"
-          @ended="onFinished"
-          @playing="onPlay"
-          @durationChange="onTimeUpdate"
-          @error="onError"
-        />
         <PlayerButtons
           :player-error="playerError"
         />
@@ -135,7 +125,7 @@ export default defineComponent({
       },
     }),
     audioUrl(): string {
-      if (this.media) return this.media.audioUrl;
+      if (this.media) return this.media.audioUrl? this.media.audioUrl:"";
       if (!this.podcast) return '';
       if (!this.podcast.availability.visibility)
         return this.podcast.audioStorageUrl;
@@ -163,11 +153,11 @@ export default defineComponent({
     live: {
       deep: true,
       async handler(){
-      this.hlsReady = false;
-      this.setDownloadId(null);
-      this.listenError = false;
-      await this.playLive();
-      this.initComments();
+        this.hlsReady = false;
+        this.setDownloadId(null);
+        this.listenError = false;
+        await this.playLive();
+        this.initComments();
       }
     },
     playerHeight(): void {
@@ -176,9 +166,9 @@ export default defineComponent({
     podcast: {
       deep: true,
       handler(){
-      this.setDownloadId(null);
-      this.listenError = false;
-      this.initComments();
+        this.setDownloadId(null);
+        this.listenError = false;
+        this.initComments();
       }
     },
     async listenTime(newVal): Promise<void> {
@@ -479,7 +469,6 @@ export default defineComponent({
   flex-direction: column;
   transition: height 1s;
   background: #282828 !important;
-  max-width: 100%;
   font-size: 1rem;
 
   .player-progress-border {
@@ -487,13 +476,10 @@ export default defineComponent({
     width: 3px;
     background: black;
   }
-}
-@media (max-width: 960px) {
-  .player-container {
+
+  @media (max-width: 960px) {
     .d-flex {
-      @media (max-width: 960px) {
-        flex-wrap: nowrap !important;
-      }
+      flex-wrap: nowrap !important;
     }
   }
 }