From 3b1baed537172848bbd47cc05cf27655970e5da5 Mon Sep 17 00:00:00 2001 From: Tsachi Shlidor Date: Thu, 1 Feb 2024 10:43:37 +0200 Subject: [PATCH] fix: raw URLs from CORs restricted origin * fix: raw URLs from CORs restricted origin * test: left-over DEFAULT_VIDEO_SOURCE_TYPES --- docs/raw-url.html | 2 +- .../models/video-source/video-source.const.js | 26 +++++++++++--- .../models/video-source/video-source.js | 2 +- src/video-player.js | 3 +- test/unit/videoSource.test.js | 34 ++++++++++++------- 5 files changed, 48 insertions(+), 19 deletions(-) diff --git a/docs/raw-url.html b/docs/raw-url.html index 2e97b9f2..d0f375e5 100644 --- a/docs/raw-url.html +++ b/docs/raw-url.html @@ -35,7 +35,7 @@ player = cloudinary.videoPlayer('player', config); - player.source('https://res.cloudinary.com/demo/video/upload/sea_turtle.mp4'); + player.source('https://sample-videos.com/video321/mp4/720/big_buck_bunny_720p_10mb.mp4'); adpPlayer = cloudinary.videoPlayer('adpPlayer',config); diff --git a/src/plugins/cloudinary/models/video-source/video-source.const.js b/src/plugins/cloudinary/models/video-source/video-source.const.js index ea71ebec..11b345fa 100644 --- a/src/plugins/cloudinary/models/video-source/video-source.const.js +++ b/src/plugins/cloudinary/models/video-source/video-source.const.js @@ -1,20 +1,38 @@ export const DEFAULT_POSTER_PARAMS = { format: 'jpg', resource_type: 'video' }; -const DEFAULT_VIDEO_SOURCE_TYPES = ['webm/vp9', 'mp4/h265', 'mp4']; - export const DEFAULT_VIDEO_PARAMS = { resource_type: 'video', type: 'upload', transformation: [], sourceTransformation: {}, - sourceTypes: DEFAULT_VIDEO_SOURCE_TYPES, + sourceTypes: ['auto'], recommendations: null, info: {}, interactionAreas: {}, chapters: {} }; -export const VIDEO_SUFFIX_REMOVAL_PATTERN = RegExp(`\\.(${DEFAULT_VIDEO_SOURCE_TYPES.join('|')})$$`); +const COMMON_VIDEO_EXTENSIONS = [ + '3g2', + '3gp', + 'avi', + 'flv', + 'm3u8', + 'ts', + 'm2ts', + 'mts', + 'mov', + 'mkv', + 'mp4', + 'mpeg', + 'mpd', + 'mxf', + 'ogv', + 'webm', + 'wmv' +]; // https://cloudinary.com/documentation/video_manipulation_and_delivery#supported_video_formats + +export const VIDEO_SUFFIX_REMOVAL_PATTERN = RegExp(`\\.(${COMMON_VIDEO_EXTENSIONS.join('|')})$$`); // eslint-disable-next-line no-control-regex export const URL_PATTERN = RegExp('https?:\\/\\/(www\\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\\.[a-zA-Z0-9()]{1,6}\\b([-a-zA-Z0-9()@:%_\+.~#?&/=]*)'); diff --git a/src/plugins/cloudinary/models/video-source/video-source.js b/src/plugins/cloudinary/models/video-source/video-source.js index 8f81b79e..155483fe 100644 --- a/src/plugins/cloudinary/models/video-source/video-source.js +++ b/src/plugins/cloudinary/models/video-source/video-source.js @@ -187,7 +187,7 @@ class VideoSource extends BaseSource { generateSources() { if (this.isRawUrl) { - const type = this.sourceTypes().length > 1 ? null : this.sourceTypes()[0]; + const type = this.sourceTypes()[0] === 'auto' ? null : this.sourceTypes()[0]; return [this.generateRawSource(this.publicId(), type)]; } diff --git a/src/video-player.js b/src/video-player.js index 14533908..f0e336f3 100644 --- a/src/video-player.js +++ b/src/video-player.js @@ -258,8 +258,9 @@ class VideoPlayer extends Utils.mixin(Eventable) { const transformation = Utils.assign({}, source.transformation()); - if (transformation && transformation.streaming_profile) { + if (transformation) { delete transformation.streaming_profile; + delete transformation.video_codec; } transformation.flags = transformation.flags || []; diff --git a/test/unit/videoSource.test.js b/test/unit/videoSource.test.js index 8bdd6333..37469bf4 100644 --- a/test/unit/videoSource.test.js +++ b/test/unit/videoSource.test.js @@ -361,13 +361,14 @@ describe('test isCodecAlreadyExist method', () => { }); const srcs = source.generateSources(); - expect(srcs[0].src).toEqual('http://res.cloudinary.com/demo/video/upload/vc_vp9/sea_turtle.webm'); + expect(srcs[0].src).toEqual('http://res.cloudinary.com/demo/video/upload/f_auto:video/sea_turtle'); }); - it('check if codec has NOT bee added to the ur twice', () => { + it('with codec and sourceType', () => { const source = new VideoSource('sea_turtle', { cloudinaryConfig: cld, + sourceTypes: ['webm'], transformation: { video_codec: 'vp9' } @@ -377,6 +378,19 @@ describe('test isCodecAlreadyExist method', () => { expect(srcs[0].src).toEqual('http://res.cloudinary.com/demo/video/upload/vc_vp9/sea_turtle.webm'); }); + it('codec with no sourceType', () => { + + const source = new VideoSource('sea_turtle', { + cloudinaryConfig: cld, + transformation: { + video_codec: 'vp9' + } + }); + + const srcs = source.generateSources(); + expect(srcs[0].src).toEqual('http://res.cloudinary.com/demo/video/upload/vc_vp9/f_auto:video/sea_turtle'); + }); + it('check if codec has been changed', () => { const source = new VideoSource('sea_turtle', { @@ -387,11 +401,11 @@ describe('test isCodecAlreadyExist method', () => { }); const srcs = source.generateSources(); - expect(srcs[0].src).toEqual('http://res.cloudinary.com/demo/video/upload/vc_h265/sea_turtle.webm'); + expect(srcs[0].src).toEqual('http://res.cloudinary.com/demo/video/upload/vc_h265/f_auto:video/sea_turtle'); }); - it('check if codec has been NOT add twice using raw_transformation', () => { + it('raw_transformation codec with no sourceType', () => { const source = new VideoSource('sea_turtle', { cloudinaryConfig: cld, @@ -399,7 +413,7 @@ describe('test isCodecAlreadyExist method', () => { }); const srcs = source.generateSources(); - expect(srcs[0].src).toEqual('http://res.cloudinary.com/demo/video/upload/vc_vp9/sea_turtle.webm'); + expect(srcs[0].src).toEqual('http://res.cloudinary.com/demo/video/upload/f_auto:video/vc_vp9/sea_turtle'); }); it('check if codec has been change using raw_transformation', () => { @@ -410,7 +424,7 @@ describe('test isCodecAlreadyExist method', () => { }); const srcs = source.generateSources(); - expect(srcs[0].src).toEqual('http://res.cloudinary.com/demo/video/upload/h265/sea_turtle.webm'); + expect(srcs[0].src).toEqual('http://res.cloudinary.com/demo/video/upload/f_auto:video/h265/sea_turtle'); }); @@ -424,7 +438,7 @@ describe('test isCodecAlreadyExist method', () => { }); const srcs = source.generateSources(); - expect(srcs[0].src).toEqual('http://res.cloudinary.com/demo/video/upload/w_400/vc_vp9/sea_turtle.webm'); + expect(srcs[0].src).toEqual('http://res.cloudinary.com/demo/video/upload/w_400/f_auto:video/sea_turtle'); }); it('check array of transformations with codec', () => { @@ -437,12 +451,8 @@ describe('test isCodecAlreadyExist method', () => { }); const srcs = source.generateSources(); - expect(srcs[0].src).toEqual('http://res.cloudinary.com/demo/video/upload/vc_h265/sea_turtle.webm'); + expect(srcs[0].src).toEqual('http://res.cloudinary.com/demo/video/upload/vc_h265/f_auto:video/sea_turtle'); }); - }); - }); - -