@saooti/octopus-sdk 37.0.27 → 37.0.29

package/package.json

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

package/src/components/form/ClassicDatePicker.vue

@@ -4,6 +4,7 @@
     :time-picker="isTimePicker"
     :input-class-name="templateClass"
     :clearable="false"
+    :text-input="true"
     :readonly="readonly"
     :teleport="useTeleport"
     :locale="formatLocale"
@@ -17,6 +18,7 @@
     :inline="columnNumber > 1"
     :enable-time-picker="!isTimePicker ? displayTimePicker : undefined"
     :aria-labels="ariaLabels"
+    :max-time="maxTime"
     @update:model-value="$emit('updateDate', $event)"
   >
   </VueDatePicker>
@@ -47,6 +49,7 @@ export default defineComponent({
     useTeleport: { default: false, type: Boolean },
     templateClass: { default: undefined, type: String },
     readonly: { default: false, type: Boolean },
+    maxTime:{default: null, type: Object as () => { hours?: number | string; minutes?: number | string; seconds?: number | string }}
   },
 
   emits: ["updateDate", "update:date"],

package/src/components/misc/modal/ClassicModal.vue

@@ -1,25 +1,34 @@
 <template>
-  <div :id="idModal" class="octopus-modal">
-    <div class="octopus-modal-backdrop" />
-    <div class="octopus-modal-dialog">
+  <div :id="idModal" class="octopus-modal" :class="onlyHeader? 'octopus-only-header-modal':''">
+    <div class="octopus-modal-backdrop"/>
+    <div class="octopus-modal-dialog" >
       <div class="octopus-modal-content">
         <div class="octopus-modal-header">
           <h5 cclass="octopus-modal-title">
             {{ titleModal }}
           </h5>
-          <button
-            v-if="closable"
-            :ref="closable ? 'focusElement' : ''"
-            type="button"
-            class="btn-transparent text-light saooti-remove"
-            title="Close"
-            @click="$emit('close')"
-          />
+          <div class="d-flex align-items-center">
+            <button
+              v-if="canBeReduced"
+              class="btn-transparent text-light"
+              :class="onlyHeader? 'saooti-down':'saooti-up'"
+              :title="onlyHeader? $t('Enlarge'):$t('Reduce')"
+              @click="onlyHeader = !onlyHeader"
+            />
+            <button
+              v-if="closable"
+              :ref="closable ? 'focusElement' : ''"
+              type="button"
+              class="btn-transparent text-light saooti-remove"
+              :title="$t('Close')"
+              @click="$emit('close')"
+            />
+          </div>
         </div>
-        <div class="octopus-modal-body">
+        <div v-show="!onlyHeader" class="octopus-modal-body">
           <slot name="body" />
         </div>
-        <div class="octopus-modal-footer">
+        <div v-show="!onlyHeader" class="octopus-modal-footer">
           <slot name="footer" />
         </div>
       </div>
@@ -35,8 +44,14 @@ export default defineComponent({
     idModal: { default: undefined, type: String },
     titleModal: { default: undefined, type: String },
     closable: { default: true, type: Boolean },
+    canBeReduced: { default: false, type: Boolean },
   },
   emits: ["close"],
+  data() {
+    return {
+      onlyHeader: false as boolean,
+    };
+  },
   mounted() {
     (this.$refs.focusElement as HTMLElement)?.focus();
   },
@@ -67,6 +82,9 @@ export default defineComponent({
     height: 100vh;
     background-color: black;
   }
+  .octopus-modal.octopus-only-header-modal .octopus-modal-backdrop {
+    opacity: 0.1;
+  }
 
   .octopus-modal-dialog {
     position: relative;
@@ -103,8 +121,8 @@ export default defineComponent({
     padding: 1rem;
   }
 
-  .octopus-modal-dialog,
-  .octopus-modal-content {
+  .octopus-modal:not(.octopus-only-header-modal) .octopus-modal-dialog,
+  .octopus-modal:not(.octopus-only-header-modal) .octopus-modal-content {
     min-height: 300px;
   }
   .octopus-modal-content {

package/src/components/misc/modal/NewsletterModal.vue

@@ -274,14 +274,16 @@ export default defineComponent({
     ${this.emissionName}${this.description}`,
       ];
       html.push(
-        `</table>
-      <div style="font-family: Arial, sans-serif;font-size: 12px;line-height: 20px;background: #f3f3f3;vertical-align: middle;padding: 15px 10px;display: flex; align-items:center; flex-wrap:wrap">
-        <a href="${this.shareUrl}">
-          <img width="44" height="44" style="display: inline-block;vertical-align: middle" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAABmJLR0QA/wD/AP+gvaeTAAAAxElEQVRIie3WMWpCURBG4Q8FSRrtbC2SPhvICmzchVuwtXQLbsE2pVUIkjqQHVgqNmIj6EvxGHhFQAIvcxt/OPVhhrlzh3sKZ4MvTLLFVYNPvJYQB294LiGucMYSw2xxcMQcj9niYIsputni4BvjEuJgjZcS4goXrDDKFgcnLDDIFgd7zNDLFgfvTUHnL23ISJuV7iS3Ooarn1VxkeeUvkDSV2b6J3FQT+pDW8Jb4vRD4Kqe1Kf/Ev4mTj32PhQ6b+9pPT+XHgysHrPM6QAAAABJRU5ErkJggg=="/>
-        </a>
-        <a style="color: #000;text-decoration: none; margin-right:8px" href="${this.shareUrl}">${this.shareText}</a>
+      `</table>
+      <table width='100%' style="width:100%;background:#f3f3f3;font-family: Arial, sans-serif;font-size: 12px;line-height: 20px;">
+      <tr style="font-family: Arial, sans-serif;font-size: 12px;line-height: 20px;background: #f3f3f3;vertical-align: middle;padding: 15px 10px;display: flex; align-items:center; flex-wrap:wrap">
+        <td><a href="${this.shareUrl}">
+          <svg fill="#000000" height="30px" width="30px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 17.804 17.804" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <g id="c98_play"> <path d="M2.067,0.043C2.21-0.028,2.372-0.008,2.493,0.085l13.312,8.503c0.094,0.078,0.154,0.191,0.154,0.313 c0,0.12-0.061,0.237-0.154,0.314L2.492,17.717c-0.07,0.057-0.162,0.087-0.25,0.087l-0.176-0.04 c-0.136-0.065-0.222-0.207-0.222-0.361V0.402C1.844,0.25,1.93,0.107,2.067,0.043z"></path> </g> <g id="Capa_1_78_"> </g> </g> </g></svg>
+        </a></td>
+        <td style="margin-left:10px"><a style="color: #000;text-decoration: none; margin-right:8px" href="${this.shareUrl}">${this.shareText}</a></td>
         ${this.articleHtml}
-      </div>${this.participantsName}`,
+      </tr>
+      </table>${this.participantsName}`
       );
       return html.join("");
     },

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

@@ -10,6 +10,10 @@
   </div>
 </template>
 <script lang="ts">
+/* import { usePlayerStore } from "@/stores/PlayerStore";
+import { mapState } from "pinia";
+ */
+import { playerLive } from "../../mixins/player/playerLive";
 import videojs, { VideoJsPlayer } from "video.js";
 import qualitySelector from "videojs-hls-quality-selector";
 import qualityLevels from "videojs-contrib-quality-levels";
@@ -26,7 +30,7 @@ export default defineComponent({
   props: {
     hlsUrl: { default: "", type: String },
   },
-
+  mixins: [playerLive],
   emits: ["changeValid"],
   data() {
     return {
@@ -35,9 +39,15 @@ export default defineComponent({
       player: undefined as VideoJsPlayer | undefined,
       playing: false as boolean,
       stalledTimout: undefined as ReturnType<typeof setTimeout> | undefined,
+      //playerLive mixins
+      downloadId: null as string | null,
+      listenTime: 0 as number,
+      notListenTime: 0 as number,
+      lastSend: 0 as number,
     };
   },
   computed: {
+    /* ...mapState(usePlayerStore, ["playerLive"]), */
     videoElement(): HTMLVideoElement {
       return this.$refs.videoelement as HTMLVideoElement;
     },
@@ -68,10 +78,10 @@ export default defineComponent({
     },
   },
   mounted() {
-    this.playLive();
     this.useVideoSrc =
       "" !== this.videoElement.canPlayType("application/vnd.apple.mpegurl") &&
       !navigator.userAgent.includes("Android");
+    this.playLive();
   },
 
   beforeUnmount() {
@@ -90,6 +100,7 @@ export default defineComponent({
     async playLive(): Promise<void> {
       clearTimeout(this.stalledTimout);
       this.definedStalledTimeout();
+      await this.initLiveDownloadId();
       if (this.useVideoSrc) {
         this.playLiveIos();
         return;
@@ -105,6 +116,7 @@ export default defineComponent({
       this.player.on("timeupdate", () => {
         clearTimeout(this.stalledTimout);
         this.definedStalledTimeout();
+        this.onTimeUpdate();
       });
       this.player.on("error", (error) => {
         this.stopLive();
@@ -136,6 +148,7 @@ export default defineComponent({
       this.videoElement.ontimeupdate = async () => {
         clearTimeout(this.stalledTimout);
         this.definedStalledTimeout();
+        this.onTimeUpdate();
       };
       this.videoElement.src = this.hlsUrl;
     },
@@ -166,7 +179,23 @@ export default defineComponent({
       this.videoClean();
       this.playing = false;
     },
-  },
+   // onSeek
+
+    onTimeUpdate(): void {
+      if (!this.downloadId) { return;}
+      let currentTime = this.player?.currentTime() ?? this.videoElement.currentTime;
+      if (
+        this.playerLive &&
+        0 === this.listenTime &&
+        0 !==currentTime
+      ) {
+        this.notListenTime = currentTime;
+        this.listenTime = 1;
+      } else {
+        this.listenTime = currentTime - this.notListenTime;
+      }
+    },
+    },
 });
 </script>
 

package/src/components/mixins/imageProxy.ts

@@ -7,10 +7,11 @@ export default {
       }
       if (state.octopusApi.imageUrl && url.includes("http")) {
         const size = height ? "height=" + height : "width=" + width;
+        const encode = btoa(url).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
         return (
           state.octopusApi.imageUrl +
           "image/" +
-          btoa(url) +
+          encode +
           "?" +
           size +
           "&useWebp=true"

package/src/components/mixins/player/playerLogic.ts

@@ -40,6 +40,7 @@ export const playerLogic = defineComponent({
       "playerVolume",
       "playerStatus",
       "playerSeekTime",
+      "playerVideo"
     ]),
 
     audioUrl(): string {
@@ -82,6 +83,9 @@ export const playerLogic = defineComponent({
     playerLive: {
       deep: true,
       handler() {
+        if(this.playerVideo){
+          return;
+        }
         this.$nextTick(async () => {
           this.hlsReady = false;
           this.reInitPlayer();