wip

resources/views/vendor/filament-media-action/actions/media-modal-content.blade.php

@@ -0,0 +1,147 @@
+<div class="w-full flex flex-col justify-center items-center h-full"
+     x-data="{
+            loading: true,
+            autoplayed: false,
+
+            init() {
+                this.loading = true;
+                let mediaElement = this.$refs.mediaFrame;
+
+                if (!mediaElement) {
+                    this.loading = false;
+                    return;
+                }
+
+                if (mediaElement.tagName === 'VIDEO' || mediaElement.tagName === 'AUDIO') {
+                    mediaElement.load();
+
+                    mediaElement.onload = () => {
+                        this.loading = false;
+                    };
+                    mediaElement.oncanplaythrough = () => {
+                        this.loading = false;
+                    };
+                    mediaElement.onloadstart = () => {
+                        this.loading = true;
+                    };
+                    mediaElement.onerror = () => {
+                        this.loading = false;
+                    };
+
+                    if (mediaElement.readyState >= 3) {
+                        this.loading = false;
+                    }
+
+                    // Autoplay logic
+                    if (@js($autoplay) && mediaElement.play) {
+                        this.autoplayed = true;
+                        mediaElement.play().catch(() => {
+                            console.log('Autoplay failed or was blocked.');
+                        });
+                    }
+                } else {
+                    this.loading = true;
+
+                    mediaElement.onload = () => {
+                        setTimeout(() => {
+                            this.loading = false;
+                        }, 200);
+                    };
+                    mediaElement.onerror = () => {
+                        this.loading = false;
+                    };
+                }
+            },
+
+            resetAutoplay() {
+                this.autoplayed = false;
+            }
+        }"
+     @open-modal.window="resetAutoplay"
+>
+
+    <div class="flex h-full flex-col justify-center items-center" x-show="loading">
+        <x-filament::loading-indicator class="h-10 w-10" />
+        <span class="text-center font-bold">{{ __('filament-media-action::media-action.loading') }}</span>
+    </div>
+
+    <div class="mediaContainer w-full flex flex-col justify-center items-center h-full" x-show="!loading">
+        @if ($mediaType === \Hugomyb\FilamentMediaAction\Actions\MediaAction::TYPE_YOUTUBE)
+            @php
+                $youtubeId = '';
+
+                // Parse the URL to get components
+                $parsedUrl = parse_url($media);
+
+                if (isset($parsedUrl['host'])) {
+                    // Check if it's a youtu.be short URL
+                    if (str_contains($parsedUrl['host'], 'youtu.be')) {
+                        $youtubeId = ltrim($parsedUrl['path'], '/');
+                    }
+                    // Check if it's a regular youtube.com URL
+                    elseif (str_contains($parsedUrl['host'], 'youtube.com')) {
+                        parse_str($parsedUrl['query'] ?? '', $queryParams);
+                        $youtubeId = $queryParams['v'] ?? '';
+                    }
+                }
+            @endphp
+
+            @if ($youtubeId)
+                <iframe x-ref="mediaFrame" class="rounded-lg" width="100%"
+                        src="https://www.youtube.com/embed/{{ $youtubeId }}{{ $autoplay ? '?autoplay=1' : '' }}"
+                        frameborder="0"
+                        style="aspect-ratio: 16 / 9;"
+                        allowfullscreen
+                ></iframe>
+            @else
+                <p>Invalid YouTube URL.</p>
+            @endif
+
+        @elseif ($mediaType === \Hugomyb\FilamentMediaAction\Actions\MediaAction::TYPE_AUDIO)
+            <audio
+                    x-ref="mediaFrame"
+                    class="rounded-lg w-full"
+                    style="width: 100%"
+                    controls
+                    @if($controlsList) controlsList="{{ $controlsList }}" @endif
+                    @canplay="loading = false"
+                    @loadeddata="loading = false"
+                    @play="loading = false"
+                    {{ $preload ? '' : 'preload="none"' }}
+            >
+                <source src="{{ $media }}" @if($mime && $mime !== 'unknown') type="{{ $mime }}" @endif>
+                Your browser does not support the audio element.
+            </audio>
+
+        @elseif ($mediaType === \Hugomyb\FilamentMediaAction\Actions\MediaAction::TYPE_VIDEO)
+            <video
+                    x-ref="mediaFrame"
+                    class="rounded-lg w-full"
+                    width="100%"
+                    style="aspect-ratio: 16 / 9;"
+                    controls
+                    playsinline
+                    @if($controlsList) controlsList="{{ $controlsList }}" @endif
+                    @canplaythrough="loading = false"
+                    {{ $preload ? '' : 'preload="none"' }}
+            >
+                <source src="{{ $media }}" @if($mime && $mime !== 'unknown') type="{{ $mime }}" @endif>
+                Your browser does not support the video tag.
+            </video>
+
+        @elseif ($mediaType === \Hugomyb\FilamentMediaAction\Actions\MediaAction::TYPE_IMAGE)
+
+            <img x-ref="mediaFrame" class="rounded-lg" src="{{ $media }}" alt="Media Image"
+                 style="max-width: 100%; height: auto;" @load="loading = false">
+
+        @elseif ($mediaType === \Hugomyb\FilamentMediaAction\Actions\MediaAction::TYPE_PDF)
+
+            <iframe x-ref="mediaFrame" class="rounded-lg" style="min-height: 600px"
+                    src="{{ $media }}" width="100%" height="100%"
+                    @load="loading = false"></iframe>
+
+        @else
+            <p>{{ __('filament-media-action::unsupported-media-type') }}</p>
+        @endif
+    </div>
+</div>