Hice un componente en vue que se divide en 3 cajas (les digo vistas y la 1 es la vista principal).
---------
| | 2 |
| 1 |---|
| | 3 |
---------
Inicialmente tengo un objeto que TIENE varias imágenes, y PUEDE TENER vídeos y/o recorridos 360.
En la caja 1, empiezo mostrando la galería de imágenes.
En la caja 2 hay un botón. Si el objeto tiene vídeos, el botón se habilita. Si clickeo en el botón, el vídeo se coloca en la caja 1, y ahora la caja 2 tiene un preview de la galería de imágenes (con un boton que al clickearlo, la vuelve a colocar en la vista 1)
La caja 3 se comporta exactamente igual que la caja 2, pero con recorrido 360 (es un HTML embebido)
En este momento mi componente se comporta bien y muestra la cosas como debe. Pero ahora quiero agregarle una funcionalidad más y no sé como encararlo.
Yo quiero que, cuando el usuario interactúe con el componente, (por ejemplo recorriendo la galería, o reproduciendo el vídeo, o recorriendo la galería 360) y luego intercambie las vistas, que no se pierda el lugar donde estaba.
Ejemplo: En la galería, yo podría mantener una variable currentIndex
por ejemplo, y voy verificando en qué posición se encuentra, y al cambiar de vista (a vídeo o 360) y volver a la galería de imágenes, cuando se levante la misma, indicarle que comience por el indice.
Esto lo hice y funcionó, sin embargo no puedo mantener un estado de la galería 360, indefectiblemente se vuelve a iniciar.
Lo que sucede es que, como los divs
tienen la sentencia v-if, se renderizan condicionalmente y montan o desmontan su contenido.
Quisiera encontrar una solución (con algo de CSS) que haga que el componente cargue las imágenes, los vídeos, la galería 360 solo la primera vez que se agreguen respectivamente a la vista 1.
Luego, al ir intercambiando una vista con otra, que no se reemplacen los condicionalmente (como ocurre ahora), sino que se superponga una vista principal sobre otra. (de esta manera nunca perdería el estado actual del recorrido 360)
Luego, si desmonto el componente, ahí sí deberían desmontarse.
Es posible hacer esto sin desarmar mucho lo que ya hice?
Muchas gracias.
Les dejo el componente:
<template>
<div class="container-multimedia">
<div class="col-9 container-principal" v-if="mostrando == 1">
<Galleria :value="arrImgs" :numVisible="5" :activeIndex="activeIndex" :showThumbnails="false" :showItemNavigators="true">
<template #item="slotProps">
<img
class="img-galeria"
:src="slotProps.item.image"
:alt="slotProps.item.image"
/>
</template>
<template #thumbnail="slotProps">
<img
class="img-thumb"
:src="slotProps.item.thumb"
:alt="slotProps.item.image"
/>
</template>
</Galleria>
</div>
<div class="col-9 container-principal" v-else-if="mostrando == 2">
<galeria-video :videos="arrVids" />
</div>
<div class="col-9 container-principal" v-else-if="mostrando == 3">
<galeria-360 :keyVid="arr360[0].key" />
</div>
<div class="col-3 barra-lateral">
<div class="container-1 multimedia" v-if="mostrando == 1">
<div v-if="!arrVids.length" class="content-multimedia no-contenido">
<!-- No hay video. No funciono. -->
<div class="boton circular">
<i><icon-base width="25" height="25" icon-name="Videos"><IconVideos /></icon-base></i>
</div>
</div>
<div v-else @click="setMostrando(2)" class="content-multimedia normal">
<!-- CLICK ACA PARA VER LA GALERIA DE VIDEOS -->
<div class="boton circular">
<i><icon-base width="25" height="25" icon-name="Videos"><IconVideos /></icon-base></i>
</div>
</div>
</div>
<div class="container-1 multimedia" v-else-if="mostrando == 2" @click="setMostrando(1)">
<!-- CLICK ACA PARA VER LA GALERIA DE IMAGENES -->
<div class="content-multimedia normal">
<div class="boton circular">
<i><icon-base width="25" height="25" icon-name="Fotos"><IconFotos /></icon-base></i>
</div>
</div>
</div>
<div class="container-1 multimedia" v-else-if="mostrando == 3">
<div v-if="!arrVids.length" class="content-multimedia no-contenido">
<!-- No hay video. No funciono. -->
<div class="boton circular">
<i><icon-base width="25" height="25" icon-name="Videos"><IconVideos /></icon-base></i>
</div>
</div>
<div v-else @click="setMostrando(2)" class="content-multimedia normal">
<!-- CLICK ACA PARA VER LA GALERIA DE VIDEOS -->
<div class="boton circular">
<i><icon-base width="25" height="25" icon-name="Videos"><IconVideos /></icon-base></i>
</div>
</div>
</div>
<!-- CASOS: 1) Hay fotos, videos y recorrida 360 -->
<div class="container-2 multimedia" v-if="mostrando == 1">
<div v-if="!arr360.length" class="content-multimedia no-contenido">
<!-- No hay recorrido 360. No funciono. -->
<div class="boton circular">
<i><icon-base width="30" height="30" icon-name="360º"><Icon360 /></icon-base></i>
</div>
</div>
<div v-else @click="setMostrando(3)" class="content-multimedia normal">
<!-- CLICK ACA PARA VER EL RECORRIDO EN 360 -->
<div class="boton circular">
<i><icon-base width="30" height="30" icon-name="360º"><Icon360 /></icon-base></i>
</div>
</div>
</div>
<div class="container-2 multimedia" v-if="mostrando == 2" @click="setMostrando(3)">
<div v-if="!arr360.length" class="content-multimedia no-contenido">
<!-- No hay recorrido 360. No funciono. -->
<div class="boton circular">
<i><icon-base width="30" height="30" icon-name="360º"><Icon360 /></icon-base></i>
</div>
</div>
<div v-else @click="setMostrando(3)" class="content-multimedia normal">
<!-- CLICK ACA PARA VER EL RECORRIDO EN 360 -->
<div class="boton circular">
<i><icon-base width="30" height="30" icon-name="360º"><Icon360 /></icon-base></i>
</div>
</div>
</div>
<div class="container-2 multimedia" v-if="mostrando == 3" @click="setMostrando(1)">
<!-- CLICK ACA PARA VER LA GALERIA DE IMAGENES -->
<div class="content-multimedia normal">
<div class="boton circular">
<i><icon-base width="25" height="25" icon-name="Fotos"><IconFotos /></icon-base></i>
</div>
</div>
</div>
</div>
</div>
<multimedia-full-screen :item="item"/>
</template>
<script>
import IconBase from '@/components/IconBase.vue';
import IconFavoritos from '@/assets/iconos/icono-favorito.vue';
import IconVideos from '@/assets/iconos/icono-videos.vue';
import Icon360 from '@/assets/iconos/icono-360.vue';
import IconFotos from "@/assets/iconos/icono-fotos.vue";
import IconPantallaCompleta from "@/assets/iconos/icono-pantalla-completa.vue";
import { ref } from "@vue/reactivity";
import Galleria from "primevue/galleria";
import Galeria360 from "../../../Galeria/Galeria360.vue";
import GaleriaVideo from "../../../Galeria/GaleriaVideo.vue";
import { useStore } from 'vuex';
import MultimediaFullScreen from './MultimediaFullScreen.vue';
import $ from 'jquery'
export default {
components: {
IconBase,
IconFavoritos,
IconVideos,
Icon360,
IconFotos,
IconPantallaCompleta,
Galleria,
Galeria360,
GaleriaVideo,
MultimediaFullScreen,
},
props: ["item"],
setup(props) {
const item = ref(null);
item.value = props.item;
const store = useStore()
const arrImgs = ref([]);
const arrVids = ref([]);
const arr360 = ref([]);
const activeIndex = ref(0);
// Variable para saber qué estoy mostrando: 1- imagenes. 2- video. 3-360
const mostrando = ref(1);
const setMostrando = (val) => {
mostrando.value = val;
};
// Obtengo imagenes
item.value.imagenes.map((e) => {
let obj = {
image: e.image,
thumb: e.thumb,
};
arrImgs.value.push(obj);
});
// Obtengo videos
if (item.value.videos.length) {
item.value.videos.map((e) => {
let obj = {
id: e.id,
titulo: e.title,
descripcion: e.description,
provider: e.provider,
key: e.key_video,
url: e.url,
player_url: e.player_url,
};
if (e.provider == "matterport") {
arr360.value.push(obj);
} else if (e.provider == "youtube") {
arrVids.value.push(obj);
}
});
}
const abrirGaleriaFullScreen = () => {
store.dispatch("propiedadPopup/galeriaFullScreenAction", true);
setTimeout(() => {
$("#toolbar1").focus();
}, 100);
};
return { arrImgs, arrVids, arr360, mostrando, setMostrando, activeIndex, abrirGaleriaFullScreen, item };
},
};
</script>