Added external video support

config/rapidez/models.php

@@ -22,6 +22,7 @@
     'product'                   => Rapidez\Core\Models\Product::class,
     'product_image'             => Rapidez\Core\Models\ProductImage::class,
     'product_image_value'       => Rapidez\Core\Models\ProductImageValue::class,
+    'product_video_value'       => Rapidez\Core\Models\ProductVideoValue::class,
     'product_link'              => Rapidez\Core\Models\ProductLink::class,
     'product_option'            => Rapidez\Core\Models\ProductOption::class,
     'product_option_price'      => Rapidez\Core\Models\ProductOptionPrice::class,

resources/js/components/Product/Images.vue

@@ -4,6 +4,7 @@ import { useEventListener } from '@vueuse/core'
 export default {
     data: () => ({
         images: config.product.images,
+        media: config.product.media,
         active: 0,
         zoomed: false,
         touchStartX: 0,
@@ -32,7 +33,8 @@ export default {
                     ).length
                 ) {
                     self.images = simpleProduct.images
-                    self.active = Math.min(self.active, self.images.length - 1)
+                    self.media = simpleProduct.media
+                    self.active = Math.min(self.active, self.media.length - 1)
                 }
             })
         })
@@ -54,7 +56,7 @@ export default {
             if (e.key == 'ArrowLeft' && this.active > 0) {
                 // left
                 this.active--
-            } else if (e.key == 'ArrowRight' && this.active < this.images.length - 1) {
+            } else if (e.key == 'ArrowRight' && this.active < this.media.length - 1) {
                 // right
                 this.active++
             } else if (e.key == 'Escape') {
@@ -79,7 +81,7 @@ export default {
                 return
             }
 
-            if (distance < 0 && this.active < this.images.length - 1) {
+            if (distance < 0 && this.active < this.media.length - 1) {
                 this.change(this.active + 1)
             } else if (distance > 0 && this.active > 0) {
                 this.change(this.active - 1)

resources/views/product/partials/gallery/popup.blade.php

@@ -1,19 +1,31 @@
-<div v-if="images.length && zoomed" class="fixed inset-0 bg-white cursor-zoom-out flex z-popup" v-cloak>
+<div v-if="media.length && zoomed" class="fixed inset-0 bg-white cursor-zoom-out flex z-popup" v-cloak>
     <div class="flex flex-1 items-center justify-center" v-on:click.prevent="toggleZoom">
         <img
-            :src="config.media_url + '/catalog/product' + images[active]"
+            v-if="media[active].media_type === 'image'"
+            :src="config.media_url + '/catalog/product' + media[active].image"
             alt="{{ $product->name }}"
             class="object-contain max-h-full mx-auto block"
             loading="lazy"
         />
+        <iframe
+            v-else-if="media[active].media_type === 'external-video'"
+            class="h-[calc(100%-200px)] w-[calc(100%-200px)]"
+            :src="media[active].video_url"
+            allow="autoplay"
+            width="100%"
+            height="100%"
+            frameborder="0"
+            loading="lazy"
+        >
+        </iframe>
         <div class="z-popup-actions pointer-events-none fixed top-3 right-3">
             <x-heroicon-o-x-mark class="size-6" />
         </div>
     </div>
     <button class="z-popup-actions top-1/2 left-3 -translate-y-1/2 absolute" v-if="active" v-on:click="change(active-1)" aria-label="@lang('Prev')">
         <x-heroicon-o-chevron-left class="size-8 text-muted" />
     </button>
-    <button class="z-popup-actions top-1/2 right-3 -translate-y-1/2 absolute" v-if="active != images.length-1" v-on:click="change(active+1)" aria-label="@lang('Next')">
+    <button class="z-popup-actions top-1/2 right-3 -translate-y-1/2 absolute" v-if="active != media.length-1" v-on:click="change(active+1)" aria-label="@lang('Next')">
         <x-heroicon-o-chevron-right class="size-8 text-muted" />
     </button>
 </div>

resources/views/product/partials/gallery/slider.blade.php

@@ -1,27 +1,40 @@
-<div class="relative" v-if="images.length">
+<div class="relative" v-if="media.length">
     <a
         v-on:click.prevent="toggleZoom"
-        v-bind:href="config.media_url + '/catalog/product' + images[active]"
+        v-bind:href="config.media_url + '/catalog/product' + media[active].image"
         class="flex h-[440px] cursor-zoom-in items-center justify-center rounded border p-5"
     >
         <img
             {{-- src should always be below v-bind:src --}}
-            v-bind:src="url('/storage/{{ config('rapidez.store') }}/resizes/400/magento/catalog/product' + images[active] + '.webp')"
-            src="{{ url('/storage/'.config('rapidez.store').'/resizes/400/magento/catalog/product'.Arr::first($selectedChild->images).'.webp') }}"
+            v-if="media[active].media_type === 'image'"
+            v-bind:src="url('/storage/{{ config('rapidez.store') }}/resizes/400/magento/catalog/product' + media[active].image + '.webp')"
+            src="{{ url('/storage/'.config('rapidez.store').'/resizes/400/magento/catalog/product'.Arr::first($selectedChild->media)['image'].'.webp') }}"
             alt="{{ $product->name }}"
             class="max-h-full object-contain"
             style="view-transition-name: image-{{ $product->sku }}"
             fetchpriority="high"
             width="400"
             height="400"
         />
+        <iframe
+            v-else-if="media[active].media_type === 'external-video'"
+            v-cloak
+            class="h-full w-full"
+            :src="media[active].video_url"
+            allow="autoplay"
+            width="100%"
+            height="100%"
+            frameborder="0"
+            loading="lazy"
+        >
+        </iframe>
     </a>
 
-    @if (count($selectedChild->images ?? []) > 1)
+    @if (count($selectedChild->media ?? []) > 1)
         <button v-if="active" v-on:click="change(active-1)" class="z-10 top-1/2 left-3 -translate-y-1/2 absolute" aria-label="@lang('Prev')" v-cloak>
             <x-heroicon-o-chevron-left class="size-8 text" />
         </button>
-        <button v-if="active != images.length-1" v-on:click="change(active+1)" class="z-10 top-1/2 right-3 -translate-y-1/2 absolute" aria-label="@lang('Next')">
+        <button v-if="active != media.length-1" v-on:click="change(active+1)" class="z-10 top-1/2 right-3 -translate-y-1/2 absolute" aria-label="@lang('Next')">
             <x-heroicon-o-chevron-right class="size-8 text" />
         </button>
     @endif

resources/views/product/partials/gallery/thumbnails.blade.php

@@ -10,8 +10,8 @@
     @for ($imageId = 0; $imageId < max($breakpoints); $imageId++)
         <button
             @attributes([
-                'v-cloak' => !($imageId < count($selectedChild->images) && count($selectedChild->images) > 1),
-                'v-if' => $imageId . ' < images.length && images.length > 1',
+                'v-cloak' => !($imageId < count($selectedChild->media) && count($selectedChild->media) > 1),
+                'v-if' => $imageId . ' < media.length && media.length > 1',
             ])
             @class([
                 'max-w-24 relative flex aspect-square flex-1 items-center justify-center overflow-hidden rounded border bg-white p-1.5 outline-primary transition-all',
@@ -30,10 +30,14 @@
         >
             <img
                 {{-- src should always be above v-bind:src --}}
-                @if ($imageId < count($selectedChild->images))
-                    src="{{ url('/storage/'.config('rapidez.store').'/resizes/80x80/magento/catalog/product'.$selectedChild->images[$imageId].'.webp') }}"
+                @if ($imageId < count($selectedChild->media))
+                    @if ($selectedChild->media[$imageId]['media_type'] === 'external-video')
+                        src="{{ config('rapidez.media_url') }}/catalog/product{{ $selectedChild->media[$imageId]['image'] }}"
+                    @else
+                        src="{{ url('/storage/'.config('rapidez.store').'/resizes/80x80/magento/catalog/product'.$selectedChild->media[$imageId]['image'].'.webp') }}"
+                    @endif
                 @endif
-                v-bind:src="url('/storage/{{ config('rapidez.store') }}/resizes/80x80/magento/catalog/product' + images[{{ $imageId }}] + '.webp')"
+                v-bind:src="url(media[{{ $imageId }}].media_type === 'external-video' ? window.config.media_url + '/catalog/product' + media[{{ $imageId }}].image : '/storage/{{ config('rapidez.store') }}/resizes/80x80/magento/catalog/product' + media[{{ $imageId }}].image + '.webp')"
                 alt="{{ $product->name }}"
                 class="block max-h-full w-auto object-contain"
                 width="80"

resources/views/product/partials/gallery/thumbnails/show-more.blade.php

@@ -1,8 +1,8 @@
 {{-- This component shows an overlay on the last shown thumbnail if there are more thumbnails after it. --}}
 
 <div @attributes([
-    'v-cloak' => !(count($selectedChild->images) - $imageId - 1),
-    'v-if' => 'images.length - ' . $imageId . ' - 1',
+    'v-cloak' => !(count($selectedChild->media) - $imageId - 1),
+    'v-if' => 'media.length - ' . $imageId . ' - 1',
 ])>
     <span
         @class([
@@ -17,9 +17,9 @@
     >
         <span
             class="size-9 flex items-center justify-center rounded-full bg-white text-sm font-bold text shadow-md"
-            v-txt="'+' + (images.length - {{ $imageId }} - 1)"
+            v-txt="'+' + (media.length - {{ $imageId }} - 1)"
         >
-            +{{ count($selectedChild->images) - $imageId - 1 }}
+            +{{ count($selectedChild->media) - $imageId - 1 }}
         </span>
     </span>
 </div>

resources/views/product/partials/images.blade.php

@@ -1,5 +1,5 @@
 <div class="relative flex flex-col flex-1">
-    <images v-slot="{ images, active, zoomed, toggleZoom, change }">
+    <images v-slot="{ images, media, active, zoomed, toggleZoom, change }">
         <div class="flex-1" ref="root">
             <div class="sticky top-5 bg-white">
                 @include('rapidez::product.partials.gallery.slider')

src/Http/Controllers/ProductController.php

@@ -34,6 +34,7 @@ public function show(int $productId)
             'special_price',
             'prices',
             'images',
+            'media',
             'url',
             'in_stock',
             'min_sale_qty',

src/Models/Product.php

@@ -9,6 +9,7 @@
 use Illuminate\Database\Eloquent\Relations\HasOne;
 use Illuminate\Support\Arr;
 use Illuminate\Support\Collection;
+use Illuminate\Support\Str;
 use Rapidez\Core\Facades\Rapidez;
 use Rapidez\Core\Models\Relations\BelongsToManyCallback;
 use Rapidez\Core\Models\Scopes\Product\EnabledScope;
@@ -57,6 +58,7 @@ class Product extends Model
     protected $appends = [
         'grouped',
         'images',
+        'media',
         'in_stock',
         'price',
         'special_price',
@@ -102,6 +104,19 @@ public function gallery(): BelongsToMany
         );
     }
 
+    protected function media(): Attribute
+    {
+        return Attribute::get(
+            fn (): array => $this->gallery->sortBy('productImageValue.position')->map(function (ProductImage $value) {
+                return [
+                    'media_type' => $value->media_type,
+                    'image'      => $value->value,
+                    'video_url'  => isset($value->video) ? Str::embedUrl($value->video->url) : null, // @phpstan-ignore-line
+                ];
+            })->values()->toArray()
+        );
+    }
+
     protected function images(): Attribute
     {
         return Attribute::get(

src/Models/ProductImage.php

@@ -11,7 +11,7 @@ class ProductImage extends Model
 
     protected $primaryKey = 'value_id';
 
-    protected $with = ['productImageValue'];
+    protected $with = ['productImageValue', 'video'];
 
     protected static function booted(): void
     {
@@ -31,4 +31,9 @@ public function productImageValue(): BelongsTo
     {
         return $this->belongsTo(config('rapidez.models.product_image_value'), 'value_id', 'value_id');
     }
+
+    public function video(): BelongsTo
+    {
+        return $this->belongsTo(config('rapidez.models.product_video_value'), 'value_id', 'value_id');
+    }
 }

src/Models/ProductVideoValue.php

@@ -0,0 +1,10 @@
+<?php
+
+namespace Rapidez\Core\Models;
+
+class ProductVideoValue extends Model
+{
+    protected $table = 'catalog_product_entity_media_gallery_value_video';
+
+    protected $primaryKey = 'value_id';
+}

src/RapidezServiceProvider.php

@@ -302,6 +302,78 @@ function ($filename) use ($manifest) {
             );
         });
 
+        Str::macro(
+            'embedUrl',
+            function ($url) {
+                if (Str::contains($url, 'vimeo')) {
+                    $url = str_replace('/vimeo.com', '/player.vimeo.com/video', $url);
+
+                    // Handle private vimeo urls.
+                    $hash = null;
+                    if (! Str::contains($url, 'progressive_redirect') && Str::substrCount($url, '/') > 4) {
+                        $hash = Str::afterLast($url, '/');
+                        $url = Str::beforeLast($url, '/');
+
+                        if (Str::contains($hash, '?')) {
+                            $url .= '?' . Str::after($hash, '?');
+                            $hash = Str::before($hash, '?');
+                        }
+                    }
+
+                    $paramsToAdd = '?dnt=1&watch_full_video=false&vimeo_logo=false&speed=false&chromecast=false&byline=false&badge=false&ask_ai=false&airplay=false';
+                    if ($hash) {
+                        $paramsToAdd .= '&h=' . $hash;
+                    }
+
+                    if (Str::contains($url, '?')) {
+                        $url = str_replace('?', $paramsToAdd . '&', $url);
+                    } else {
+                        $url .= $paramsToAdd;
+                    }
+
+                    return $url;
+                }
+
+                if (Str::contains($url, 'youtu.be')) {
+                    $url = str_replace('youtu.be', 'www.youtube.com/embed', $url);
+
+                    // Check for start at point and replace it with correct parameter.
+                    if (Str::contains($url, '?t=')) {
+                        $url = str_replace('?t=', '?start=', $url);
+                    }
+                }
+
+                if (Str::contains($url, 'youtube.com/watch?v=')) {
+                    $url = str_replace('watch?v=', 'embed/', $url);
+
+                    if (Str::contains($url, '&t=')) {
+                        $url = str_replace('&t=', '?start=', $url);
+                    }
+                }
+
+                if (Str::contains($url, 'youtube.com/shorts/')) {
+                    $url = str_replace('shorts/', 'embed/', $url);
+                }
+
+                if (Str::contains($url, 'youtube.com')) {
+                    $url = str_replace('youtube.com', 'youtube-nocookie.com', $url);
+                }
+
+                // This avoids SSL issues when using the non-www version
+                if (Str::contains($url, '//youtube-nocookie.com')) {
+                    $url = str_replace('//youtube-nocookie.com', '//www.youtube-nocookie.com', $url);
+                }
+
+                $url .= '&fs=0';
+
+                if (Str::contains($url, '&') && ! Str::contains($url, '?')) {
+                    $url = Str::replaceFirst('&', '?', $url);
+                }
+
+                return $url;
+            }
+        );
+
         return $this;
     }