[6.x] Support more video providers, including Cloudflare Stream

composer.json

@@ -24,6 +24,7 @@
         "league/glide": "^3.0 || ^4.0",
         "maennchen/zipstream-php": "^3.1",
         "michelf/php-smartypants": "^1.8.1",
+        "mpratt/embera": "~2.0",
         "nesbot/carbon": "^3.0",
         "pragmarx/google2fa": "^8.0 || ^9.0",
         "rebing/graphql-laravel": "^9.15",

resources/css/components/fieldtypes/video.css

@@ -0,0 +1,18 @@
+.embera-embed-responsive {
+    position: relative;
+    display: block;
+    width: 100%;
+    padding: 0;
+    overflow: hidden;
+    padding-bottom: 50%;
+}
+
+.embera-embed-responsive-item {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border: 0;
+}

resources/css/cp.css

@@ -37,4 +37,5 @@
 @import './components/fieldtypes/relationship.css';
 @import './components/fieldtypes/section.css';
 @import './components/fieldtypes/table.css';
+@import './components/fieldtypes/video.css';
 @import './components/fieldtypes/width.css';

resources/js/components/fieldtypes/VideoFieldtype.vue

@@ -1,28 +1,40 @@
 <template>
     <div class="flex flex-col space-y-3 p-1.5 bg-gray-100 border border-gray-300 dark:bg-gray-900 dark:border-gray-700 rounded-xl">
-        <ui-input-group>
-            <ui-input-group-prepend :text="__('URL')" />
-            <ui-input
-                :model-value="value"
-                :isReadOnly="isReadOnly"
-                :placeholder="__(config.placeholder) || 'https://www.youtube.com/watch?v=dQw4w9WgXcQ'"
-                :aria-label="__('Video URL')"
-                @update:model-value="update"
-                @focus="$emit('focus')"
-                @blur="$emit('blur')"
-                input-class="border-s-0"
-            />
-        </ui-input-group>
-        <ui-description v-if="isInvalid" class="text-red-600">{{ __('statamic::validation.url') }}</ui-description>
-        <iframe
-            v-if="shouldShowPreview"
-            ref="iframe"
-            :src="isVisible ? embedUrl : null"
-            frameborder="0"
-            allow="fullscreen"
-            class="aspect-video rounded-lg"
-            loading="lazy"
-        ></iframe>
+        <ui-combobox
+            :model-value="provider"
+            :options="providers"
+            option-label="provider"
+            option-value="provider"
+            :placeholder="__('Provider...')"
+            @update:model-value="changeProvider"
+        />
+
+        <ui-input
+            v-if="provider != 'Cloudflare'"
+            :aria-label="__('Video URL')"
+            input-class="border-s-0"
+            :isReadOnly="isReadOnly"
+            :model-value="url"
+            :placeholder="__(config.placeholder) || 'https://www.youtube.com/watch?v=dQw4w9WgXcQ'"
+            :prepend="__('URL')"
+            @update:model-value="detailsFromUrl"
+            @focus="$emit('focus')"
+            @blur="$emit('blur')"
+        />
+
+        <ui-input
+            v-else
+            :aria-label="__('Video ID')"
+            input-class="border-s-0"
+            :isReadOnly="isReadOnly"
+            :model-value="videoId"
+            :prepend="__('ID')"
+            @update:model-value="detailsFromCloudflare"
+            @focus="$emit('focus')"
+            @blur="$emit('blur')"
+        />
+
+        <div v-if="shouldShowPreview" v-html="embed"></div>
     </div>
 </template>
 
@@ -34,70 +46,81 @@ export default {
 
     data() {
         return {
+            embed: this.meta.embed,
             isVisible: false,
             observer: null,
+            provider: this.meta.provider,
+            savedValue: null,
+            url: null,
+            videoId: null,
         };
     },
 
     computed: {
         shouldShowPreview() {
-            return !this.isInvalid && (this.isEmbeddable || this.isVideo);
+            return this.isVisible && !!this.embed;
         },
 
-        embedUrl() {
-            let embed_url = this.value || '';
+        providers() {
+            return this.meta.providers;
+        }
+    },
 
-            if (embed_url.includes('youtube')) {
-                embed_url = embed_url.includes('shorts/')
-                    ? embed_url.replace('shorts/', 'embed/')
-                    : embed_url.replace('watch?v=', 'embed/');
-            }
+    methods: {
+        changeProvider(provider) {
+            this.provider = provider;
+            this.embed = null;
+            this.url = null;
+        },
 
-            if (embed_url.includes('youtu.be')) {
-                embed_url = embed_url.replace('youtu.be', 'www.youtube.com/embed');
-            }
+        detailsFromCloudflare(id) {
+            if (id == null) return;
 
-            if (embed_url.includes('vimeo')) {
-                embed_url = embed_url.replace('/vimeo.com', '/player.vimeo.com/video');
+            this.savedValue = `cloudflare:${id}`;
+            this.videoId = id;
+            this.url = null;
 
-                if (!this.value.includes('progressive_redirect') && embed_url.split('/').length > 5) {
-                    let hash = embed_url.substr(embed_url.lastIndexOf('/') + 1);
-                    embed_url = embed_url.substr(0, embed_url.lastIndexOf('/')) + '?h=' + hash.replace('?', '&');
-                }
-            }
+            this.getVideoData();
+        },
 
-            if (embed_url.includes('&') && !embed_url.includes('?')) {
-                embed_url = embed_url.replace('&', '?');
-            }
+        detailsFromUrl(url) {
+            if (url == null) return;
 
-            return embed_url;
-        },
+            this.savedValue = url;
+            this.videoId = null;
+            this.url = url;
 
-        isEmbeddable() {
-            const url = this.value || '';
-            const isYoutube = url.includes('youtube') || url.includes('youtu.be');
-            const isVimeo = url.includes('vimeo');
-            return isYoutube || isVimeo;
+            this.getVideoData();
         },
 
-        isInvalid() {
-            let htmlRegex = new RegExp(/<([A-Z][A-Z0-9]*)\b[^>]*>.*?<\/\1>|<([A-Z][A-Z0-9]*)\b[^\/]*\/>/i);
-            return htmlRegex.test(this.value || '');
-        },
+        getVideoData() {
+            this.$axios
+                .get(this.meta.url, { params: { url: this.savedValue } })
+                .then((response) => response.data)
+                .then((data) => {
+                    this.embed = data.embed;
+                    this.provider = data.provider;
+                })
+                .catch((e) => {
+                    this.embed = null;
+                    this.$toast.error(e.response ? e.response.data.message : __('Something went wrong'));
+                });
 
-        isUrl() {
-            const url = this.value || '';
-            return url.startsWith('http://') || url.startsWith('https://');
+            this.update(this.savedValue);
         },
 
-        isVideo() {
-            const url = this.value || '';
-            const isVideo = url.includes('.mp4') || url.includes('.ogv') || url.includes('.mov') || url.includes('.webm');
-            return !this.isEmbeddable && isVideo;
-        },
+        setUrlOrId() {
+            if (this.value?.startsWith('cloudflare:')) {
+                this.videoId = this.value.replace('cloudflare:','');
+                return;
+            }
+
+            this.url = this.value;
+        }
     },
 
     mounted() {
+        this.setUrlOrId();
         this.observer = new IntersectionObserver(
             (entries) => {
                 entries.forEach((entry) => {

resources/js/tests/components/fieldtypes/VideoFieldtype.test.js

@@ -0,0 +1,126 @@
+import { flushPromises, mount } from '@vue/test-utils';
+import { afterEach, beforeEach, expect, test, vi } from 'vitest';
+import VideoFieldtype from '@/components/fieldtypes/VideoFieldtype.vue';
+import { publishContextKey } from '@/components/ui';
+
+window.__ = (key) => key;
+
+let intersect;
+let axios;
+let toast;
+
+beforeEach(() => {
+    window.IntersectionObserver = class {
+        constructor(callback) {
+            intersect = () => callback([{ isIntersecting: true, intersectionRatio: 1 }]);
+        }
+        observe() {}
+        disconnect() {}
+    };
+
+    axios = { get: vi.fn() };
+    toast = { error: vi.fn() };
+});
+
+afterEach(() => {
+    vi.restoreAllMocks();
+});
+
+const stub = (tag) => ({
+    props: ['modelValue'],
+    emits: ['update:modelValue'],
+    template: `<${tag} :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" />`,
+});
+
+const mountVideoField = (props = {}) => {
+    return mount(VideoFieldtype, {
+        props: {
+            handle: 'video',
+            config: {},
+            meta: {
+                url: '/cp/video/details',
+                providers: [{ provider: 'Cloudflare' }, { provider: 'Youtube' }],
+            },
+            ...props,
+        },
+        global: {
+            provide: { [publishContextKey]: {} },
+            mocks: { $axios: axios, $toast: toast },
+            stubs: {
+                'ui-combobox': stub('select'),
+                'ui-input': stub('input'),
+            },
+        },
+    });
+};
+
+test('cloudflare id is sent with the cloudflare prefix', async () => {
+    axios.get.mockResolvedValue({ data: { embed: '<iframe></iframe>', provider: 'Cloudflare' } });
+
+    const wrapper = mountVideoField({ meta: { url: '/cp/video/details', providers: [], provider: 'Cloudflare' } });
+
+    await wrapper.find('input').setValue('1234');
+    await flushPromises();
+
+    expect(axios.get).toHaveBeenCalledWith('/cp/video/details', { params: { url: 'cloudflare:1234' } });
+    expect(wrapper.emitted('update:value')[0]).toEqual(['cloudflare:1234']);
+});
+
+test('embed survives the provider being corrected by the lookup', async () => {
+    axios.get.mockResolvedValue({ data: { embed: '<iframe></iframe>', provider: 'Youtube' } });
+
+    const wrapper = mountVideoField();
+    intersect();
+
+    await wrapper.find('input').setValue('https://www.youtube.com/watch?v=FK3dav4bA4s');
+    await flushPromises();
+
+    expect(wrapper.vm.provider).toBe('Youtube');
+    expect(wrapper.find('input').element.value).toBe('https://www.youtube.com/watch?v=FK3dav4bA4s');
+    expect(wrapper.find('iframe').exists()).toBe(true);
+});
+
+test('changing the provider clears the embed and url', async () => {
+    const wrapper = mountVideoField({
+        value: 'https://www.youtube.com/watch?v=FK3dav4bA4s',
+        meta: { url: '/cp/video/details', providers: [], provider: 'Youtube', embed: '<iframe></iframe>' },
+    });
+    intersect();
+    await flushPromises();
+    expect(wrapper.find('iframe').exists()).toBe(true);
+
+    await wrapper.find('select').setValue('Cloudflare');
+
+    expect(wrapper.find('iframe').exists()).toBe(false);
+    expect(wrapper.vm.url).toBeNull();
+});
+
+test('embed is not rendered until the field is visible', async () => {
+    const wrapper = mountVideoField({
+        value: 'cloudflare:1234',
+        meta: { url: '/cp/video/details', providers: [], provider: 'Cloudflare', embed: '<iframe></iframe>' },
+    });
+
+    expect(wrapper.find('iframe').exists()).toBe(false);
+
+    intersect();
+    await flushPromises();
+
+    expect(wrapper.find('iframe').exists()).toBe(true);
+});
+
+test('failed lookup clears the embed and shows an error', async () => {
+    axios.get.mockRejectedValue({ response: { data: { message: 'Nope' } } });
+
+    const wrapper = mountVideoField({
+        value: 'cloudflare:1234',
+        meta: { url: '/cp/video/details', providers: [], provider: 'Cloudflare', embed: '<iframe></iframe>' },
+    });
+    intersect();
+
+    await wrapper.find('input').setValue('5678');
+    await flushPromises();
+
+    expect(wrapper.find('iframe').exists()).toBe(false);
+    expect(toast.error).toHaveBeenCalledWith('Nope');
+});

routes/cp.php

@@ -63,6 +63,7 @@
 use Statamic\Http\Controllers\CP\Fieldtypes\MarkdownFieldtypeController;
 use Statamic\Http\Controllers\CP\Fieldtypes\RelationshipFieldtypeController;
 use Statamic\Http\Controllers\CP\Fieldtypes\ReplicatorSetController;
+use Statamic\Http\Controllers\CP\Fieldtypes\VideoFieldtypeController;
 use Statamic\Http\Controllers\CP\Forms\ActionController as FormActionController;
 use Statamic\Http\Controllers\CP\Forms\FormBlueprintController;
 use Statamic\Http\Controllers\CP\Forms\FormExportController;
@@ -388,6 +389,7 @@
         Route::post('markdown', [MarkdownFieldtypeController::class, 'preview'])->name('markdown.preview');
         Route::post('files/upload', [FilesFieldtypeController::class, 'upload'])->name('files.upload');
         Route::post('icons', IconFieldtypeController::class)->name('icon-fieldtype');
+        Route::get('video/details', [VideoFieldtypeController::class, 'details'])->name('video.details');
         Route::post('replicator/set', ReplicatorSetController::class)->name('replicator-fieldtype.set');
     });