feat: Add list of video conference button with external video confere…

…nce for user and space - EXO-69422

webapp/src/main/resources/locale/portlet/externalvisio/ExternalVisio_en.properties

@@ -50,4 +50,5 @@ externalVisio.label.spaceModuleConnector.description=The space host will be able
 externalVisio.tooltip.spaceModuleConnector.enable=Enable this web conferencing for spaces
 externalVisio.tooltip.spaceModuleConnector.disable=Disable this web conferencing for spaces
 externalVisio.label.btn.cancel=Cancel
-externalVisio.label.btn.Save=Save
+externalVisio.label.btn.Save=Save
+externalVisio.label.btn.StartCall=Start a call

webapp/src/main/resources/locale/portlet/externalvisio/ExternalVisio_fr.properties

@@ -50,4 +50,5 @@ externalVisio.label.spaceModuleConnector.description=L'hôte de l'espace pourra
 externalVisio.tooltip.spaceModuleConnector.enable=Activer cette conférence web pour les espaces
 externalVisio.tooltip.spaceModuleConnector.disable=Désactiver cette conférence web pour les espaces
 externalVisio.label.btn.cancel=Annuler
-externalVisio.label.btn.Save=Enregistrer
+externalVisio.label.btn.Save=Enregistrer
+externalVisio.label.btn.StartCall=Démarrer un appel

webapp/src/main/webapp/WEB-INF/gatein-resources.xml

@@ -49,6 +49,10 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
     <depends>
       <module>webConferencing</module>
     </depends>
+     <depends>
+      <module>webConferencing_VisioConnectorMeet</module>
+      <as>callButton</as>
+    </depends>
   </module>
 
   <module>
@@ -66,4 +70,24 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
     </depends>
   </module>
 
+  <module>
+    <name>webConferencing_VisioConnectorMeet</name>
+    <load-group>webConferencingJitsiGRP</load-group>
+    <script>
+      <path>/js/callButton.bundle.js</path>
+    </script>
+    <depends>
+      <module>webConferencing</module>
+    </depends>
+    <depends>
+      <module>vue</module>
+    </depends>
+    <depends>
+      <module>vuetify</module>
+    </depends>
+    <depends>
+      <module>eXoVueI18n</module>
+    </depends>
+  </module>
+
 </gatein-resources>

webapp/src/main/webapp/js/webconferencing-externalvisio.js

@@ -80,12 +80,76 @@
         }
       };
 
+      var getActiveProviders = function(identityId) {
+        return fetch(`${eXo.env.portal.context}/${eXo.env.portal.rest}/v1/externalVisio/${identityId}`, {
+          credentials: 'include',
+          method: 'GET'
+        }).then(resp => {
+          if (resp.ok) {
+            return resp.json();
+          } else {
+            throw new Error('Error when retrieving active providers');
+          }
+        });
+      }
+      var startCall = function(url) {
+        window.open(url, '_Blank');
+      }
+
       this.callButton = function(context, buttonType) {
         var button = $.Deferred();
+        if (context && context.currentUser) {
+          context.details().then(target => {
+            if (!buttonType || buttonType === "vue") {
+              let activeButtons = [];
+              const identityId = context.isSpace ? context.spaceId : context.userId;
+              getActiveProviders(identityId)
+              .then((activeProviders) => {
+                activeButtons = activeProviders;
+                const buttonComponents = []; // Créer une liste pour stocker les composants Vue
+                activeButtons.forEach(p => {
+                  const callSettings = {};
+                  callSettings.target = target;
+                  callSettings.context = context;
+                  callSettings.provider = self;
+                  callSettings.nameConnector = p.name;
+                  callSettings.urlConnector = p.url;
+                  callSettings.onCallOpen = () => {
+                    startCall(callSettings.urlConnector);
+                  };
+                  callButton.init(callSettings).then(comp => {
+                    // Ajouter le composant Vue à la liste
+                    buttonComponents.push(comp);
+
+                    if (buttonComponents.length === activeButtons.length) {
+                      button.resolve(buttonComponents);
+                    }
+                  });
+                });
+              });
+            } else {
+              const message = "Button type not supported: " + buttonType;
+              log.error(message);
+              button.reject(message);
+            }
+          }).catch(err => {
+            // Gérer les erreurs
+            if (err && err.code == "NOT_FOUND_ERROR") {
+              button.reject(err.message);
+            } else {
+              var msg = "Error getting context details";
+              log.error(msg, err);
+              button.reject(msg, err);
+            }
+          });
+        } else {
+          var msg = "Not configured or empty context";
+          log.error(msg);
+          button.reject(msg);
+        }
         return button.promise();
-      };
-
-    };
+      }
+    };      
 
     var provider = new ExternalVisioProvider();
 
@@ -104,4 +168,4 @@
       window.console
         .log("WARN: webConferencing not given and eXo.webConferencing not defined. ExternalVisio provider registration skipped.");
   }
-})($, webConferencing);
+})($, webConferencing, callButton);

webapp/src/main/webapp/vue-app/CallButton/components/VisioConnectorMeetButton.vue

@@ -0,0 +1,70 @@
+
+
+<template>
+  <div>
+    <v-tooltip
+      bottom
+      :disabled="!displayTooltip">
+      <template #activator="{ on, attrs }">
+        <v-btn
+          id="btnVisioConnectorButton"
+          class="visioConnectorCallAction"
+          @click.stop.prevent="startCall"
+          v-bind="attrs"
+          v-on="on"
+          icon>
+          <v-icon
+            size="16">
+            fas fa-video
+          </v-icon>
+        </v-btn>
+      </template>
+      <span v-if="displayTooltip">{{ $t('externalVisio.label.btn.StartCall') }}</span>
+    </v-tooltip>
+    <span
+      v-if="displayConnectorName"
+      @click.stop.prevent="startCall">{{ nameConnector }}</span>
+    <span
+      v-else-if="!displayTooltip"
+      @click.stop.prevent="startCall">{{ 'externalVisio.label.btn.StartCall' }}</span>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    callSettings: {
+      type: Object,
+      required: true
+    }
+  },
+
+  data: function() {
+    return {
+      settings: this.callSettings,
+    };
+  },
+  computed: {
+    parentClasses: function() {
+      return this.callSettings.context.parentClasses;
+    },
+    displayTooltip: function() {
+      return this.parentClasses.includes('call-button-mini');
+    },
+    displayConnectorName() {
+      return document.querySelector('.single-btn-container') === null;
+    },
+    urlConnector() {
+      return this.callSettings.urlConnector;
+    },
+    nameConnector() {
+      return this.callSettings.nameConnector;
+    }
+  },
+  methods: {
+    startCall: function() {
+      this.callSettings.onCallOpen();
+    },
+  }
+};
+</script>

webapp/src/main/webapp/vue-app/CallButton/main.js

@@ -0,0 +1,45 @@
+import VisioConnectorMeetButton from './components/VisioConnectorMeetButton.vue';
+
+Vue.component('VisioConnectorMeetButton', VisioConnectorMeetButton);
+
+const vuetify = new Vuetify(eXo.env.portal.vuetifyPreset);
+
+// getting language of user
+const lang = eXo?.env.portal.language || 'en';
+const url = `${eXo.env.portal.context}/${eXo.env.portal.rest}/i18n/bundle/locale.portlet.externalvisio.ExternalVisio-${lang}.json`;
+
+export function init(settings) {
+  // getting locale ressources
+  const parentContainer = document.querySelector('.leftHeaderDrawer');
+  if (parentContainer) {
+    parentContainer.addEventListener('click', e => {
+      if (e.target.classList.contains('backButton')
+        && e.target.parentElement.classList.contains('leftHeaderDrawer')) {
+        const container = document.querySelector('.single-btn-container');
+        const button = document.querySelector('.visioConnectorCallAction');
+        if (container && button) {
+          container.removeChild(button);
+        }
+      }
+    });
+  }
+  return exoi18n.loadLanguageAsync(lang, url).then((i18n) => {
+    // init Vue app when locale ressources are ready
+    const comp = new Vue({
+      data() {
+        return {
+          callSettings: settings,
+        };
+      },
+      render: (h) =>
+        h(VisioConnectorMeetButton, {
+          props: {
+            callSettings: settings,
+          }
+        }),
+      i18n,
+      vuetify,
+    });
+    return comp;
+  });
+}

webapp/webpack.prod.js

@@ -36,6 +36,7 @@ const config = {
   entry: {
     externalVisio: './src/main/webapp/vue-app/external-visio/main.js',
     externalVisioConnector: './src/main/webapp/vue-app/external-visio-connector/main.js',
+    callButton: "./src/main/webapp/vue-app/CallButton/main.js",
   },
   output: {
     path: path.join(__dirname, 'target/external-visio/'),