lumina-slides 8.9.4 → 9.0.0

package/src/components/base/BaseSlide.vue

@@ -0,0 +1,122 @@
+<template>
+  <div
+    ref="container"
+    class="w-full min-h-full relative text-white"
+    :data-lumina-id="slideId"
+    v-show="elState.visible"
+    :class="[customClass, elState.class].filter(Boolean)"
+    :style="{ ...slideStyle, ...elState.style }">
+    <!-- Dynamic Background Layer -->
+    <div class="absolute inset-0 z-0 pointer-events-none overflow-hidden">
+
+      <!-- Background Image -->
+      <div v-if="bgType === 'image'" class="absolute inset-0 bg-cover bg-center transition-opacity duration-1000"
+        :style="bgImageStyle">
+      </div>
+
+      <!-- Background Video -->
+      <video v-else-if="bgType === 'video'"
+        class="absolute inset-0 w-full h-full object-cover transition-opacity duration-1000"
+        :style="{ opacity: bgOpacity }" :src="bgSrc" :poster="bgPoster" :autoplay="bgAutoplay" :loop="bgLoop"
+        :muted="bgMuted" playsinline>
+      </video>
+      <div v-if="bgType === 'video'"
+        class="absolute inset-0 bg-[var(--lumina-colors-background,black)]/30 pointer-events-none transition-opacity duration-1000">
+      </div>
+
+      <!-- Slot for extra background elements (orb, noise, etc) -->
+      <slot name="background"></slot>
+    </div>
+
+    <!-- Main Content -->
+    <div class="relative z-10 w-full h-full">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import { useTransition } from '../../composables/useTransition';
+import { useElementState } from '../../composables/useElementState';
+import { resolveId } from '../../core/elementResolver';
+import type { BaseSlideData, VideoProperties } from '../../core/types';
+
+/**
+ * BASE SLIDE COMPONENT
+ * The standard wrapper for all slide layouts.
+ */
+
+const props = defineProps<{
+  data: BaseSlideData;
+  customClass?: string;
+  slideIndex?: number;
+}>();
+
+const slideId = computed(() => resolveId(props.data, props.slideIndex ?? 0, ['slide']));
+const elState = useElementState(slideId);
+
+const container = ref<HTMLElement | null>(null);
+
+// Initialize Animation Logic - Now passing slide data for granular control
+const { animateIn, animateOut } = useTransition(container, props.data);
+
+defineExpose({ animateIn, animateOut });
+
+// --- Background Logic ---
+
+const slideStyle = computed(() => {
+  const bg = props.data.meta?.colors?.background;
+  return bg ? { backgroundColor: bg } : {};
+});
+
+const bgType = computed(() => {
+  if (!props.data.background) return null;
+  if (typeof props.data.background === 'string') return 'image';
+  if ((props.data.background as VideoProperties).type === 'video') return 'video';
+  return null;
+});
+
+const bgSrc = computed(() => {
+  if (!props.data.background) return '';
+  if (typeof props.data.background === 'string') return props.data.background;
+  return (props.data.background as VideoProperties).src;
+});
+
+const bgImageStyle = computed(() => {
+  if (bgType.value !== 'image') return {};
+  return {
+    backgroundImage: `url(${bgSrc.value})`,
+    opacity: bgOpacity.value,
+    backgroundSize: props.data.meta?.backgroundSize || 'cover'
+  };
+});
+
+const bgPoster = computed(() => {
+  if (bgType.value !== 'video') return undefined;
+  return (props.data.background as VideoProperties).poster;
+});
+
+const bgAutoplay = computed(() => {
+  if (bgType.value !== 'video') return undefined;
+  const vid = props.data.background as VideoProperties;
+  return vid.autoplay ?? true;
+});
+
+const bgLoop = computed(() => {
+  if (bgType.value !== 'video') return undefined;
+  const vid = props.data.background as VideoProperties;
+  return vid.loop ?? true;
+});
+
+const bgMuted = computed(() => {
+  if (bgType.value !== 'video') return undefined;
+  const vid = props.data.background as VideoProperties;
+  return vid.muted ?? true;
+});
+
+const bgOpacity = computed(() => {
+  return props.data.backgroundOpacity ?? 1;
+});
+
+</script>

package/src/components/base/LuminaElement.vue

@@ -0,0 +1,67 @@
+<template>
+  <component
+    :is="tag"
+    :data-lumina-id="luminaId"
+    :style="mergedStyle"
+    :class="[state.class, propClass].filter(Boolean)">
+    <slot />
+  </component>
+</template>
+
+<script setup lang="ts">
+/**
+ * LuminaElement — Wrapper that applies element control state (visibility, opacity, transform,
+ * class, style) to its slot. Sets data-lumina-id so engine.getElementById and ElementController.animate
+ * can find the node. Use with :id="resolveId(data, slideIndex, path)" in layouts.
+ *
+ * @prop id - Element id (from resolveId, elemId, or explicit). Required.
+ * @prop tag - Root tag name. Default 'div'.
+ * @prop class - Extra class(es) merged with state.class.
+ * @prop style - Extra style merged with state.style (state overrides for opacity/transform).
+ *
+ * @see useElementState
+ * @see resolveId
+ * @see ElementState
+ */
+import { computed, unref } from 'vue';
+import { useElementState } from '../../composables/useElementState';
+
+const props = withDefaults(
+  defineProps<{
+    /** Element id for engine.element(id) and data-lumina-id. From resolveId(slide, slideIndex, path). */
+    id: string;
+    /** HTML tag for the root. Default 'div'. */
+    tag?: string;
+    /** Additional CSS class(es). Merged with state.class from the store. */
+    class?: string | string[];
+    /** Additional inline style. state.style (opacity, transform, etc.) takes precedence. */
+    style?: Record<string, string | number>;
+  }>(),
+  { tag: 'div' }
+);
+
+const state = useElementState(() => props.id);
+
+/** Only set data-lumina-id when id is a non-empty string; avoids data-lumina-id="undefined" or "". */
+const luminaId = computed(() => {
+  const v = props.id;
+  if (v == null) return undefined;
+  const s = String(v).trim();
+  return s ? s : undefined;
+});
+
+const propClass = computed(() => {
+  const c = props.class;
+  if (Array.isArray(c)) return c.filter(Boolean).join(' ');
+  return c || '';
+});
+
+const mergedStyle = computed(() => {
+  const resolved = unref(state.style) ?? {};
+  const out = { ...(props.style || {}), ...resolved };
+  if ('opacity' in resolved && out.transition == null) {
+    out.transition = 'opacity var(--lumina-element-opacity-transition, 0.35s ease-out)';
+  }
+  return out;
+});
+</script>

package/src/components/base/VideoPlayer.vue

@@ -0,0 +1,204 @@
+<template>
+    <div class="relative w-full h-full group bg-black overflow-hidden" @mousemove="handleMouseMove"
+        @mouseleave="showControls = false">
+
+        <!-- Video Element -->
+        <video ref="videoRef" :class="['w-full h-full', objectFitClass]" :src="src" :poster="poster"
+            :autoplay="autoplay" :loop="loop" :muted="muted" playsinline @click="togglePlay"
+            @timeupdate="handleTimeUpdate" @loadedmetadata="handleMetadata" @ended="handleEnded">
+        </video>
+
+        <!-- Custom Controls Overlay -->
+        <transition name="fade">
+            <div v-if="controls && showControls"
+                class="absolute bottom-0 left-0 w-full p-4 bg-gradient-to-t from-black/80 via-black/40 to-transparent transition-opacity duration-300">
+
+                <!-- Progress Bar -->
+                <div class="w-full h-1 bg-white/20 rounded-full mb-4 cursor-pointer relative group/progress"
+                    @click="seek">
+                    <div class="absolute top-0 left-0 h-full rounded-full transition-all duration-100"
+                        :style="{ width: `${progress}%`, backgroundColor: 'var(--lumina-colors-primary, #3b82f6)' }">
+                    </div>
+                    <!-- Hover Effect -->
+                    <div class="absolute top-1/2 -translate-y-1/2 w-3 h-3 bg-white rounded-full opacity-0 group-hover/progress:opacity-100 transition-opacity"
+                        :style="{ left: `${progress}%` }"></div>
+                </div>
+
+                <!-- Controls Row -->
+                <div class="flex items-center justify-between text-white">
+                    <div class="flex items-center gap-4">
+                        <!-- Play/Pause -->
+                        <button @click="togglePlay" class="hover:text-[var(--lumina-colors-primary)] transition">
+                            <i :class="['ph-thin text-xl', isPlaying ? 'ph-pause' : 'ph-play']"></i>
+                        </button>
+
+                        <!-- Volume -->
+                        <div class="flex items-center gap-2 group/vol">
+                            <button @click="toggleMute"
+                                class="hover:text-[var(--lumina-colors-primary)] transition w-6">
+                                <i :class="['ph-thin', isMuted ? 'ph-speaker-slash' : 'ph-speaker-high']"></i>
+                            </button>
+                            <!-- Volume Slider (Hidden until hover) -->
+                            <input type="range" min="0" max="1" step="0.1" v-model.number="volume"
+                                class="w-0 overflow-hidden group-hover/vol:w-20 transition-all duration-300 h-1 bg-white/20 rounded-lg appearance-none cursor-pointer [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-2 [&::-webkit-slider-thumb]:h-2 [&::-webkit-slider-thumb]:bg-white [&::-webkit-slider-thumb]:rounded-full" />
+                        </div>
+
+                        <!-- Time -->
+                        <span class="text-xs font-mono opacity-70">{{ formatTime(currentTime) }} / {{
+                            formatTime(duration) }}</span>
+                    </div>
+
+                    <!-- Right Side -->
+                    <div class="flex items-center gap-4">
+                        <!-- Fullscreen -->
+                        <button @click="toggleFullscreen" class="hover:text-[var(--lumina-colors-primary)] transition">
+                            <i class="ph-thin ph-corners-out"></i>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </transition>
+
+        <!-- Big Play Button Overlay (when paused) -->
+        <div v-if="controls && !isPlaying && !hasPlayedOnce"
+            class="absolute inset-0 flex items-center justify-center pointer-events-none">
+            <div class="w-16 h-16 rounded-full bg-black/50 backdrop-blur-sm border border-white/10 flex items-center justify-center text-white pointer-events-auto cursor-pointer hover:scale-110 transition duration-300"
+                @click="togglePlay">
+                <i class="ph-thin ph-play text-2xl ml-1"></i>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, onMounted, onUnmounted } from 'vue';
+
+const props = defineProps({
+    src: { type: String, required: true },
+    poster: { type: String, default: '' },
+    autoplay: { type: Boolean, default: false },
+    loop: { type: Boolean, default: false },
+    muted: { type: Boolean, default: false },
+    controls: { type: Boolean, default: true },
+    objectFit: { type: String, default: 'cover' } // cover | contain
+});
+
+const videoRef = ref<HTMLVideoElement | null>(null);
+const isPlaying = ref(false);
+const isMuted = ref(props.muted);
+const volume = ref(1);
+const progress = ref(0);
+const currentTime = ref(0);
+const duration = ref(0);
+const showControls = ref(false);
+const hasPlayedOnce = ref(false);
+
+let controlsTimeout: number | undefined;
+
+const objectFitClass = computed(() => {
+    return props.objectFit === 'contain' ? 'object-contain' : 'object-cover';
+});
+
+// Format seconds to MM:SS
+const formatTime = (seconds: number) => {
+    const m = Math.floor(seconds / 60);
+    const s = Math.floor(seconds % 60);
+    return `${m}:${s.toString().padStart(2, '0')}`;
+};
+
+const togglePlay = () => {
+    if (!videoRef.value) return;
+    if (videoRef.value.paused) {
+        videoRef.value.play();
+        isPlaying.value = true;
+        hasPlayedOnce.value = true;
+    } else {
+        videoRef.value.pause();
+        isPlaying.value = false;
+    }
+};
+
+const toggleMute = () => {
+    if (!videoRef.value) return;
+    videoRef.value.muted = !videoRef.value.muted;
+    isMuted.value = videoRef.value.muted;
+    if (isMuted.value) volume.value = 0;
+    else volume.value = 1;
+};
+
+const handleTimeUpdate = () => {
+    if (!videoRef.value) return;
+    currentTime.value = videoRef.value.currentTime;
+    progress.value = (currentTime.value / duration.value) * 100 || 0;
+};
+
+const handleMetadata = () => {
+    if (!videoRef.value) return;
+    duration.value = videoRef.value.duration;
+    if (props.autoplay) {
+        togglePlay();
+    }
+};
+
+const handleEnded = () => {
+    isPlaying.value = false;
+    if (props.loop && videoRef.value) {
+        videoRef.value.currentTime = 0;
+        togglePlay();
+    }
+};
+
+const seek = (e: MouseEvent) => {
+    if (!videoRef.value) return;
+    const bar = e.currentTarget as HTMLElement;
+    const percent = e.offsetX / bar.clientWidth;
+    videoRef.value.currentTime = percent * duration.value;
+    progress.value = percent * 100;
+};
+
+const toggleFullscreen = () => {
+    if (!videoRef.value) return;
+    const el = videoRef.value.parentElement;
+    if (!document.fullscreenElement && el) {
+        el.requestFullscreen();
+    } else {
+        document.exitFullscreen();
+    }
+};
+
+const handleMouseMove = () => {
+    showControls.value = true;
+    clearTimeout(controlsTimeout);
+    controlsTimeout = setTimeout(() => {
+        if (isPlaying.value) showControls.value = false;
+    }, 3000);
+};
+
+// Watch volume slider
+watch(volume, (val) => {
+    if (!videoRef.value) return;
+    videoRef.value.volume = val;
+    isMuted.value = val === 0;
+    videoRef.value.muted = val === 0;
+});
+
+onMounted(() => {
+    // Sync initial muted state
+    if (videoRef.value) {
+        videoRef.value.muted = props.muted;
+        isMuted.value = props.muted;
+    }
+});
+</script>
+
+<style scoped>
+/* Custom Range Input Styling for Volume */
+input[type=range] {
+    -webkit-appearance: none;
+    background: transparent;
+}
+
+input[type=range]:focus {
+    outline: none;
+}
+</style>

package/src/components/layouts/LayoutAuto.vue

@@ -0,0 +1,71 @@
+<template>
+    <component :is="resolvedLayout" :data="data" :slide-index="slideIndex" @action="emit('action', $event)" />
+</template>
+
+<script setup lang="ts">
+import { computed, inject } from 'vue';
+import { StoreKey } from '../../core/store';
+
+const props = defineProps<{
+    data: any;
+    slideIndex?: number;
+}>();
+
+const emit = defineEmits<{ (e: 'action', payload: unknown): void }>();
+const store = inject(StoreKey);
+const slideIndex = computed(() => props.slideIndex ?? store?.state.currentIndex ?? 0);
+
+// Module-level state to track variety across slide changes (Singleton per session)
+// This resets on page reload, which is fine.
+let lastAutoType: string | null = null;
+
+const resolvedLayout = computed(() => {
+    const d = props.data || {};
+
+    // 1. Hard Heuristics (Explicit Data Structures)
+    const hasTimeline = Array.isArray(d.timeline) && d.timeline.length > 0;
+    const hasSteps = Array.isArray(d.steps) && d.steps.length > 0;
+    const hasFeatures = Array.isArray(d.features) && d.features.length > 0;
+    const hasImage = !!d.image;
+    const hasChart = !!d.chartType && !!d.data?.datasets;
+
+    let candidate = 'layout-statement'; // Default
+
+    // 2. Semantic Priority
+    if (hasChart) {
+        candidate = 'layout-chart';
+    } else if (hasTimeline) {
+        candidate = 'layout-timeline';
+    } else if (hasSteps) {
+        candidate = 'layout-steps';
+    } else if (hasFeatures) {
+        candidate = 'layout-features';
+    } else if (hasImage) {
+        candidate = 'layout-half';
+    } else {
+        // Text Only Analysis: title + subtitle + paragraphs. For a future "Document" layout
+        // we could use text length to prefer a layout with scrolling. Statement is best for now.
+    }
+
+    // Improvement: "Variety Enforcer"
+    // If we picked the same layout as last time, try to switch if possible.
+    if (candidate === lastAutoType && candidate === 'layout-statement' && hasImage) {
+        // If we defaulted to Statement but have an image, maybe we used Statement last time?
+        // Actually if hasImage is true, we picked Half.
+        // Let's say we have small text and no image.
+        // If we are repeating Statement, maybe we can't do much.
+    }
+
+    // Side-effect: Store choice (in onMounted or watcher? Computed is pure usually)
+    // We cannot change module state in computed easily without side effects.
+    // Putting it here is "okay" for this simple use case.
+    lastAutoType = candidate;
+
+    return candidate;
+});
+
+// Improvement: "Layout Downgrade Fallback" happens implicitly.
+// We strictly only return 'layout-features' if `hasFeatures` is true.
+// This prevents picking a layout that would break.
+
+</script>