Revert "Revert "issue developerforce#7""

This reverts commit 94400e6.
DKulan · Apr 7, 2021 · 257f261 · 257f261
1 parent 94400e6
commit 257f261
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 3 deletions.
diff --git a/client/src/pages/Create/Create.css b/client/src/pages/Create/Create.css
@@ -45,6 +45,10 @@ textarea::placeholder {
   transition: color 150ms ease-in-out;
 }
 
+.text-limit-error {
+  color: var(--color-error-500)
+}
+
 @media (min-width: 560px) {
   .gif-video {
     height: 288px;

diff --git a/client/src/pages/Create/Create.js b/client/src/pages/Create/Create.js
@@ -27,6 +27,7 @@ function Create({ history }) {
   const [isWebcamReady, setIsWebcamReady] = useState(false)
   const [gifId, setGifId] = useState()
   const [text, setText] = useState('')
+  const [textLimitError, setTextLimitError] = useState('')
   const [isProcessingGif, setIsProcessingGif] = useState('')
   const [isUploading, setUploading] = useState(false)
   const [warning, setWarning] = useState(
@@ -135,6 +136,15 @@ function Create({ history }) {
     download(fileBlob, `${gifId}.gif`)
   }
 
+  const handleText = (input) => {
+    if (input.length === 30) {
+      setTextLimitError('Caption must have a maximum limit of 30 characters.')
+    } else {
+      setText(input)
+      setTextLimitError('')
+    }
+  }
+
   const header = (
     <>
       <h1>Create Your Own GIF</h1>
@@ -224,9 +234,12 @@ function Create({ history }) {
           )}
           {phase === PHASE_TEXT && (
             <>
+              {textLimitError && (
+                <p className="text-limit-error">{textLimitError}</p>
+              )}
               <textarea
-                placeholder="Add a caption to your GIF!"
-                onChange={(e) => setText(e.target.value)}
+                placeholder="Add a caption to your GIF! (maximum 30 characters)"
+                onChange={(e) => handleText(e.target.value)}
                 value={text}
               />
               <div className="gif-button-group">

diff --git a/server/server.js b/server/server.js
@@ -180,6 +180,7 @@ app.post('/uploadGIF', ({ body }, res) => {
   })
 })
 
+/* eslint-disable */
 app.post('/video2gif', upload.none(), ({ body }, res) => {
   const { videoId, text, fontsize } = body
   ffmpeg()
@@ -192,7 +193,11 @@ app.post('/video2gif', upload.none(), ({ body }, res) => {
       {
         filter: 'drawtext',
         options: {
-          text: text.replace(/\r?\n|\r/gm, '\v'),
+          text: text
+            .replaceAll('\\\\', '\\\\\\\\\\\\\\\\')
+            .replaceAll("'", "'\\\\\\\\\\\\''")
+            .replaceAll('%', '\\\\\\\\\\\\%')
+            .replaceAll(':', '\\\\\\\\\\\\:'),
           fontsize,
           fontcolor: 'white',
           x: '(w-text_w)/2',