[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,19 @@
+.video-fieldtype-embed {
+    position: relative;
+    display: block;
+    width: 100%;
+    padding: 0;
+    padding-bottom: 56.25%;
+    overflow: hidden;
+    border-radius: var(--radius-md);
+}
+
+.video-fieldtype-embed iframe {
+    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,99 +1,154 @@
 <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="label"
+            option-value="value"
+            :placeholder="__('Provider...')"
+            @update:model-value="changeProvider"
+        />
+
+        <ui-input
+            v-if="isCloudflare"
+            :aria-label="__('Video ID')"
+            input-class="border-s-0"
+            :isReadOnly="isReadOnly"
+            :model-value="videoId"
+            :prepend="__('ID')"
+            @update:model-value="updateCloudflareId"
+            @focus="$emit('focus')"
+            @blur="$emit('blur')"
+        />
+
+        <ui-input
+            v-else
+            :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="updateUrl"
+            @focus="$emit('focus')"
+            @blur="$emit('blur')"
+        />
+
+        <video v-if="shouldShowPreview && isFile" :src="embedUrl" controls class="w-full rounded-md"></video>
+
+        <div v-else-if="shouldShowPreview" class="video-fieldtype-embed">
+            <iframe
+                :src="embedUrl"
+                frameborder="0"
+                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                allowfullscreen
+            ></iframe>
+        </div>
+
+        <ui-description v-else-if="isUnsupported" class="text-red-500">
+            {{ __('This video URL is not supported.') }}
+        </ui-description>
     </div>
 </template>
 
 <script>
+import axios from 'axios';
 import Fieldtype from './Fieldtype.vue';
 
+const CLOUDFLARE = 'cloudflare';
+const FILE = 'file';
+const UNSUPPORTED = 'unsupported';
+const CLOUDFLARE_PREFIX = 'cloudflare:';
+
 export default {
     mixins: [Fieldtype],
 
     data() {
         return {
+            abortController: null,
+            embedUrl: this.meta.video?.embed_url ?? null,
             isVisible: false,
             observer: null,
+            provider: this.meta.video?.provider ?? null,
         };
     },
 
     computed: {
-        shouldShowPreview() {
-            return !this.isInvalid && (this.isEmbeddable || this.isVideo);
+        isCloudflare() {
+            return this.provider === CLOUDFLARE || !!this.value?.startsWith(CLOUDFLARE_PREFIX);
         },
 
-        embedUrl() {
-            let embed_url = this.value || '';
+        isFile() {
+            return this.provider === FILE;
+        },
 
-            if (embed_url.includes('youtube')) {
-                embed_url = embed_url.includes('shorts/')
-                    ? embed_url.replace('shorts/', 'embed/')
-                    : embed_url.replace('watch?v=', 'embed/');
-            }
+        isUnsupported() {
+            return this.provider === UNSUPPORTED && !!this.value;
+        },
 
-            if (embed_url.includes('youtu.be')) {
-                embed_url = embed_url.replace('youtu.be', 'www.youtube.com/embed');
-            }
+        providers() {
+            return this.meta.providers;
+        },
 
-            if (embed_url.includes('vimeo')) {
-                embed_url = embed_url.replace('/vimeo.com', '/player.vimeo.com/video');
+        shouldShowPreview() {
+            return this.isVisible && !!this.embedUrl;
+        },
 
-                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('?', '&');
-                }
-            }
+        url() {
+            return this.value?.startsWith(CLOUDFLARE_PREFIX) ? null : this.value;
+        },
 
-            if (embed_url.includes('&') && !embed_url.includes('?')) {
-                embed_url = embed_url.replace('&', '?');
-            }
+        videoId() {
+            return this.value?.startsWith(CLOUDFLARE_PREFIX) ? this.value.slice(CLOUDFLARE_PREFIX.length) : null;
+        },
+    },
 
-            return embed_url;
+    watch: {
+        value(value) {
+            this.lookup(value);
         },
+    },
 
-        isEmbeddable() {
-            const url = this.value || '';
-            const isYoutube = url.includes('youtube') || url.includes('youtu.be');
-            const isVimeo = url.includes('vimeo');
-            return isYoutube || isVimeo;
+    methods: {
+        changeProvider(provider) {
+            this.provider = provider;
+            this.embedUrl = null;
+            this.update(null);
         },
 
-        isInvalid() {
-            let htmlRegex = new RegExp(/<([A-Z][A-Z0-9]*)\b[^>]*>.*?<\/\1>|<([A-Z][A-Z0-9]*)\b[^\/]*\/>/i);
-            return htmlRegex.test(this.value || '');
+        lookup(value) {
+            if (this.abortController) this.abortController.abort();
+
+            if (!value) {
+                this.embedUrl = null;
+                return;
+            }
+
+            this.abortController = new AbortController();
+
+            this.$axios
+                .get(this.meta.url, { params: { value }, signal: this.abortController.signal })
+                .then((response) => {
+                    if (value !== this.value) return;
+
+                    this.embedUrl = response.data.embed_url;
+                    this.provider = response.data.provider;
+                })
+                .catch((e) => {
+                    if (axios.isCancel(e)) return;
+                    if (value !== this.value) return;
+
+                    this.embedUrl = 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://');
+        updateCloudflareId(id) {
+            this.updateDebounced(id ? `${CLOUDFLARE_PREFIX}${id}` : null);
         },
 
-        isVideo() {
-            const url = this.value || '';
-            const isVideo = url.includes('.mp4') || url.includes('.ogv') || url.includes('.mov') || url.includes('.webm');
-            return !this.isEmbeddable && isVideo;
+        updateUrl(url) {
+            this.updateDebounced(url || null);
         },
     },
 
@@ -107,7 +162,7 @@ export default {
                     }
                 });
             },
-            { threshold: 0.01 }
+            { threshold: 0.01 },
         );
 
         if (this.$el) {
@@ -119,6 +174,10 @@ export default {
         if (this.observer) {
             this.observer.disconnect();
         }
+
+        if (this.abortController) {
+            this.abortController.abort();
+        }
     },
 };
 </script>