@saooti/octopus-sdk 32.0.25 → 32.0.27

package/README.md

@@ -669,4 +669,6 @@ See [Configuration Reference](https://cli.vuejs.org/config/).
  * 32.0.22 Popover
  * 32.0.23 Popover encore
  * 32.0.24 CDI podcastmaker
- * 32.0.25 #11391
+ * 32.0.25 #11391
+ * 32.0.26 Image Proxy
+ * 32.0.27 Image Proxy -> webp

package/index.ts

@@ -59,6 +59,7 @@ import ListPaginate from "./src/components/display/list/ListPaginate.vue";
 import {selenium} from "./src/components/mixins/functions";
 import {cookies} from "./src/components/mixins/functions";
 import {displayMethods} from "./src/components/mixins/functions";
+import {imageProxy} from "./src/components/mixins/functions";
 import {orgaFilter} from "./src/components/mixins/organisationFilter";
 import {initSDK} from "./src/components/mixins/init";
 import {tagOfMixins} from "./src/components/mixins/tagOfMixins";
@@ -101,6 +102,7 @@ const components = {
     HomeDropdown,
     ErrorMessage,
     displayMethods,
+    imageProxy,
     Rubrique,
     CategoryFilter,
     orgaFilter,
@@ -161,6 +163,7 @@ export {
     HomeDropdown,
     ErrorMessage,
     displayMethods,
+    imageProxy,
     Rubrique,
     CategoryFilter,
     orgaFilter,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saooti/octopus-sdk",
-  "version": "32.0.25",
+  "version": "32.0.27",
   "private": false,
   "description": "Javascript SDK for using octopus",
   "author": "Saooti",
@@ -14,7 +14,7 @@
     "prettify": "prettier --single-quote --trailing-comma es5 --write src/**/**/**/*.{js,vue}"
   },
   "dependencies": {
-    "@saooti/octopus-api": "^0.32.0",
+    "@saooti/octopus-api": "^0.32.2",
     "@vue/cli": "^5.0.8",
     "@vue/compat": "^3.2.37",
     "autoprefixer": "^10.4.8",

package/src/api/classicCrud.ts

@@ -11,6 +11,8 @@ enum ModuleApi {
     RSS=7,
     STORAGE = 8,
     STUDIO = 9,
+    PROCESSOR= 10,
+    IMAGE=11
   }
 /* eslint-disable */
 export default {

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

@@ -12,7 +12,7 @@
       class="d-flex flex-grow-1 text-dark"
     >
       <img
-        v-lazy="emission.imageUrl"
+        v-lazy="proxyImageUrl(emission.imageUrl, '260')"
         class="img-box"
         :title="$t('Emission name image', {name:emission.name})"
         :alt="$t('Emission name image', {name:emission.name})"
@@ -63,13 +63,13 @@ import { orgaComputed } from '../../mixins/orgaComputed';
 import { Emission } from '@/store/class/general/emission';
 import { state } from '../../../store/paramStore';
 import octopusApi from '@saooti/octopus-api';
-import { displayMethods } from '../../mixins/functions';
+import { displayMethods, imageProxy } from '../../mixins/functions';
 import { defineComponent } from 'vue'
 import { Podcast } from '@/store/class/general/podcast';
 export default defineComponent({
   name: 'EmissionItem',
 
-  mixins: [displayMethods, orgaComputed],
+  mixins: [displayMethods, orgaComputed, imageProxy],
 
   props: {
     emission: { default: ()=>({}), type: Object as ()=> Emission},

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

@@ -40,7 +40,6 @@
             class="m-3 flex-shrink-0"
             :class="mainRubriquage(e)"
             :rubrique-name="rubriquesId(e)"
-            @emissionNotVisible="displayCount--"
           />
         </template>
       </div>

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

@@ -20,7 +20,7 @@
         class="img-box rounded-0"
       >
         <img
-          v-lazy="emission.imageUrl"
+          v-lazy="proxyImageUrl(emission.imageUrl, '260')"
           :title="$t('Emission name image', {name:emission.name})"
           :alt="$t('Emission name image', {name:emission.name})"
           class="img-box rounded-0"
@@ -143,7 +143,7 @@ import { Emission } from '@/store/class/general/emission';
 import { Podcast } from '@/store/class/general/podcast';
 import { state } from '../../../store/paramStore';
 import PodcastPlayBar from '../podcasts/PodcastPlayBar.vue';
-import { displayMethods } from '../../mixins/functions';
+import { displayMethods, imageProxy } from '../../mixins/functions';
 import { defineComponent } from 'vue'
 export default defineComponent({
   name: 'EmissionPlayerItem',
@@ -151,7 +151,7 @@ export default defineComponent({
   components:{
     PodcastPlayBar
   },
-  mixins: [displayMethods],
+  mixins: [displayMethods, imageProxy],
   props: {
     emission: { default: ()=>({}), type: Object as ()=>Emission },
     nbPodcasts: { default: undefined, type: Number },

package/src/components/display/organisation/OrganisationChooser.vue

@@ -45,7 +45,7 @@
         <div class="multiselect-octopus-proposition">
           <img
             v-if="!light"
-            v-lazy="option.imageUrl"
+            v-lazy="proxyImageUrl(option.imageUrl, '32')"
             class="option__image"
             :alt="option.name"
           >
@@ -65,7 +65,7 @@
         >
           <img
             v-if="!light"
-            v-lazy="option.imageUrl"
+            v-lazy="proxyImageUrl(option.imageUrl, '32')"
             class="option__image"
             :alt="option.name"
           >
@@ -109,7 +109,7 @@
 </template>
 
 <script lang="ts">
-import { selenium } from '../../mixins/functions';
+import { selenium, imageProxy } from '../../mixins/functions';
 import { orgaComputed } from '../../mixins/orgaComputed';
 //@ts-ignore
 import VueMultiselect from 'vue-multiselect';
@@ -137,7 +137,7 @@ export default defineComponent({
   components: {
     VueMultiselect,
   },
-  mixins:[selenium, orgaComputed],
+  mixins:[selenium, orgaComputed, imageProxy],
   props: {
     width: { default: '100%', type: String },
     defaultanswer: { default: '', type: String},

package/src/components/display/participant/ParticipantItem.vue

@@ -13,7 +13,7 @@
       :title="$t('Participant')"
     >
       <img
-        v-lazy="participant.imageUrl"
+        v-lazy="proxyImageUrl(participant.imageUrl, '200')"
         :title="$t('Animator image')"
         :alt="$t('Animator image')"
         class="img-box-circle"
@@ -57,13 +57,13 @@
 import octopusApi from '@saooti/octopus-api';
 import { Participant } from '@/store/class/general/participant';
 import { state } from '../../../store/paramStore';
-import { displayMethods } from '../../mixins/functions';
+import { displayMethods, imageProxy } from '../../mixins/functions';
 import { orgaComputed } from '../../mixins/orgaComputed';
 import { defineComponent } from 'vue'
 import { Podcast } from '@/store/class/general/podcast';
 export default defineComponent({
   name: 'ParticpantItem',
-  mixins: [displayMethods, orgaComputed],
+  mixins: [displayMethods, orgaComputed, imageProxy],
   props: {
     participant: { default: ()=>({}), type: Object as ()=> Participant},
   },

package/src/components/display/playlist/PlaylistItem.vue

@@ -13,7 +13,7 @@
       class="d-flex flex-grow-1 text-dark"
     >
       <img
-        v-lazy="playlist.imageUrl"
+        v-lazy="proxyImageUrl(playlist.imageUrl, '260')"
         :title="$t('Playlist name image', {name:name})"
         :alt="$t('Playlist name image', {name:name})"
         class="img-box"
@@ -61,12 +61,12 @@
 <script lang="ts">
 import { Playlist } from '@/store/class/general/playlist';
 import { state } from '../../../store/paramStore';
-import { displayMethods } from '../../mixins/functions';
+import { displayMethods, imageProxy } from '../../mixins/functions';
 import { defineComponent } from 'vue'
 export default defineComponent({
   name: 'PlaylistItem',
 
-  mixins: [displayMethods],
+  mixins: [displayMethods, imageProxy],
 
   props: {
     playlist: { default: ()=>({}), type: Object as ()=>Playlist},

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

@@ -4,7 +4,7 @@
     class="img-box d-flex flex-column justify-content-start align-items-start position-relative justify rounded-lg flex-shrink-0 float-start"
   >
     <img
-      v-lazy="podcast.imageUrl"
+      v-lazy="proxyImageUrl(podcast.imageUrl,'260')"
       class="img-box"
       :alt="$t('Episode name image', {name:podcast.title})"
     >
@@ -91,9 +91,11 @@ import { state } from '../../../store/paramStore';
 import {StoreState} from '@/store/typeAppStore';
 import { Podcast } from '@/store/class/general/podcast';
 import { Conference } from '@/store/class/conference/conference';
+import { imageProxy } from '../../mixins/functions';
 import { defineComponent } from 'vue'
 export default defineComponent({
   name: 'PodcastImage',
+  mixins:[imageProxy],
   props: {
     podcast: { default: ()=>({}), type: Object as ()=>Podcast},
     hidePlay: { default: false, type: Boolean},

package/src/components/misc/TopBar.vue

@@ -14,7 +14,7 @@
       @click="onDisplayMenu(true)"
     >
       <img
-        :src="!filterOrga || '' === imgUrl ? logoUrl : imgUrl"
+        :src="!filterOrga || '' === imgUrl ? logoUrl : proxyImageUrl(imgUrl, '160')"
         :alt="!filterOrga || '' === imgUrl ? $t('Logo of main page') : $t('Visual', {name: $store.state.filter?.name})"
         :class="isEducation ? 'educationLogo' : ''"
       >
@@ -75,6 +75,7 @@ import { state } from '../../store/paramStore';
 import HomeDropdown from './HomeDropdown.vue';
 import { Organisation } from '@/store/class/general/organisation';
 import { orgaFilter } from '../mixins/organisationFilter';
+import { imageProxy } from '../mixins/functions';
 import { RubriquageFilter } from '@/store/class/rubrique/rubriquageFilter';
 import { defineComponent,defineAsyncComponent } from 'vue';
 const OrganisationChooserLight = defineAsyncComponent(() => import('../display/organisation/OrganisationChooserLight.vue'));
@@ -84,7 +85,7 @@ export default defineComponent({
     OrganisationChooserLight,
     HomeDropdown,
   },
-  mixins:[orgaFilter],
+  mixins:[orgaFilter, imageProxy],
   props: {
     displayMenu: { default: false, type: Boolean},
     isEducation: { default: false, type: Boolean},

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

@@ -7,7 +7,7 @@
       :to="podcastShareUrl"
     >
       <img
-        v-lazy="podcastImage"
+        v-lazy="proxyImageUrl(podcastImage,'48')"
         :alt="$t('Podcast image')"
         class="player-image"
       >
@@ -77,6 +77,7 @@
 <script lang="ts">
 import { CommentPodcast } from '@/store/class/general/comment';
 import { playerDisplay } from '../../mixins/player/playerDisplay';
+import { imageProxy } from '../../mixins/functions';
 import PlayerProgressBar from './PlayerProgressBar.vue';
 import PlayerTimeline from './PlayerTimeline.vue';
 import { defineComponent } from 'vue';
@@ -87,7 +88,7 @@ export default defineComponent({
     PlayerProgressBar,
     PlayerTimeline
   },
-  mixins:[playerDisplay],
+  mixins:[playerDisplay, imageProxy],
 
   props: {
     playerError: { default: false, type: Boolean},

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

@@ -12,7 +12,7 @@
       :to="podcastShareUrl"
     >
       <img
-        v-lazy="podcastImage"
+        v-lazy="proxyImageUrl(podcastImage,'260')"
         :alt="$t('Podcast image')"
         class="img-box"
       >
@@ -80,6 +80,7 @@
 </template>
 <script lang="ts">
 import { playerDisplay } from '../../mixins/player/playerDisplay';
+import { imageProxy } from '../../mixins/functions';
 import PlayerProgressBar from './PlayerProgressBar.vue';
 import PlayerTimeline from './PlayerTimeline.vue';
 import { defineComponent } from 'vue';
@@ -91,7 +92,7 @@ export default defineComponent({
     PlayerProgressBar,
     PlayerTimeline
   },
-    mixins:[playerDisplay],
+    mixins:[playerDisplay, imageProxy],
 
   props: {
     playerError: { default: false, type: Boolean},

package/src/components/mixins/functions.ts

@@ -1,3 +1,4 @@
+import { state } from '../../store/paramStore';
 
 export const selenium ={
   methods: {
@@ -6,6 +7,19 @@ export const selenium ={
     },
   },
 };
+export const imageProxy ={
+  methods: {
+    proxyImageUrl(url:string, width:string): string{
+      if(!url){
+        return "";
+      }
+      if(state.octopusApi.imageUrl){
+        return state.octopusApi.imageUrl+"image/"+btoa(url)+"?width="+width+"&useWebp=true";
+      }
+      return url;
+    },
+  },
+};
 export const cookies =
 {
   methods: {

package/src/components/pages/Emission.vue

@@ -19,7 +19,7 @@
             </h2>
             <div class="mb-5 mt-3 descriptionText">
               <img
-                v-lazy="imageUrl"
+                v-lazy="proxyImageUrl(imageUrl, '260')"
                 :alt="$t('Emission name image', { name: name })"
                 class="img-box shadow-element float-start me-3 mb-3"
               >
@@ -81,7 +81,7 @@
 <script lang="ts">
 import octopusApi from '@saooti/octopus-api';
 import { state } from '../../store/paramStore';
-import { displayMethods } from '../mixins/functions';
+import { displayMethods, imageProxy } from '../mixins/functions';
 import { orgaComputed } from '../mixins/orgaComputed';
 import { handle403 } from '../mixins/handle403';
 import { Emission } from '@/store/class/general/emission';
@@ -106,7 +106,7 @@ export default defineComponent({
     LiveHorizontalList,
     ClassicLoading
   },
-  mixins: [displayMethods, handle403, orgaComputed],
+  mixins: [displayMethods, handle403, orgaComputed, imageProxy],
   props: {
     emissionId: { default: undefined, type: Number},
     isEducation: { default: false, type: Boolean},

package/src/components/pages/Participant.vue

@@ -10,7 +10,7 @@
         class="d-flex flex-column align-items-center mb-3"
       >
         <img
-          v-lazy="participant.imageUrl"
+          v-lazy="proxyImageUrl(participant.imageUrl, '200')"
           :title="$t('Animator image')"
           :alt="$t('Animator image')"
           class="img-box-circle mb-3"
@@ -63,7 +63,7 @@
 <script lang="ts">
 import octopusApi from '@saooti/octopus-api';
 import { state } from '../../store/paramStore';
-import { displayMethods } from '../mixins/functions';
+import { displayMethods, imageProxy } from '../mixins/functions';
 import { orgaComputed } from '../mixins/orgaComputed';
 import { handle403 } from '../mixins/handle403';
 import { Participant } from '@/store/class/general/participant';
@@ -82,7 +82,7 @@ export default defineComponent({
     PodcastList,
     ClassicLoading
   },
-  mixins: [displayMethods, handle403, orgaComputed],
+  mixins: [displayMethods, handle403, orgaComputed, imageProxy],
   props: {
     participantId: { default: undefined, type: Number},
   },

package/src/components/pages/Playlist.vue

@@ -14,7 +14,7 @@
             <h2>{{ name }}</h2>
             <div class="mb-5 mt-3 descriptionText">
               <img
-                v-lazy="imageUrl"
+                v-lazy="proxyImageUrl(imageUrl, '260')"
                 :alt="$t('Playlist name image', { name: name })"
                 class="img-box shadow-element float-start me-3 mb-3"
               >
@@ -55,7 +55,7 @@ import ClassicLoading from '../form/ClassicLoading.vue';
 import PodcastList from '../display/playlist/PodcastList.vue';
 import octopusApi from '@saooti/octopus-api';
 import { state } from '../../store/paramStore';
-import { displayMethods } from '../mixins/functions';
+import { displayMethods, imageProxy } from '../mixins/functions';
 import { handle403 } from '../mixins/handle403';
 import { Playlist } from '@/store/class/general/playlist';
 import { defineComponent, defineAsyncComponent } from 'vue';
@@ -71,7 +71,7 @@ export default defineComponent({
     SharePlayer,
     ClassicLoading
   },
-  mixins:[displayMethods, handle403, orgaComputed],
+  mixins:[displayMethods, handle403, orgaComputed, imageProxy],
 
   props: {
     playlistId: { default: undefined, type: Number},

package/src/store/paramStore.ts

@@ -85,6 +85,7 @@ const state:paramStore = {
   octopusApi: {
     url: 'http://api.dev2.saooti.org/',
     commentsUrl: 'http://comments.dev2.saooti.org/',
+    imageUrl:'http://imageproxy.dev2.saooti.org/',
     studioUrl: 'http://studio.dev2.saooti.org/',
     playerUrl: 'https://playerbeta.dev2.saooti.org/',
     organisationId: undefined,
@@ -175,6 +176,7 @@ export interface Organisation{
 export interface OctopusApi{
   url?: string,
   commentsUrl?: string,
+  imageUrl?: string,
   studioUrl?: string,
   playerUrl?: string,
   organisationId?: string | undefined,

package/src/store/typeAppStore.ts

@@ -132,6 +132,9 @@ export function emptyPodcastData(): Podcast{
     CommentApi: {
         uri: string | undefined;
     };
+    imageApi: {
+      uri: string | undefined;
+    };
     studioApi: {
         uri: string | undefined;
     };
@@ -236,6 +239,9 @@ export function emptyPodcastData(): Podcast{
           CommentApi: {
             uri: undefined ,
           },
+          imageApi: {
+            uri:undefined,
+          },
           studioApi: {
             uri: undefined ,
           },