✨ welovedevs#55 Permit to provide differents playlist provider

src/package/components/cards/cards_types/soundtrack/edit_dialog/soundtrack_card_edit_dialog.jsx

@@ -14,12 +14,10 @@ import { LoadingSpinner } from '../../../../commons/loading_spinner/loading_spin
 import { hashCode } from '../../../../../utils/string_utils';
 
 import { styles } from './soundtrack_card_edit_dialog_styles';
+import { getEmbeddedUrl, isValidEmbeddedUrl } from './soundtrack_card_utils';
 
 const useStyles = createUseStyles(styles);
 
-const URL_REGEX = /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)/g;
-const SPOTIFY_DOMAIN = 'https://open.spotify.com';
-
 export const SoundtrackCardEditDialog = ({ open, onClose, data, onEdit, isEditing }) => (
     <EditDialog
         data={data}
@@ -53,17 +51,8 @@ const Content = ({ helpers: { fullScreen, isMobile } }) => {
             const {
                 target: { value }
             } = event;
-            if (!URL_REGEX.test(value) || !value.startsWith(SPOTIFY_DOMAIN)) {
-                return;
-            }
-            let finalValue = value;
-            if (!value.includes('/embed')) {
-                finalValue = `${value.substring(0, SPOTIFY_DOMAIN.length)}/embed/${value.substring(
-                    SPOTIFY_DOMAIN.length + 1,
-                    value.length
-                )}`;
-            }
-            setFieldValue('embedUrl', finalValue);
+            console.log(getEmbeddedUrl(value));
+            setFieldValue('embedUrl', getEmbeddedUrl(value));
         },
         [setFieldValue, embedUrl]
     );
@@ -72,7 +61,7 @@ const Content = ({ helpers: { fullScreen, isMobile } }) => {
         setFieldValue('embedUrl', '');
     }, [setFieldValue]);
 
-    const isValidUrl = useMemo(() => URL_REGEX.test(iframeUrl) && iframeUrl?.includes('/embed'), [iframeUrl]);
+    const isValidUrl = useMemo(() => isValidEmbeddedUrl(iframeUrl), [iframeUrl]);
 
     useEffect(() => {
         if (isValidUrl) {
@@ -113,14 +102,15 @@ const Content = ({ helpers: { fullScreen, isMobile } }) => {
                 {hasLoaded === null && <LoadingSpinner />}
                 {iframeUrl && (
                     <iframe
+                        // title="deezer-widget"
                         className={classes.iframe}
                         key={frameHashCode}
                         title="Soundtrack"
                         src={iframeUrl}
                         height="100%"
                         width={600}
                         frameBorder="0"
-                        allow="encrypted-media"
+                        allow="encrypted-media; clipboard-write"
                         onLoad={handleLoad}
                     />
                 )}

src/package/components/cards/cards_types/soundtrack/edit_dialog/soundtrack_card_utils.js

@@ -0,0 +1,44 @@
+const URL_REGEX = /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)/;
+const SPOTIFY_DOMAIN = 'https://open.spotify.com';
+const DEEZER_DOMAIN = 'https://www.deezer.com';
+const DEEZER_EMBEDDED_BASE = 'https://widget.deezer.com/widget/dark/playlist';
+const SOUNDCLOUD_DOMAIN = 'https://soundcloud.com';
+const AUTHORIZED_DOMAIN = [SPOTIFY_DOMAIN, DEEZER_DOMAIN, SOUNDCLOUD_DOMAIN];
+
+const startsWith = (testValue) => (value) => testValue.startsWith(value);
+
+export const isValidEmbeddedUrl = (url) =>
+    URL_REGEX.test(url) && (url?.includes('/embed') || url?.includes('/widget') || url?.includes('/player'));
+
+export const getEmbeddedUrl = (url) => {
+    if (!URL_REGEX.test(url) || !AUTHORIZED_DOMAIN.some(startsWith(url))) {
+        return;
+    }
+
+    let domain = AUTHORIZED_DOMAIN.find(startsWith(url));
+    if (domain === SPOTIFY_DOMAIN && !url.includes('/embed')) {
+        return getEmbeddedUrlSpotify(url);
+    } else if (domain === SOUNDCLOUD_DOMAIN) {
+        return getEmbeddedUrlSoundCloud(url);
+    } else if (domain === DEEZER_DOMAIN) {
+        return getEmbeddedUrlDeezer(url);
+    }
+    return url;
+};
+
+const getEmbeddedUrlSpotify = (url) => {
+    if (url.includes('/embed')) {
+        return url;
+    }
+
+    return `${url.substring(0, SPOTIFY_DOMAIN.length)}/embed/${url.substring(SPOTIFY_DOMAIN.length + 1, url.length)}`;
+};
+
+const getEmbeddedUrlSoundCloud = (url) => {
+    const lastIndex = url.indexOf('?') === -1 ? url.length : url.indexOf('?');
+    return `https://w.soundcloud.com/player/?url=${url.substring(0, lastIndex)}`;
+};
+
+const getEmbeddedUrlDeezer = (url) => {
+    return `${DEEZER_EMBEDDED_BASE}/${/[^/]*$/.exec(url)}`;
+};

src/package/components/cards/cards_types/soundtrack/edit_dialog/soundtrack_card_utils.test.js

@@ -0,0 +1,33 @@
+import { getEmbeddedUrl, isValidEmbeddedUrl } from './soundtrack_card_utils';
+
+test('it should format embedded soundcloud url', () => {
+    const url = 'https://soundcloud.com/lukasm1/sets/chill-mix-high-on-chill';
+    const expected = `https://w.soundcloud.com/player/?url=https://soundcloud.com/lukasm1/sets/chill-mix-high-on-chill`;
+    expect(getEmbeddedUrl(url)).toBe(expected);
+});
+
+test('it should format embedded deezer url', () => {
+    const url = 'https://www.deezer.com/us/playlist/1479458365';
+    const expected = `https://widget.deezer.com/widget/dark/playlist/1479458365`;
+    expect(getEmbeddedUrl(url)).toBe(expected);
+});
+
+test('it should format embedded spotify url', () => {
+    const url = 'https://www.deezer.com/us/playlist/1479458365';
+    const expected = `https://widget.deezer.com/widget/dark/playlist/1479458365`;
+    expect(getEmbeddedUrl(url)).toBe(expected);
+});
+
+test('it should be a valid url', () => {
+    const urlEmbed = 'https://truc.com/embed';
+    const urlWidget = 'https://truc.com/widget';
+    const urlPlayer = 'https://truc.com/player';
+    expect(isValidEmbeddedUrl(urlEmbed)).toBe(true);
+    expect(isValidEmbeddedUrl(urlWidget)).toBe(true);
+    expect(isValidEmbeddedUrl(urlPlayer)).toBe(true);
+});
+
+test('it should not be a valid url', () => {
+    const url = 'https://truc.com/wrong';
+    expect(isValidEmbeddedUrl(url)).toBe(false);
+});