⚡ Add more video supports (#1023)

## Summary by CodeRabbit - **New Features** - Introduced a new layout option for the TextInput component. - Added support for GUMLET and TIKTOK video content types in VideoBubbleContent. - Enhanced VideoUploadContent to handle new properties like aspectRatio and maxWidth. - Updated VideoBubble to include aspect-ratio and max-width styles based on content properties. - **Refactor** - Changed the extension used for internationalization (i18n) in the VS Code environment. - Modified how environment variables are accessed in tolgee.tsx. - Updated parseVideoUrl function to include a new property videoSizeSuggestion. - **Chores** - Updated the tolgeeEnv object in env.ts and added a new optional parameter to the getRuntimeVariable function. - Expanded video handling capabilities by introducing new video content types and associated regular expressions.  Closes #978 #936 #926
baptisteArno · Nov 10, 2023 · dd4de58 · dd4de58 · vercel · Nov 10, 2023
1 parent df57841
commit dd4de58
Show file tree

Hide file tree

Showing 20 changed files with 302 additions and 139 deletions.
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
@@ -4,7 +4,7 @@
     "dbaeumer.vscode-eslint",
     "bradlc.vscode-tailwindcss",
     "unifiedjs.vscode-mdx",
-    "baptistearno.baptistearno-i18n-ally",
+    "lokalise.i18n-ally",
     "ms-playwright.playwright",
     "Prisma.prisma"
   ]

diff --git a/.vscode/i18n-ally-custom-framework.yml b/.vscode/i18n-ally-custom-framework.yml
@@ -20,8 +20,8 @@ usageMatchRegex:
 # The "$1" will be replaced by the keypath specified.
 # Optional: uncomment the following two lines to use
 
-# refactorTemplates:
-#  - i18n.get("$1")
+refactorTemplates:
+  - t("$1")
 
 # If set to true, only enables this custom framework (will disable all built-in frameworks)
 monopoly: true
diff --git a/apps/builder/public/locales/de.json b/apps/builder/public/locales/de.json
@@ -110,41 +110,35 @@
   "billing.usage.chats.heading": "Chats",
   "billing.usage.heading": "Nutzung",
   "billing.usage.unlimited": "Unbegrenzt",
+  "blocks.bubbles.embed.blockCard.tooltip": "Ein PDF, ein iframe, eine Website einbetten...",
+  "blocks.inputs.fileUpload.blockCard.tooltip": "Dateien hochladen",
+  "blocks.integrations.googleAnalytics.blockCard.tooltip": "Google Analytics",
+  "blocks.integrations.googleSheets.blockCard.tooltip": "Google Tabellen",
   "cancel": "Abbrechen",
+  "clickToEdit": "Zum Bearbeiten klicken...",
   "confirmModal.defaultTitle": "Bist du sicher?",
   "dashboard.header.settingsButton.label": "Einstellungen & Mitglieder",
   "dashboard.redirectionMessage": "Du wirst weitergeleitet...",
   "dashboard.title": "Meine Typebots",
   "delete": "Löschen",
   "downgrade": "Downgrade",
-  "blocks.bubbles.embed.blockCard.tooltip": "Ein PDF, ein iframe, eine Website einbetten...",
-  "blocks.inputs.fileUpload.blockCard.tooltip": "Dateien hochladen",
-  "blocks.integrations.googleAnalytics.blockCard.tooltip": "Google Analytics",
-  "blocks.integrations.googleSheets.blockCard.tooltip": "Google Tabellen",
   "editor.blockCard.logicBlock.tooltip.code.label": "JavaScript-Code ausführen",
   "editor.blockCard.logicBlock.tooltip.jump.label": "Ablauf zu einer anderen Gruppe beschleunigen",
   "editor.blockCard.logicBlock.tooltip.typebotLink.label": "Verlinkung zu einem anderen Typebot",
-  "editor.blocks.bubbles.audio.node.clickToEdit.text": "Zum Bearbeiten klicken...",
   "editor.blocks.bubbles.audio.settings.autoplay.label": "Autoplay aktivieren",
   "editor.blocks.bubbles.audio.settings.chooseFile.label": "Datei auswählen",
   "editor.blocks.bubbles.audio.settings.embedLink.label": "Link einbetten",
   "editor.blocks.bubbles.audio.settings.upload.label": "Hochladen",
   "editor.blocks.bubbles.audio.settings.worksWith.placeholder": "Füge den Audio-Dateilink ein...",
   "editor.blocks.bubbles.audio.settings.worksWith.text": "Funktioniert mit .MP3- und .WAV-Dateien",
-  "editor.blocks.bubbles.embed.node.clickToEdit.text": "Zum Bearbeiten klicken...",
   "editor.blocks.bubbles.embed.node.show.text": "Einbetten anzeigen",
   "editor.blocks.bubbles.embed.settings.numberInput.unit": "px",
   "editor.blocks.bubbles.embed.settings.worksWith.placeholder": "Füge den Link oder Code ein...",
   "editor.blocks.bubbles.embed.settings.worksWith.text": "Funktioniert mit PDFs, iframes, Websites...",
-  "editor.blocks.bubbles.image.node.clickToEdit.text": "Zum Bearbeiten klicken...",
   "editor.blocks.bubbles.image.switchWithLabel.onClick.label": "Beim Klicken Link",
   "editor.blocks.bubbles.image.switchWithLabel.onClick.placeholder": "Link Alternativtext (Beschreibung)",
   "editor.blocks.bubbles.textEditor.plate.label": "Texteditor",
   "editor.blocks.bubbles.textEditor.searchVariable.placeholder": "Nach einer Variable suchen",
-  "editor.blocks.bubbles.video.node.clickToEdit.text": "Zum Bearbeiten klicken...",
-  "editor.blocks.bubbles.video.settings.numberInput.unit": "px",
-  "editor.blocks.bubbles.video.settings.worksWith.placeholder": "Füge den Videolink ein...",
-  "editor.blocks.bubbles.video.settings.worksWith.text": "Funktioniert mit YouTube, Vimeo und anderen",
   "editor.blocks.start.text": "Start",
   "editor.editableTypebotName.tooltip.rename.label": "Umbenennen",
   "editor.gettingStartedModal.editorBasics.heading": "Grundlagen des Editors",
@@ -231,6 +225,8 @@
   "templates.modal.menuHeading.product": "Produkt",
   "templates.modal.useTemplateButton.label": "Diese Vorlage verwenden",
   "upgrade": "Upgrade",
+  "video.urlInput.helperText": "Funktioniert mit YouTube, Vimeo, Gumlet, TikTok und anderen",
+  "video.urlInput.placeholder": "Füge den Videolink ein...",
   "workspace.dropdown.logoutButton.label": "Abmelden",
   "workspace.dropdown.newButton.label": "Neuer Workspace",
   "workspace.membersList.inviteButton.label": "Einladen",

diff --git a/apps/builder/public/locales/en.json b/apps/builder/public/locales/en.json
@@ -29,7 +29,7 @@
   "account.preferences.graphNavigation.trackpad.description": "Move the board using 2 fingers and zoom in/out by pinching",
   "account.preferences.graphNavigation.trackpad.label": "Trackpad",
   "account.preferences.language.heading": "Language",
-  "account.preferences.language.tooltip": "The translations are not complete yet. It is a work in progress. 🤓",
+  "account.preferences.language.tooltip": "The translations are not complete yet. It is a work in progress. \uD83E\uDD13",
   "analytics.completionRateLabel": "Completion rate",
   "analytics.notAvailableLabel": "Not available",
   "analytics.startsLabel": "Starts",
@@ -40,7 +40,7 @@
   "auth.error.oauthNotLinked": "To confirm your identity, sign in with the same account you used originally.",
   "auth.error.unknown": "An error occurred. Please try again.",
   "auth.magicLink.description": "Make sure to check your spam folder.",
-  "auth.magicLink.title": "A magic link email was sent. 🪄",
+  "auth.magicLink.title": "A magic link email was sent. \uD83E\uDE84",
   "auth.noProvider.link": "configure at least one auth provider (Email, Google, GitHub, Facebook or Azure AD).",
   "auth.noProvider.preLink": "You need to",
   "auth.orEmailLabel": "Or with your email",
@@ -102,54 +102,49 @@
   "billing.pricingCard.starter.fileUploadBlock": "File upload input block",
   "billing.pricingCard.starter.includedSeats": "2 seats included",
   "billing.pricingCard.upgradeButton.current": "Your current plan",
-  "billing.updateSuccessToast.description": "Workspace {plan} plan successfully updated 🎉",
+  "billing.tiersModal.heading": "Chats pricing table",
+  "billing.updateSuccessToast.description": "Workspace {plan} plan successfully updated \uD83C\uDF89",
   "billing.upgradeAlert.buttonDefaultLabel": "More info",
   "billing.upgradeLimitLabel": "You need to upgrade your plan in order to {type}",
-  "billing.usage.chats.alert.soonReach": "Your typebots are popular! You will soon reach your plan's chats limit. 🚀",
+  "billing.usage.chats.alert.soonReach": "Your typebots are popular! You will soon reach your plan's chats limit. \uD83D\uDE80",
   "billing.usage.chats.alert.updatePlan": "Make sure to update your plan to increase this limit and continue chatting with your users.",
   "billing.usage.chats.heading": "Chats",
   "billing.usage.heading": "Usage",
   "billing.usage.unlimited": "Unlimited",
+  "blocks.bubbles.embed.blockCard.tooltip": "Embed a pdf, an iframe, a website...",
+  "blocks.inputs.fileUpload.blockCard.tooltip": "Upload Files",
+  "blocks.integrations.googleAnalytics.blockCard.tooltip": "Google Analytics",
+  "blocks.integrations.googleSheets.blockCard.tooltip": "Google Sheets",
   "cancel": "Cancel",
+  "clickToEdit": "Click to edit...",
   "confirmModal.defaultTitle": "Are you sure?",
   "dashboard.header.settingsButton.label": "Settings & Members",
   "dashboard.redirectionMessage": "You are being redirected...",
   "dashboard.title": "My typebots",
   "delete": "Delete",
   "downgrade": "Downgrade",
-  "blocks.bubbles.embed.blockCard.tooltip": "Embed a pdf, an iframe, a website...",
-  "blocks.inputs.fileUpload.blockCard.tooltip": "Upload Files",
-  "blocks.integrations.googleAnalytics.blockCard.tooltip": "Google Analytics",
-  "blocks.integrations.googleSheets.blockCard.tooltip": "Google Sheets",
   "editor.blockCard.logicBlock.tooltip.code.label": "Execute Javascript code",
   "editor.blockCard.logicBlock.tooltip.jump.label": "Fast forward the flow to another group",
   "editor.blockCard.logicBlock.tooltip.typebotLink.label": "Link and jump to another typebot",
-  "editor.blocks.bubbles.audio.node.clickToEdit.text": "Click to edit...",
   "editor.blocks.bubbles.audio.settings.autoplay.label": "Enable autoplay",
   "editor.blocks.bubbles.audio.settings.chooseFile.label": "Choose a file",
   "editor.blocks.bubbles.audio.settings.embedLink.label": "Embed link",
   "editor.blocks.bubbles.audio.settings.upload.label": "Upload",
   "editor.blocks.bubbles.audio.settings.worksWith.placeholder": "Paste the audio file link...",
   "editor.blocks.bubbles.audio.settings.worksWith.text": "Works with .MP3s and .WAVs",
-  "editor.blocks.bubbles.embed.node.clickToEdit.text": "Click to edit...",
   "editor.blocks.bubbles.embed.node.show.text": "Show embed",
   "editor.blocks.bubbles.embed.settings.numberInput.unit": "px",
   "editor.blocks.bubbles.embed.settings.worksWith.placeholder": "Paste the link or code...",
   "editor.blocks.bubbles.embed.settings.worksWith.text": "Works with PDFs, iframes, websites...",
-  "editor.blocks.bubbles.image.node.clickToEdit.text": "Click to edit...",
   "editor.blocks.bubbles.image.switchWithLabel.onClick.label": "On click link",
   "editor.blocks.bubbles.image.switchWithLabel.onClick.placeholder": "Link alt text (description)",
   "editor.blocks.bubbles.textEditor.plate.label": "Text editor",
   "editor.blocks.bubbles.textEditor.searchVariable.placeholder": "Search for a variable",
-  "editor.blocks.bubbles.video.node.clickToEdit.text": "Click to edit...",
-  "editor.blocks.bubbles.video.settings.numberInput.unit": "px",
-  "editor.blocks.bubbles.video.settings.worksWith.placeholder": "Paste the video link...",
-  "editor.blocks.bubbles.video.settings.worksWith.text": "Works with Youtube, Vimeo and others",
   "editor.blocks.start.text": "Start",
   "editor.editableTypebotName.tooltip.rename.label": "Rename",
   "editor.gettingStartedModal.editorBasics.heading": "Editor Basics",
   "editor.gettingStartedModal.editorBasics.list.four.label": "Preview your bot by clicking the preview button on the top right",
-  "editor.gettingStartedModal.editorBasics.list.label": "Feel free to use the bottom-right bubble to reach out if you have any question. I usually answer within the next 24 hours. 😃",
+  "editor.gettingStartedModal.editorBasics.list.label": "Feel free to use the bottom-right bubble to reach out if you have any question. I usually answer within the next 24 hours. \uD83D\uDE03",
   "editor.gettingStartedModal.editorBasics.list.one.label": "The left side bar contains blocks that you can drag and drop to the board.",
   "editor.gettingStartedModal.editorBasics.list.three.label": "Connect the groups together",
   "editor.gettingStartedModal.editorBasics.list.two.label": "You can group blocks together by dropping them below or above each other",
@@ -231,12 +226,18 @@
   "templates.modal.menuHeading.product": "Product",
   "templates.modal.useTemplateButton.label": "Use this template",
   "upgrade": "Upgrade",
+  "video.aspectRatioInput.label": "Aspect ratio",
+  "video.aspectRatioInput.moreInfoTooltip": "Example: \"16/9\" or \"9/16",
+  "video.maxWidthInput.label": "Max width",
+  "video.maxWidthInput.moreInfoTooltip": "Example: \"300px\" or \"100%",
+  "video.urlInput.helperText": "Works with Youtube, Vimeo, Gumlet, TikTok and others",
+  "video.urlInput.placeholder": "Paste the video link...",
   "workspace.dropdown.logoutButton.label": "Log out",
   "workspace.dropdown.newButton.label": "New workspace",
   "workspace.membersList.inviteButton.label": "Invite",
   "workspace.membersList.inviteInput.placeholder": "colleague@company.com",
   "workspace.membersList.title": "Members",
-  "workspace.membersList.unlockBanner.label": "Upgrade your plan to work with more team members, and unlock awesome power features 🚀",
+  "workspace.membersList.unlockBanner.label": "Upgrade your plan to work with more team members, and unlock awesome power features \uD83D\uDE80",
   "workspace.settings.deleteButton.confirmMessage": "Are you sure you want to delete {workspaceName} workspace? All its folders, typebots and results will be deleted forever.",
   "workspace.settings.deleteButton.label": "Delete workspace",
   "workspace.settings.icon.title": "Icon",
@@ -247,6 +248,5 @@
   "workspace.settings.modal.menu.settings.label": "Settings",
   "workspace.settings.modal.menu.version.label": "Version: {version}",
   "workspace.settings.modal.menu.workspace.label": "Workspace",
-  "workspace.settings.name.label": "Name:",
-  "billing.tiersModal.heading": "Chats pricing table"
+  "workspace.settings.name.label": "Name:"
 }
diff --git a/apps/builder/public/locales/fr.json b/apps/builder/public/locales/fr.json
@@ -102,6 +102,7 @@
   "billing.pricingCard.starter.fileUploadBlock": "Bloc d'upload de fichier",
   "billing.pricingCard.starter.includedSeats": "2 collègues inclus",
   "billing.pricingCard.upgradeButton.current": "Abonnement actuel",
+  "billing.tiersModal.heading": "Table des prix des chats",
   "billing.updateSuccessToast.description": "Ton abonnement {plan} a été mis à jour avec succès \uD83C\uDF89",
   "billing.upgradeAlert.buttonDefaultLabel": "Plus d'informations",
   "billing.upgradeLimitLabel": "Tu dois mettre à niveau ton abonnement pour {type}",
@@ -110,41 +111,35 @@
   "billing.usage.chats.heading": "Chats",
   "billing.usage.heading": "Utilisation",
   "billing.usage.unlimited": "Illimité",
+  "blocks.bubbles.embed.blockCard.tooltip": "Intégrer un pdf, un iframe, un site web...",
+  "blocks.inputs.fileUpload.blockCard.tooltip": "Télécharger des fichiers",
+  "blocks.integrations.googleAnalytics.blockCard.tooltip": "Google Analytics",
+  "blocks.integrations.googleSheets.blockCard.tooltip": "Google Sheets",
   "cancel": "Annuler",
+  "clickToEdit": "Clique pour modifier...",
   "confirmModal.defaultTitle": "Es-tu sûr ?",
   "dashboard.header.settingsButton.label": "Paramètres & Membres",
   "dashboard.redirectionMessage": "Redirection en cours...",
   "dashboard.title": "Mes typebots",
   "delete": "Supprimer",
   "downgrade": "Downgrade",
-  "blocks.bubbles.embed.blockCard.tooltip": "Intégrer un pdf, un iframe, un site web...",
-  "blocks.inputs.fileUpload.blockCard.tooltip": "Télécharger des fichiers",
-  "blocks.integrations.googleAnalytics.blockCard.tooltip": "Google Analytics",
-  "blocks.integrations.googleSheets.blockCard.tooltip": "Google Sheets",
   "editor.blockCard.logicBlock.tooltip.code.label": "Exécuter du code Javascript",
   "editor.blockCard.logicBlock.tooltip.jump.label": "Passer rapidement au groupe suivant",
   "editor.blockCard.logicBlock.tooltip.typebotLink.label": "Lier et exécuter un autre typebot",
-  "editor.blocks.bubbles.audio.node.clickToEdit.text": "Cliquez pour modifier...",
   "editor.blocks.bubbles.audio.settings.autoplay.label": "Activer la lecture automatique",
   "editor.blocks.bubbles.audio.settings.chooseFile.label": "Choisir un fichier",
   "editor.blocks.bubbles.audio.settings.embedLink.label": "Lien intégré",
   "editor.blocks.bubbles.audio.settings.upload.label": "Uploader",
   "editor.blocks.bubbles.audio.settings.worksWith.placeholder": "Collez le lien du fichier audio...",
   "editor.blocks.bubbles.audio.settings.worksWith.text": "Fonctionne avec les fichiers .MP3 et .WAV",
-  "editor.blocks.bubbles.embed.node.clickToEdit.text": "Cliquez pour modifier...",
   "editor.blocks.bubbles.embed.node.show.text": "Afficher l'intégration",
   "editor.blocks.bubbles.embed.settings.numberInput.unit": "px",
   "editor.blocks.bubbles.embed.settings.worksWith.placeholder": "Collez le lien ou le code...",
   "editor.blocks.bubbles.embed.settings.worksWith.text": "Fonctionne avec les PDF, les iframes, les sites web...",
-  "editor.blocks.bubbles.image.node.clickToEdit.text": "Cliquez pour modifier...",
   "editor.blocks.bubbles.image.switchWithLabel.onClick.label": "Redirection au clic",
   "editor.blocks.bubbles.image.switchWithLabel.onClick.placeholder": "Texte alternatif du lien (description)",
   "editor.blocks.bubbles.textEditor.plate.label": "Éditeur de texte",
   "editor.blocks.bubbles.textEditor.searchVariable.placeholder": "Rechercher une variable",
-  "editor.blocks.bubbles.video.node.clickToEdit.text": "Cliquez pour modifier...",
-  "editor.blocks.bubbles.video.settings.numberInput.unit": "px",
-  "editor.blocks.bubbles.video.settings.worksWith.placeholder": "Collez le lien de la vidéo...",
-  "editor.blocks.bubbles.video.settings.worksWith.text": "Fonctionne avec Youtube, Vimeo et autres",
   "editor.blocks.start.text": "Démarrer",
   "editor.editableTypebotName.tooltip.rename.label": "Renommer",
   "editor.gettingStartedModal.editorBasics.heading": "Principes de base de l'éditeur",
@@ -231,6 +226,12 @@
   "templates.modal.menuHeading.product": "Produit",
   "templates.modal.useTemplateButton.label": "Utiliser ce modèle",
   "upgrade": "Upgrade",
+  "video.aspectRatioInput.label": "Ratio",
+  "video.aspectRatioInput.moreInfoTooltip": "Exemple: \"16/9\" ou \"9/16\"",
+  "video.maxWidthInput.label": "Largeur max",
+  "video.maxWidthInput.moreInfoTooltip": "Exemple: \"300px\" ou \"100%\"",
+  "video.urlInput.helperText": "Fonctionne avec Youtube, Vimeo, Gumlet, TikTok et autres",
+  "video.urlInput.placeholder": "Collez le lien de la vidéo...",
   "workspace.dropdown.logoutButton.label": "Déconnexion",
   "workspace.dropdown.newButton.label": "Nouveau workspace",
   "workspace.membersList.inviteButton.label": "Inviter",