[6.x] Add Cloudflare Stream support to the video fieldtype

lang/en/validation.php

@@ -218,6 +218,7 @@
     'invalid_two_factor_code' => 'The provided two factor authentication code was invalid.',
     'invalid_two_factor_recovery_code' => 'The provided two factor recovery code was invalid.',
     'bard_container_required_by_button' => 'This field is required by a toolbar button.',
+    'video_fieldtype_cloudflare_id' => 'Must contain only letters and numbers.',
 
     /*
     |--------------------------------------------------------------------------

resources/js/components/fieldtypes/VideoFieldtype.vue

@@ -1,6 +1,27 @@
 <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-combobox
+            :model-value="isCloudflare ? 'cloudflare' : 'url'"
+            :options="meta.providers"
+            option-label="label"
+            option-value="value"
+            :read-only="isReadOnly"
+            :aria-label="__('Video Provider')"
+            @update:model-value="changeMode"
+        />
+        <ui-input-group v-if="isCloudflare">
+            <ui-input-group-prepend :text="__('ID')" />
+            <ui-input
+                :model-value="videoId"
+                :isReadOnly="isReadOnly"
+                :aria-label="__('Video ID')"
+                @update:model-value="updateCloudflareId"
+                @focus="$emit('focus')"
+                @blur="$emit('blur')"
+                input-class="border-s-0"
+            />
+        </ui-input-group>
+        <ui-input-group v-else>
             <ui-input-group-prepend :text="__('URL')" />
             <ui-input
                 :model-value="value"
@@ -13,7 +34,7 @@
                 input-class="border-s-0"
             />
         </ui-input-group>
-        <ui-description v-if="isInvalid" class="text-red-600">{{ __('statamic::validation.url') }}</ui-description>
+        <ui-description v-if="isInvalid" class="text-red-600">{{ invalidMessage }}</ui-description>
         <iframe
             v-if="shouldShowPreview"
             ref="iframe"
@@ -29,22 +50,32 @@
 <script>
 import Fieldtype from './Fieldtype.vue';
 
+const CLOUDFLARE = 'cloudflare';
+const CLOUDFLARE_PREFIX = 'cloudflare:';
+const URL_MODE = 'url';
+
 export default {
     mixins: [Fieldtype],
 
     data() {
         return {
             isVisible: false,
             observer: null,
+            // Only consulted when there's no value; otherwise the value itself says which input to show.
+            mode: this.meta.video?.provider === CLOUDFLARE ? CLOUDFLARE : URL_MODE,
         };
     },
 
     computed: {
         shouldShowPreview() {
-            return !this.isInvalid && (this.isEmbeddable || this.isVideo);
+            return !this.isInvalid && (this.isCloudflare ? !!this.videoId : this.isEmbeddable || this.isVideo);
         },
 
         embedUrl() {
+            if (this.isCloudflare) {
+                return this.videoId ? `https://iframe.cloudflarestream.com/${this.videoId}` : null;
+            }
+
             let embed_url = this.value || '';
 
             if (embed_url.includes('youtube')) {
@@ -73,6 +104,16 @@ export default {
             return embed_url;
         },
 
+        invalidMessage() {
+            return this.isCloudflare
+                ? __('statamic::validation.video_fieldtype_cloudflare_id')
+                : __('statamic::validation.url');
+        },
+
+        isCloudflare() {
+            return this.value?.startsWith(CLOUDFLARE_PREFIX) || (!this.value && this.mode === CLOUDFLARE);
+        },
+
         isEmbeddable() {
             const url = this.value || '';
             const isYoutube = url.includes('youtube') || url.includes('youtu.be');
@@ -81,6 +122,8 @@ export default {
         },
 
         isInvalid() {
+            if (this.isCloudflare) return !!this.videoId && !/^[a-zA-Z0-9]+$/.test(this.videoId);
+
             let htmlRegex = new RegExp(/<([A-Z][A-Z0-9]*)\b[^>]*>.*?<\/\1>|<([A-Z][A-Z0-9]*)\b[^\/]*\/>/i);
             return htmlRegex.test(this.value || '');
         },
@@ -95,6 +138,25 @@ export default {
             const isVideo = url.includes('.mp4') || url.includes('.ogv') || url.includes('.mov') || url.includes('.webm');
             return !this.isEmbeddable && isVideo;
         },
+
+        videoId() {
+            return this.value?.startsWith(CLOUDFLARE_PREFIX) ? this.value.slice(CLOUDFLARE_PREFIX.length) : null;
+        },
+    },
+
+    methods: {
+        changeMode(mode) {
+            if (mode === this.mode) return;
+
+            this.updateDebounced.cancel();
+            this.mode = mode;
+
+            if (this.value) this.update(null);
+        },
+
+        updateCloudflareId(id) {
+            this.update(id ? `${CLOUDFLARE_PREFIX}${id}` : null);
+        },
     },
 
     mounted() {

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

@@ -5,10 +5,15 @@ import { publishContextKey } from '@/components/ui';
 
 window.__ = (key) => key;
 
+let intersect;
+
 beforeEach(() => {
     vi.useFakeTimers();
 
     window.IntersectionObserver = class {
+        constructor(callback) {
+            intersect = () => callback([{ isIntersecting: true, intersectionRatio: 1 }]);
+        }
         observe() {}
         disconnect() {}
     };
@@ -19,23 +24,24 @@ afterEach(() => {
     vi.restoreAllMocks();
 });
 
+const providers = [
+    { value: 'url', label: 'URL' },
+    { value: 'cloudflare', label: 'Cloudflare Stream' },
+];
+
 const stub = (tag) => ({
     props: ['modelValue'],
     emits: ['update:modelValue'],
     template: `<${tag} :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" />`,
 });
 
-const mountVideoField = (props = {}) => {
+const mountVideoField = (value = null, video = null) => {
     return mount(VideoFieldtype, {
-        props: {
-            handle: 'video',
-            config: {},
-            meta: {},
-            ...props,
-        },
+        props: { handle: 'video', config: {}, meta: { providers, video }, value },
         global: {
             provide: { [publishContextKey]: {} },
             stubs: {
+                'ui-combobox': stub('select'),
                 'ui-input': stub('input'),
                 'ui-input-group': { template: '<div><slot /></div>' },
                 'ui-input-group-prepend': { template: '<span />' },
@@ -45,8 +51,68 @@ const mountVideoField = (props = {}) => {
     });
 };
 
+test('it shows the id input for a cloudflare value', () => {
+    const wrapper = mountVideoField('cloudflare:abc123');
+
+    expect(wrapper.find('input').element.value).toBe('abc123');
+});
+
+test('it shows the url input for a url value', () => {
+    const wrapper = mountVideoField('https://vimeo.com/1');
+
+    expect(wrapper.find('input').element.value).toBe('https://vimeo.com/1');
+});
+
+test('it stores the cloudflare id with a prefix', async () => {
+    const wrapper = mountVideoField('cloudflare:old');
+
+    await wrapper.find('input').setValue('abc123');
+
+    expect(wrapper.emitted('update:value')[0]).toEqual(['cloudflare:abc123']);
+});
+
+test('it previews a cloudflare video', async () => {
+    const wrapper = mountVideoField('cloudflare:abc123');
+    intersect();
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.find('iframe').attributes('src')).toBe('https://iframe.cloudflarestream.com/abc123');
+});
+
+test('it clears the stored value when switching provider', async () => {
+    const wrapper = mountVideoField('https://www.youtube.com/watch?v=1234');
+
+    await wrapper.find('select').setValue('cloudflare');
+
+    expect(wrapper.emitted('update:value')).toHaveLength(1);
+    expect(wrapper.emitted('update:value')[0]).toEqual([null]);
+});
+
+test('it does not emit when switching to the provider already in use', async () => {
+    const wrapper = mountVideoField(null);
+
+    await wrapper.find('select').setValue('url');
+
+    expect(wrapper.emitted('update:value')).toBeUndefined();
+});
+
+test('it rejects a malformed cloudflare id', async () => {
+    const wrapper = mountVideoField('cloudflare:abc"><script>alert(1)</script>');
+    intersect();
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.find('iframe').exists()).toBe(false);
+    expect(wrapper.find('p').exists()).toBe(true);
+});
+
+test('it uses the provider preloaded in meta for an empty field', () => {
+    const wrapper = mountVideoField(null, { provider: 'cloudflare', url: null });
+
+    expect(wrapper.vm.isCloudflare).toBe(true);
+});
+
 test('it debounces updates while typing', async () => {
-    const wrapper = mountVideoField({ value: null });
+    const wrapper = mountVideoField(null);
     const input = wrapper.find('input');
 
     await input.setValue('https://www.youtube.com/watch?v=1');

src/Fieldtypes/Video.php

@@ -3,13 +3,31 @@
 namespace Statamic\Fieldtypes;
 
 use Statamic\Fields\Fieldtype;
+use Statamic\Fieldtypes\Video\Embed;
 
 use function Statamic\trans as __;
 
 class Video extends Fieldtype
 {
     protected $categories = ['media'];
 
+    public function augment($value)
+    {
+        if (is_null($value)) {
+            return null;
+        }
+
+        return Embed::fromValue($value);
+    }
+
+    public function preload()
+    {
+        return [
+            'providers' => Embed::options(),
+            'video' => Embed::fromValue($this->field()->value())->toArray(),
+        ];
+    }
+
     protected function configFieldItems(): array
     {
         return [