[Enhancement #55] Allow 2 new player providers

locales/extracted_locales/locales.json

@@ -888,7 +888,7 @@
     "id": "Sountrack.editDialog.title"
   },
   {
-    "defaultMessage": "Enter a Spotify embed URL.",
+    "defaultMessage": "Enter a Spotify, SoundCloud or Deezer URL.",
     "id": "Soundtrack.editDialog.embedUrl.title"
   },
   {

src/package/components/cards/cards_types/soundtrack/data/validator.js

@@ -2,7 +2,7 @@ import * as Yup from 'yup';
 
 export const SoundtrackValidationSchema = () =>
     Yup.object({
-        embedUrl: Yup.string().max(100).url().required()
+        embedUrl: Yup.string().max(200).url().required()
     });
 
 export const validateSoundtrackComplete = (data) => {

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) {
@@ -88,7 +77,7 @@ const Content = ({ helpers: { fullScreen, isMobile } }) => {
                 title={
                     <FormattedMessage
                         id="Soundtrack.editDialog.embedUrl.title"
-                        defaultMessage="Enter a Spotify embed URL."
+                        defaultMessage="Enter a Spotify, SoundCloud or Deezer URL."
                     />
                 }
                 subtitle={
@@ -120,7 +109,7 @@ const Content = ({ helpers: { fullScreen, isMobile } }) => {
                         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);
+});

src/package/i18n/en.json

@@ -257,7 +257,7 @@
   "SoundTrack.noSoundTrack.buttonLabel": "Add a playlist",
   "SoundTrack.noSoundTrack.title": "Add a playlist here that represents your mood and personality !",
   "Soundtrack.editDialog.embedUrl.subtitle": "Ex: https://open.spotify.com/embed/album/79dL7FLiJFOO0EoehUHQBv",
-  "Soundtrack.editDialog.embedUrl.title": "Enter a Spotify embed URL",
+  "Soundtrack.editDialog.embedUrl.title": "Enter a Spotify, SoundCloud or Deezer URL.",
   "Soundtrack.front.button": "My playlist",
   "Soundtrack.front.title": "Discover my favourite tracks",
   "Sountrack.editDialog.title": "Embed your musical tastes in your profile.",

src/package/i18n/fr.json

@@ -257,7 +257,7 @@
   "SoundTrack.noSoundTrack.buttonLabel": "Ajouter une playlist",
   "SoundTrack.noSoundTrack.title": "Ajouter ici une playlist qui représente votre humeur et votre personnalité !",
   "Soundtrack.editDialog.embedUrl.subtitle": "Ex: https://open.spotify.com/embed/album/79dL7FLiJFOO0EoehUHQBv",
-  "Soundtrack.editDialog.embedUrl.title": "Entrez une url spotify embed",
+  "Soundtrack.editDialog.embedUrl.title": "Entrez une url Spotify, SoundClound ou Deezer",
   "Soundtrack.front.button": "Ma playlist",
   "Soundtrack.front.title": "Découvrez ma tracklist",
   "Sountrack.editDialog.title": "Ajouter vos goûts musicaux dans votre profil.",

src/package/i18n/tr.json

@@ -257,7 +257,7 @@
   "SoundTrack.noSoundTrack.buttonLabel": "Çalma listesi ekle",
   "SoundTrack.noSoundTrack.title": "Buraya ruh halinizi ve kişiliğinizi temsil eden bir çalma listesi ekleyin!",
   "Soundtrack.editDialog.embedUrl.subtitle": "Örn: https://open.spotify.com/embed/album/79dL7FLiJFOO0EoehUHQBv",
-  "Soundtrack.editDialog.embedUrl.title": "Bir Spotify URL'si girin",
+  "Soundtrack.editDialog.embedUrl.title": "Bir Spotify, SoundCloud veya Deezer URL'si girin",
   "Soundtrack.front.button": "Çalma listem",
   "Soundtrack.front.title": "Favori parçalarımı keşfet",
   "Sountrack.editDialog.title": "Müzik zevklerinizi profilinize ekleyin.",