ep-lib-ts 1.0.36 → 1.0.37

package/src/components/interactions/Ep360Video.vue

@@ -0,0 +1,339 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import * as AFRAME from "aframe";
+import { Object3D, Quaternion, Vector3 } from "three";
+import type { Pin, Scene } from "../../types/video360";
+
+interface Props {
+    scenes:Scene[];
+}
+
+const props = defineProps<Props>();
+
+const currentSceneIndex = ref(0);
+const hoveredPin = ref<Pin | null>(null);
+const clickedPin = ref<Pin | null>(null);
+const isPlaying = ref(false);
+
+if (!AFRAME.components["rotation-reader"]) {
+    AFRAME.registerComponent("rotation-reader", {
+        schema: {},
+        tick: createTickFunction(),
+    });
+}
+
+function handleMarkerClick(pin: Pin, event: Event): void {
+    if (!pin) return;
+
+    if (pin?.event === "onClick") {
+        if (pin.type === "descriptive") {
+            clickedPin.value = pin;
+            const target = event.target as HTMLElement;
+            target.setAttribute("material", "opacity: 0; transparent: true");
+            console.log("Marker clicked:", pin);
+        } else if (pin.type === "action") {
+            const nextSceneIndex = props.scenes.findIndex(
+                (scene) => scene.id === pin.scene
+            );
+            if (nextSceneIndex !== -1) {
+                currentSceneIndex.value = nextSceneIndex;
+            }
+            console.log(
+                "Action Pin Clicked. Scene switched to:",
+                currentSceneIndex.value
+            );
+        }
+    }
+}
+
+function handleMouseEnter(pin: Pin | null, event: Event): void {
+    if (!pin) return;
+    if (pin.event === "onHover" || !pin.event) {
+        hoveredPin.value = pin;
+        console.log("Marker hovered:", pin);
+    }
+}
+
+function handleMouseLeave(pin: Pin | null, event: Event): void {
+    if (!pin) return;
+    const relatedTarget = (event as MouseEvent).relatedTarget as HTMLElement;
+    if (pin.event === "onHover" || !pin?.event) {
+        if (
+            !relatedTarget?.classList.contains("interactive-area") &&
+            hoveredPin.value?.id === pin.id
+        ) {
+            hoveredPin.value = null;
+            console.log("Hover cleared:", pin);
+        }
+    }
+}
+
+function convertToPosition(x: number, y: number): string {
+    return `${x / 10} ${y / 10} -5`;
+}
+
+function removeFrame() {
+    clickedPin.value = null;
+}
+
+function getPinColor(pin: Pin): string {
+    return pin.color || "indigo";
+}
+
+function getPinOpacity(pinId: number): number {
+    return (hoveredPin.value && hoveredPin.value.id === pinId) ||
+        (clickedPin.value && clickedPin.value.id === pinId)
+        ? 0
+        : 1;
+}
+
+function toggleVideo() {
+    isPlaying.value = !isPlaying.value;
+    const videoElements = document.querySelectorAll<HTMLVideoElement>(".video");
+    videoElements.forEach((video) => {
+        isPlaying.value ? video.play() : video.pause();
+    });
+}
+
+onMounted(() => {
+    (async () => {
+        await checkAndDeleteComponent("rotation-reader", 2000);
+    })();
+    (async () => {
+        await registerRotationReaderComponent(2000);
+    })();
+});
+
+async function checkAndDeleteComponent(
+    componentName: string,
+    delayMs: number = 1000
+) {
+    if (AFRAME.components[componentName]) {
+        await delay(delayMs);
+        delete AFRAME.components[componentName];
+    }
+}
+
+function delay(ms: number): Promise<void> {
+    return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+async function registerRotationReaderComponent(delayMs: number = 1000) {
+    await delay(delayMs);
+    if (AFRAME.components["rotation-reader"]) {
+        console.warn("Existing rotation-reader found. Re-registering...");
+        delete AFRAME.components["rotation-reader"];
+    }
+
+    AFRAME.registerComponent("rotation-reader", {
+        schema: {},
+        tick: createTickFunction(),
+    });
+}
+
+function createTickFunction() {
+    const quaternion = new Quaternion();
+    const cameraPosition = new Vector3();
+    const objectPosition = new Vector3();
+
+    const referenceDistance = 5;
+    const initialScale = 0.8;
+
+    return function (this: {
+        el: { object3D: InstanceType<typeof Object3D>; sceneEl: any };
+    }) {
+        updateCameraQuaternion(this.el.object3D, quaternion);
+        updatePinsRotation(quaternion);
+
+        this.el.object3D.getWorldPosition(cameraPosition);
+
+        document.querySelectorAll(".pin-marker").forEach((pinElement) => {
+            const pinObject = (pinElement as any).object3D;
+            if (pinObject) {
+                pinObject.getWorldPosition(objectPosition);
+                const distance = cameraPosition.distanceTo(objectPosition);
+                const scale = (distance * initialScale) / referenceDistance;
+                pinObject.scale.set(scale, scale, scale);
+            }
+        });
+
+        document.querySelectorAll(".frame").forEach((frameElement) => {
+            const frameObject = (frameElement as any).object3D;
+            if (frameObject) {
+                frameObject.getWorldPosition(objectPosition);
+                const distance = cameraPosition.distanceTo(objectPosition);
+                const scale = (distance * initialScale) / referenceDistance;
+                frameObject.scale.set(scale, scale, scale);
+            }
+        });
+    };
+}
+
+function updateCameraQuaternion(
+    object3D: InstanceType<typeof Object3D>,
+    quaternion: InstanceType<typeof Quaternion>
+) {
+    object3D.getWorldQuaternion(quaternion);
+}
+
+function updatePinsRotation(quaternion: InstanceType<typeof Quaternion>) {
+    
+    document.querySelectorAll(".pin-marker").forEach((pinElement) => {
+        const pinObject = (pinElement as any).object3D;
+        if (pinObject) {
+            pinObject.setRotationFromQuaternion(quaternion);
+        }
+    });
+
+    document.querySelectorAll(".frame").forEach((frameElement) => {
+        const frameObject = (frameElement as any).object3D;
+        if (frameObject) {
+            frameObject.setRotationFromQuaternion(quaternion);
+        }
+    });
+}
+</script>
+
+<template>
+    <div style="width: 1200px; height: 800px; position: relative; margin: auto">
+        <button @click="toggleVideo()">
+            {{ isPlaying ? "Pause" : "Play" }}
+        </button>
+
+        <a-scene embedded>
+            <a-assets>
+                <video
+                    v-for="scene in props.scenes"
+                    :id="`video${scene.id}`"
+                    :src="scene.skyVideo"
+                    muted
+                    class="video"
+                    playsinline
+                    loop
+                    crossorigin="anonymous"
+                ></video>
+            </a-assets>
+
+            <!-- CAMERA -->
+            <a-entity camera look-controls id="rig" rotation-reader>
+                <a-cursor
+                    id="cursor"
+                    cursor="rayOrigin: mouse"
+                    raycaster="objects: none"
+                    geometry="primitive: ring; radiusInner: 0; radiusOuter: 0"
+                    material="opacity: 0; transparent: true"
+                ></a-cursor>
+            </a-entity>
+
+            <!-- VIDEO SPHERE (CURRENT SCENE) -->
+            <a-videosphere
+                v-for="scene in props.scenes"
+                :key="scene.id"
+                :src="`#video${props.scenes[currentSceneIndex].id}`"
+            ></a-videosphere>
+
+            <!-- PINS -->
+            <a-entity
+                v-for="pin in props.scenes[currentSceneIndex].pins"
+                :key="pin.id"
+                :position="convertToPosition(pin.x, pin.y)"
+                cursor="rayOrigin: mouse"
+            >
+                <a-circle
+                    class="pin-marker"
+                    :color="getPinColor(pin)"
+                    radius="0.25"
+                    shader="flat"
+                    :material="`opacity: ${getPinOpacity(
+                        pin.id
+                    )}; transparent: true`"
+                    @click="(event: Event) => handleMarkerClick(pin, event)"
+                    @mouseenter="(event: Event) => handleMouseEnter(pin, event)"
+                    @mouseleave="(event: Event) => handleMouseLeave(pin, event)"
+                ></a-circle>
+            </a-entity>
+
+            <!-- HOVERED PINS INFO BOX -->
+            <a-entity
+                v-if="hoveredPin"
+                :position="convertToPosition(hoveredPin.x, hoveredPin.y)"
+                class="frame interactive-area"
+                cursor="rayOrigin: mouse"
+                @mouseleave="(event: Event) => handleMouseLeave(hoveredPin, event)"
+            >
+                <a-plane
+                    color="white"
+                    :opacity="1"
+                    width="4"
+                    height="1.5"
+                    material="shader: standard; side: double;"
+                    position="0 0 0"
+                    geometry="primitive: plane; height: 1.5; width: 4;"
+                ></a-plane>
+
+                <a-text
+                    :value="hoveredPin.title"
+                    color="#2c3e50"
+                    font="dejavu"
+                    align="center"
+                    width="3.8"
+                    position="0 0.3 0.01"
+                ></a-text>
+                <a-text
+                    :value="hoveredPin.description"
+                    color="#34495e"
+                    font="dejavu"
+                    align="center"
+                    width="3.5"
+                    position="0 -0.3 0.01"
+                ></a-text>
+            </a-entity>
+
+            <!-- CLICKED PINS DIALOG BOX -->
+            <a-entity
+                v-if="clickedPin"
+                :position="convertToPosition(clickedPin.x, clickedPin.y)"
+                class="frame interactive-area"
+                cursor="rayOrigin: mouse"
+            >
+                <a-plane
+                    color="white"
+                    :opacity="1"
+                    width="4"
+                    height="1.5"
+                    material="shader: standard; side: double;"
+                    position="0 0 0"
+                    geometry="primitive: plane; height: 1.5; width: 4;"
+                ></a-plane>
+
+                <a-plane
+                    class="close-frame"
+                    color="red"
+                    width="0.4"
+                    height="0.4"
+                    position="1.8 0.55 0.01"
+                    material="shader: flat; side: double; transparent: true;"
+                    geometry="primitive: plane; height: 0.4; width: 0.4;"
+                    @click="removeFrame"
+                ></a-plane>
+
+                <a-text
+                    :value="clickedPin.title"
+                    color="#2c3e50"
+                    font="dejavu"
+                    align="center"
+                    width="3.8"
+                    position="0 0.3 0.01"
+                ></a-text>
+                <a-text
+                    :value="clickedPin.description"
+                    color="#34495e"
+                    font="dejavu"
+                    align="center"
+                    width="3.5"
+                    position="0 -0.3 0.01"
+                ></a-text>
+            </a-entity>
+        </a-scene>
+    </div>
+</template>

package/src/components/medias/EpLottieSvg.vue

@@ -0,0 +1,79 @@
+<script lang="ts" setup>
+import { DotLottieVue } from '@lottiefiles/dotlottie-vue';
+
+import { ref, watchEffect } from 'vue';
+
+interface Props {
+    src: string;
+    autoPlay?: boolean;
+    loop?: boolean;
+    speed?: number | string;
+    width?: number | string;
+    height?: number | string;
+    pauseOnClick?: boolean;
+    pauseButton?: boolean;
+    playOnHover?: boolean;
+    onComplete?: () => void;
+}
+
+
+const props = withDefaults(defineProps<Props>(), {
+    autoPlay: false,
+    loop: false,
+    speed: 1,
+    width: 150,
+    height: 150,
+    pauseOnClick: false,
+    pauseButton: false,
+    playOnHover: false
+});
+
+const buttonText = ref((props.autoPlay) ? "Arrêter" : "Jouer");
+
+const playerRef = ref<any | null>(null);
+
+const managePlayState = () => {
+
+    if(playerRef.value) {
+        if(playerRef.value.getDotLottieInstance().isPlaying) {
+            playerRef.value.getDotLottieInstance().pause();
+            buttonText.value = "Jouer";
+        }
+        else {
+            playerRef.value.getDotLottieInstance().play();
+            buttonText.value = "Arrêter";
+        }
+    }
+}
+
+watchEffect(() => {
+    if(playerRef.value) {
+        playerRef.value.getDotLottieInstance().addEventListener('complete', () => {
+            if(props.onComplete) {
+                props.onComplete();
+            }
+        });
+    }
+})
+
+
+</script>
+
+
+<template>
+    <div class="flex flex-col items-center">
+        <DotLottieVue
+            :src="src"
+            :loop="loop"
+            :autoplay="autoPlay"
+            :style="`width: ${width}px; height: ${height}px;`"
+            :speed="Number(speed)"
+            :play-on-hover="playOnHover"
+            ref="playerRef"
+            @click="(pauseOnClick)? managePlayState() : ''"
+        />
+        <button class="rounded bg-blue-500 text-white py-2 px-4 min-w-28 my-3" v-if="pauseButton" @click="managePlayState">{{ buttonText }}</button>
+    </div>
+
+</template>
+

package/dist/BgAudio-BpeNw9L4.js

@@ -1,4 +0,0 @@
-import { $ as f } from "./index-7_RFK7FL.js";
-export {
-  f as default
-};

package/dist/DisplayBox-aSVYrDHI.js

@@ -1,4 +0,0 @@
-import { a0 as f } from "./index-7_RFK7FL.js";
-export {
-  f as default
-};

package/dist/EpAlert-x0STjaqD.js

@@ -1,4 +0,0 @@
-import { W as f } from "./index-7_RFK7FL.js";
-export {
-  f as default
-};

package/dist/EpAudio-D7LIG4mf.js

@@ -1,4 +0,0 @@
-import { M as f } from "./index-7_RFK7FL.js";
-export {
-  f as default
-};

package/dist/EpBadge-Du6v1vQL.js

@@ -1,4 +0,0 @@
-import { c as f } from "./index-7_RFK7FL.js";
-export {
-  f as default
-};

package/dist/EpBarChart-BoINXvhV.js

@@ -1,4 +0,0 @@
-import { p as f } from "./index-7_RFK7FL.js";
-export {
-  f as default
-};

package/dist/EpBtn-DE6qTHlW.js

@@ -1,4 +0,0 @@
-import { d as f } from "./index-7_RFK7FL.js";
-export {
-  f as default
-};

package/dist/EpCard-CNcn4RbZ.js

@@ -1,4 +0,0 @@
-import { e } from "./index-7_RFK7FL.js";
-export {
-  e as default
-};

package/dist/EpChip-DHgdqDEX.js

@@ -1,4 +0,0 @@
-import { f } from "./index-7_RFK7FL.js";
-export {
-  f as default
-};

package/dist/EpCodeblock-CR2LGKR-.js

@@ -1,4 +0,0 @@
-import { t } from "./index-7_RFK7FL.js";
-export {
-  t as default
-};

package/dist/EpConclusion-B9DhTuTc.js

@@ -1,4 +0,0 @@
-import { v as f } from "./index-7_RFK7FL.js";
-export {
-  f as default
-};

package/dist/EpContentSlider-BdS_KctY.js

@@ -1,4 +0,0 @@
-import { H as f } from "./index-7_RFK7FL.js";
-export {
-  f as default
-};

package/dist/EpDescription-D1TbwNrX.js

@@ -1,4 +0,0 @@
-import { w as f } from "./index-7_RFK7FL.js";
-export {
-  f as default
-};

package/dist/EpDivider-DjTTwzGb.js

@@ -1,4 +0,0 @@
-import { g as f } from "./index-7_RFK7FL.js";
-export {
-  f as default
-};

package/dist/EpEdu-CuI1_N9M.js

@@ -1,4 +0,0 @@
-import { x as f } from "./index-7_RFK7FL.js";
-export {
-  f as default
-};

package/dist/EpFlex-Dx5C4Gc8.js

@@ -1,4 +0,0 @@
-import { h as f } from "./index-7_RFK7FL.js";
-export {
-  f as default
-};

package/dist/EpFunnelChart-C6_M1nag.js

@@ -1,4 +0,0 @@
-import { q as f } from "./index-7_RFK7FL.js";
-export {
-  f as default
-};

package/dist/EpHeader-B5jyGMDA.js

@@ -1,4 +0,0 @@
-import { X as f } from "./index-7_RFK7FL.js";
-export {
-  f as default
-};

package/dist/EpHover-3fnZrdD6.js

@@ -1,31 +0,0 @@
-import { defineComponent as c, computed as t, openBlock as i, createElementBlock as u, renderSlot as f, createElementVNode as d, normalizeClass as p, toDisplayString as m } from "vue";
-import { u as o } from "./index-7_RFK7FL.js";
-const v = { class: "relative max-w-xs overflow-hidden bg-cover bg-no-repeat" }, h = /* @__PURE__ */ c({
-  __name: "EpHover",
-  props: {
-    bg_color: { default: "black" },
-    text_color: { default: "white" },
-    text: { default: "" },
-    animation: { default: "" }
-  },
-  setup(r) {
-    const e = r, l = t(() => {
-      if (e.bg_color)
-        return `${o("bg", e.bg_color)}`;
-    }), a = t(() => {
-      if (e.text_color)
-        return `${o("text", e.text_color)}`;
-    }), n = t(() => e.animation == "scale" ? "hover:scale-110 hover:opacity-100 " : "hover:opacity-100");
-    return (s, x) => (i(), u("div", v, [
-      f(s.$slots, "default"),
-      d("div", {
-        class: p(`absolute  bottom-0 left-0 right-0 top-0 h-full w-full overflow-hidden ${l.value} 
-            font-bold flex justify-center items-center bg-fixed opacity-0 transition duration-300 ease-in-out 
-            text-4xl ${n.value} ${a.value}`)
-      }, m(e.text), 3)
-    ]));
-  }
-});
-export {
-  h as default
-};

package/dist/EpIcon-DDm9gGfm.js

@@ -1,4 +0,0 @@
-import { i as f } from "./index-7_RFK7FL.js";
-export {
-  f as default
-};

package/dist/EpIframe-BNz3cawg.js

@@ -1,4 +0,0 @@
-import { N as f } from "./index-7_RFK7FL.js";
-export {
-  f as default
-};

package/dist/EpImg-CxjLfziE.js

@@ -1,4 +0,0 @@
-import { j as f } from "./index-7_RFK7FL.js";
-export {
-  f as default
-};