@saooti/octopus-sdk 29.0.1 → 29.0.2

package/README.md

@@ -465,6 +465,7 @@ See [Configuration Reference](https://cli.vuejs.org/config/).
 
  * 29.0.0 Vue3
  * 29.0.1 Upgrade npm
+ * 29.0.2 Début de suppression bootstrap vue
 
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saooti/octopus-sdk",
-  "version": "29.0.1",
+  "version": "29.0.2",
   "private": false,
   "description": "Javascript SDK for using octopus",
   "author": "Saooti",
@@ -25,9 +25,11 @@
     "core-js": "^3.18.1",
     "hls.js": "^1.0.10",
     "humanize-duration": "^3.27.0",
+    "jquery": "^3.6.0",
     "luxon": "^2.0.2",
     "moment": "^2.29.0",
     "moment-locales-webpack-plugin": "^1.2.0",
+    "popper.js": "^1.16.1",
     "portal-vue": "^2.1.7",
     "qrcode.vue": "^3.3.2",
     "sass": "^1.42.1",
@@ -45,7 +47,9 @@
     "webpack": "^5.55.1"
   },
   "devDependencies": {
+    "@types/bootstrap": "^5.1.6",
     "@types/hls.js": "^1.0.0",
+    "@types/jquery": "^3.5.6",
     "@types/vue-datetime": "^1.0.1",
     "@typescript-eslint/eslint-plugin": "^4.32.0",
     "@typescript-eslint/parser": "^4.32.0",

package/src/assets/bootstrap-diff.scss

@@ -8,6 +8,7 @@
         }
     }
     .btn{
+        font-size:.7rem;
         border-radius: 50px;
         background: $octopus-light-secondary-color; 
         transition: background .2s, border .2s, box-shadow .2s, color .2s;
@@ -230,6 +231,9 @@
         //border: 1px solid #ddd;
         border-radius: 5px;
     }
+    .dropdown-toggle-no-caret::after{
+        display: none;
+      }    
     .dropdown-menu {
         padding: $dropdown-padding-y 0.5rem;
         @media (max-width: 450px) {

package/src/assets/form.scss

@@ -81,4 +81,23 @@ background: $octopus-primary-color;
 .theme-saooti .vdatetime-time-picker__item--selected,
 .theme-saooti .vdatetime-popup__actions__button {
 color: $octopus-primary-color;
+}
+
+//Navigation Bar
+.nav{
+	border-bottom: 0.05rem solid #ddd;
+	.nav-item{
+		flex-grow: 1;
+		text-align: center;
+		a {
+			color: black;
+		}
+		.nav-link{
+			border-bottom: 0.1rem solid transparent;
+		}
+		.active{
+		  border-bottom-color: $octopus-primary-color;
+    	color: $octopus-primary-color;
+		}
+	}
 }

package/src/assets/modal.scss

@@ -1,14 +1,13 @@
 //Modal
-.modal-mask {
-	position: fixed;
-	z-index: 9998;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
-	background-color: rgba(0, 0, 0, .5);
-	display: table;
-	transition: opacity .3s ease;
+.modal{
+	display: block;
+}
+.modal-backdrop{
+
+}
+.modal-backdrop {
+	opacity: 0.5;
+	z-index: 0;
 }
   
 .modal-wrapper {

package/src/components/display/categories/CategoryList.vue

@@ -14,28 +14,29 @@
         {{ category.name }}
       </button>
     </div>
-    <b-dropdown
+    <div
       v-show="hidenCategories.length"
-      right
-      toggle-class="text-decoration-none text-dark category-item category-item-plus"
-      no-caret
-      :aria-label="$t('See more')"
+      class="dropdown btn-group"
     >
-      <template #button-content>
-        <i
-          :aria-label="$t('See more')"
-          class="saooti-plus"
-        />
-      </template>
-      <b-dropdown-item
-        v-for="category in hidenCategories"
-        :key="category.id"
-        class="me-3"
-        @click="checkIfFilter(category)"
+      <button
+        class="btn dropdown-toggle btn-secondary text-decoration-none text-dark category-item category-item-plus dropdown-toggle-no-caret"
+        data-bs-toggle="dropdown"
+        aria-expanded="false"
+        :aria-label="$t('See more')"
       >
-        {{ category.name }}
-      </b-dropdown-item>
-    </b-dropdown>
+        <i class="saooti-plus" />
+      </button>
+      <ul class="dropdown-menu dropdown-menu-right px-4">
+        <div
+          v-for="category in hidenCategories"
+          :key="category.id"
+          class="me-3 dropdown-item"
+          @click="checkIfFilter(category)"
+        >
+          {{ category.name }}
+        </div>
+      </ul>
+    </div>
   </div>
 </template>
 

package/src/components/display/comments/AddCommentModal.vue

@@ -1,73 +1,73 @@
 <template>
-  <div>
-    <b-modal
-      id="add-comment-modal"
-      :title="$t('Welcome, thanks for your comment')"
-      :show="true"
-      @close="closePopup"
-      @hide="closePopup"
-      @cancel="closePopup"
-    >
-      <template
-        v-if="!sending"
-        #default
-      >
-        <div>{{ $t("Let's get acquainted :") }}</div>
-        <input
-          v-model="name"
-          class="form-input"
-          type="text"
-          :placeholder="$t('Your name')"
-        >
-        <div
-          v-if="sendError"
-          class="mt-1 text-danger"
-        >
-          {{ $t('Recaptcha error') }}
+  <div
+    id="add-comment-modal"
+    class="modal"
+  >
+    <div class="modal-backdrop" />
+    <div class="modal-dialog">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title">
+            {{ $t('Welcome, thanks for your comment') }}
+          </h5>
         </div>
-        <div
-          v-if="isCaptchaTest"
-          class="mt-1 text-danger"
-        >
-          {{ $t('Recaptcha not active') }}
+        <div class="modal-body">
+          <template v-if="!sending">
+            <div>{{ $t("Let's get acquainted :") }}</div>
+            <input
+              v-model="name"
+              class="form-input"
+              type="text"
+              :placeholder="$t('Your name')"
+            >
+            <div
+              v-if="sendError"
+              class="mt-1 text-danger"
+            >
+              {{ $t('Recaptcha error') }}
+            </div>
+            <div
+              v-if="isCaptchaTest"
+              class="mt-1 text-danger"
+            >
+              {{ $t('Recaptcha not active') }}
+            </div>
+          </template>
+          <template v-else>
+            <div>{{ $t('Send in progress') }}</div>
+          </template>
         </div>
-      </template>
-      <template
-        v-else
-        #default
-      >
-        <div>{{ $t('Send in progress') }}</div>
-      </template>
-      <template
-        v-if="!sending"
-        #modal-footer
-      >
-        <button
-          class="btn btn-light m-1"
-          @click="closePopup"
-        >
-          {{ $t('Cancel') }}
-        </button>
-        <button
-          class="btn btn-primary m-1"
-          :disabled="name.length <= 2"
-          @click="recaptcha"
-        >
-          {{ $t('Validate') }}
-        </button>
-      </template>
-      <template
-        v-else
-        #modal-footer
-      >
-        <button
-          class="btn m-1"
-          @click="closePopup"
-        >
-          {{ $t('Close') }}
-        </button>
-      </template>
-    </b-modal>
+        <div class="modal-footer">
+          <template
+            v-if="!sending"
+          >
+            <button
+              class="btn btn-light m-1"
+              @click="closePopup"
+            >
+              {{ $t('Cancel') }}
+            </button>
+            <button
+              class="btn btn-primary m-1"
+              :disabled="name.length <= 2"
+              @click="recaptcha"
+            >
+              {{ $t('Validate') }}
+            </button>
+          </template>
+          <template
+            v-else
+          >
+            <button
+              class="btn m-1"
+              @click="closePopup"
+            >
+              {{ $t('Close') }}
+            </button>
+          </template>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 

package/src/components/display/comments/CommentItem.vue

@@ -19,16 +19,13 @@
           <b
             :id="'popover-comment' + comment.comId"
             class="me-2 text-danger"
+            data-bs-toggle="popover"
+            data-bs-trigger="hover focus"
+            :data-bs-content="$t('Comment waiting')"
+            data-bs-custom-class="wizard-help"
           >{{
             comment.name
           }}</b>
-          <b-popover
-            :target="'popover-comment' + comment.comId"
-            triggers="hover"
-            custom-class="wizard-help"
-          >
-            {{ $t('Comment waiting') }}
-          </b-popover>
         </template>
       </template>
       <template v-else>
@@ -177,6 +174,7 @@ import { CommentPodcast } from '@/store/class/comment';
 import { Podcast } from '@/store/class/podcast';
 import { Conference } from '@/store/class/conference';
 const moment = require('moment');
+const bootstrap = require('bootstrap/dist/js/bootstrap.esm.min.js');
 import { defineComponent, defineAsyncComponent } from 'vue';
 const CommentInput = defineAsyncComponent(() => import('./CommentInput.vue'));
 const CommentParentInfo = defineAsyncComponent(() => import('./CommentParentInfo.vue'));
@@ -262,6 +260,11 @@ export default defineComponent({
       );
     },
   },
+  mounted(){
+    Array.from(document.querySelectorAll('b[data-bs-toggle="popover"]')).forEach(popoverNode => new bootstrap.Popover(popoverNode,{
+      trigger: 'hover focus'
+    }));
+  },
   methods: {
     answerComment(): void {
       this.collapseVisible = true;

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

@@ -238,9 +238,11 @@ export default defineComponent({
       )
         return undefined;
       const rubrique = this.rubriques.find(
-        (element: Rubrique) => emission.rubriqueIds.includes(element.rubriqueId!) && element.rubriquageId === parseInt(this.displayRubriquage)
+        (element: Rubrique) => element.rubriqueId && emission.rubriqueIds.includes(element.rubriqueId) && element.rubriquageId === parseInt(this.displayRubriquage)
       );
-      return rubrique!.name;
+      if(rubrique){
+        return rubrique.name;
+      }
     },
     mainRubriquage(emission: Emission): string {
       if (

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

@@ -149,38 +149,51 @@
         <div class="primary-color mb-2 padding-left-custom-radio">
           {{ $t('Sort') }}
         </div>
-        <b-form-radio-group
-          v-model="sort"
-          class="d-flex flex-column"
+        <div
+          v-if="isSearchBar"
+          class="form-check"
         >
-          <b-form-radio
-            v-if="isSearchBar"
+          <input
+            id="radio_score"
+            v-model="sort"
+            class="form-check-input"
+            type="radio"
+            name="sortRadio"
             value="SCORE"
           >
-            {{
-              $t('Sort score')
-            }}
-          </b-form-radio>
-          <b-form-radio
-            v-if="isEmission"
-            value="LAST_PODCAST_DESC"
+          <label
+            class="form-check-label"
+            for="radio_score"
+          >{{ $t('Sort score') }}</label>
+        </div>
+        <div class="form-check">
+          <input
+            id="radio_podcast"
+            v-model="sort"
+            class="form-check-input"
+            type="radio"
+            name="sortRadio"
+            :value="isEmission?'LAST_PODCAST_DESC':'DATE'"
           >
-            {{
-              $t('Sort last')
-            }}
-          </b-form-radio>
-          <b-form-radio
-            v-else
-            value="DATE"
+          <label
+            class="form-check-label"
+            for="radio_podcast"
+          >{{ $t('Sort last') }}</label>
+        </div>
+        <div class="form-check">
+          <input
+            id="radio_name"
+            v-model="sort"
+            class="form-check-input"
+            type="radio"
+            name="sortRadio"
+            value="NAME"
           >
-            {{
-              $t('Sort last')
-            }}
-          </b-form-radio>
-          <b-form-radio value="NAME">
-            {{ $t('Sort name') }}
-          </b-form-radio>
-        </b-form-radio-group>
+          <label
+            class="form-check-label"
+            for="radio_name"
+          >{{ $t('Sort name') }}</label>
+        </div>
       </div>
     </div>
   </div>

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

@@ -6,14 +6,16 @@
     {{ title }}
     <span
       :id="idPopover"
-      class="saooti-help m-0"
+      class="saooti-help m-0 c-hand"
+      data-bs-toggle="popover"
+      data-bs-trigger="hover focus"
       :aria-label="$t('Help')"
+      data-bs-custom-class="participant-help"
     />
     <span class="mx-1">:</span>
-    <b-popover
-      :target="idPopover"
-      triggers="hover"
-      custom-class="participant-help"
+    <div
+      :id="idPopover+'content'"
+      class="d-none"
     >
       <div class="text-center fw-bold">
         {{ title }}
@@ -32,7 +34,7 @@
         />
         <div class="horizontal-separator my-1" />
       </div>
-    </b-popover>
+    </div>
     <router-link
       v-for="participant in participants"
       :key="participant.participantId"
@@ -52,6 +54,7 @@
 </template>
 
 <script lang="ts">
+const bootstrap = require('bootstrap/dist/js/bootstrap.esm.min.js');
 import { Participant } from '@/store/class/participant';
 import { defineComponent } from 'vue'
 export default defineComponent({
@@ -80,6 +83,17 @@ export default defineComponent({
       return this.$t('Animated by').toString();
     }
   },
+  mounted(){
+    const contentPopover = document.querySelector('#'+this.idPopover+'content');
+    if(contentPopover){
+      new bootstrap.Popover(document.querySelector('#'+this.idPopover),{
+        trigger: 'hover focus',
+        html: true,
+        content: (contentPopover as HTMLElement).innerHTML
+      });
+    }
+    
+  },
 
   methods: {
     getName(person: any): string {

package/src/components/display/rubriques/RubriqueList.vue

@@ -27,28 +27,29 @@
         {{ rubrique.name }}
       </button>
     </div>
-    <b-dropdown
+    <div
       v-show="hidenRubriques.length"
-      right
-      toggle-class="text-decoration-none text-dark rubrique-item rubrique-item-plus"
-      no-caret
-      :aria-label="$t('See more')"
+      class="dropdown btn-group"
     >
-      <template #button-content>
-        <i
-          :aria-label="$t('See more')"
-          class="saooti-plus"
-        />
-      </template>
-      <b-dropdown-item
-        v-for="rubrique in hidenRubriques"
-        :key="rubrique.rubriqueId"
-        class="me-3"
-        @click="addFilter(rubrique)"
+      <button
+        class="btn dropdown-toggle btn-secondary text-decoration-none text-dark category-item category-item-plus dropdown-toggle-no-caret"
+        data-bs-toggle="dropdown"
+        aria-expanded="false"
+        :aria-label="$t('See more')"
       >
-        {{ rubrique.name }}
-      </b-dropdown-item>
-    </b-dropdown>
+        <i class="saooti-plus" />
+      </button>
+      <ul class="dropdown-menu dropdown-menu-right px-4">
+        <div
+          v-for="rubrique in hidenRubriques"
+          :key="rubrique.rubriqueId"
+          class="me-3 dropdown-item"
+          @click="addFilter(rubrique)"
+        >
+          {{ rubrique.name }}
+        </div>
+      </ul>
+    </div>
   </div>
 </template>
 

package/src/components/display/sharing/PlayerParameters.vue

@@ -37,23 +37,27 @@
               v-if="!podcast || isEmission || isLargeEmission"
               class="d-flex align-items-center w-100 flex-wrap mt-1"
             >
-              <b-form-radio
+              <input
                 v-model="episodeNumbers"
+                class="form-check-input"
+                type="radio"
                 name="episodeNumbers"
                 value="all"
-              />
+              >
               <span class="flex-shrink">{{ $t('Show every episode') }}</span>
             </div>
             <div
               class="d-flex align-items-center flex-wrap"
               :class="!podcast || isEmission || isLargeEmission ? '' : 'mt-3'"
             >
-              <b-form-radio
+              <input
                 v-if="!podcast || isEmission || isLargeEmission"
                 v-model="episodeNumbers"
+                class="form-check-input"
+                type="radio"
                 name="episodeNumbers"
                 value="number"
-              />
+              >
               <span class="flex-shrink">{{ $t('Show') }}</span>
               <input
                 id="number-input"

package/src/components/display/sharing/ShareButtons.vue

@@ -12,19 +12,13 @@
       </h3>
       <span
         v-if="authenticated"
-        id="popover-share-help"
-        class="saooti-help ms-2"
+        id="share-button-popover"
+        class="saooti-help ms-2 c-hand"
+        data-bs-toggle="popover"
+        data-bs-trigger="hover focus"
         :aria-label="$t('Help')"
+        :data-bs-content="$t('Share this page without edit and share blocks')"
       />
-      <b-popover
-        v-if="authenticated"
-        target="popover-share-help"
-        triggers="hover"
-        placement="right"
-        custom-class="wizard-help"
-      >
-        {{ $t('Share this page without edit and share blocks') }}
-      </b-popover>
     </div>
     <div
       class="d-flex"
@@ -253,6 +247,7 @@ import { Podcast } from '@/store/class/podcast';
 import { state } from '../../../store/paramStore';
 import Snackbar from '../../misc/Snackbar.vue';
 import { displayMethods } from '../../mixins/functions';
+const bootstrap = require('bootstrap/dist/js/bootstrap.esm.min.js');
 import { defineComponent, defineAsyncComponent } from 'vue';
 const ClipboardModal = defineAsyncComponent(() => import('../../misc/modal/ClipboardModal.vue'));
 const NewsletterModal = defineAsyncComponent(() => import('../../misc/modal/NewsletterModal.vue'));
@@ -331,6 +326,11 @@ export default defineComponent({
   created(){
     this.isMobile = this.checkIfDeviceMobile();
   },
+  mounted(){
+    new bootstrap.Popover(document.querySelector('#share-button-popover'),{
+      trigger: 'hover focus'
+    });
+  },
   methods: {
     openPopup(): void {
       this.dataRSSSave = !this.dataRSSSave;