Add URL upload functionality to stream.new indexpage - copy of aa/delete-this-later

lib/urlutils.ts

@@ -1,9 +1,9 @@
 const deliveryDomain = process.env.NEXT_PUBLIC_MUX_BYO_DOMAIN || "mux.com";
 
-export function getStreamBaseUrl() {
+export function getStreamBaseUrl() { // eslint-disable-line
   return `https://stream.${deliveryDomain}`;
 }
 
-export function getImageBaseUrl() {
-  return `https://image.${deliveryDomain}`;
+export function getImageBaseUrl() { // eslint-disable-line
+  return `https://image.${deliveryDomain}`; 
 }

pages/api/assets/index.ts

@@ -0,0 +1,33 @@
+import { NextApiRequest, NextApiResponse } from 'next';
+import Mux from '@mux/mux-node';
+
+const { Video } = new Mux();
+
+export default async (req: NextApiRequest, res: NextApiResponse): Promise<void> => {
+  const { method, body } = req; // eslint-disable-line
+
+  switch (method) {
+    case 'POST':
+      try {
+        const asset = await Video.Assets.create({
+          // this is the text box contents from index.ts
+          input: req.body,
+          "playback_policy": [
+            "public"
+          ],
+        });
+        res.json({
+          id: asset.id,
+          status: asset.status,
+        });
+      } catch (e) {
+        res.statusCode = 500;
+        console.error('Request error', e); // eslint-disable-line no-console
+        res.json({ error: 'Error creating asset' });
+      }
+      break;
+    default:
+      res.setHeader('Allow', ['POST']);
+      res.status(405).end(`Method ${method} Not Allowed`);
+  }
+};

pages/index.tsx

@@ -11,6 +11,12 @@ const Index: React.FC<Props> = () => {
   const [file, setFile] = useState<File | null>(null);
   const [showUploadPage, setShowUploadPage] = useState(true);
   const inputRef = useRef<HTMLInputElement | null>(null);
+  // const [inputRef, setInputRef] = useState(null); // not really working
+
+  const [assetID, setAssetId] = useState('');  // eslint-disable-line
+  const [errorMessage, setErrorMessage] = useState('');// eslint-disable-line
+  const myEndpoint = useRef<HTMLInputElement | null>(null);
+  const [resetButton, setResetButton] = useState(true);  // eslint-disable-line
 
   const onDrop = useCallback((acceptedFiles) => {
     if (acceptedFiles && acceptedFiles[0]) {
@@ -32,6 +38,65 @@ const Index: React.FC<Props> = () => {
     return <UploadProgressFullpage file={file} resetPage={() => setShowUploadPage(false)}/>;
   }
 
+  function isValidHTTPURL(inputString: string | URL) {
+    let url;
+    try {
+      url = new URL(inputString);
+    } catch (_) {
+      return false;
+    }
+    return url.protocol === "http:" || url.protocol === "https:";
+  }
+
+  const myFunc2 = async () => {
+    if (! isValidHTTPURL(myEndpoint.current?.value)) {
+      setErrorMessage('not a valid url, try again ');
+    }
+    else {
+      if (myEndpoint && isValidHTTPURL(myEndpoint.current?.value)) {
+        try {
+          return fetch('/api/assets', {
+            method: 'POST',
+            body: myEndpoint.current.value // Error: Endpoint is possibly null
+          })
+            .then((res) => res.json())
+            // this needs to change because
+            // a direct upload isn't happening,
+            // if something different should happen
+            .then(({ id, status }) => {
+              setAssetId(id);
+              setErrorMessage('');
+              console.log('new asset id', id);
+              console.log('status', status);
+              return status;
+            });
+        } catch (e) {
+          console.error('Error in createUpload', e); // eslint-disable-line no-console
+          setErrorMessage('Error creating upload');
+          return Promise.reject(e);
+        }
+      }
+      try {
+        return fetch('/api/assets', {
+          method: 'POST',
+        })
+          .then((res) => res.json())
+          .then(({ id, status }) => {
+            setAssetId(id);
+            console.log('new asset id', id);
+            console.log('status', status);
+            return status;
+          });
+      } catch (e) {
+        console.error('Error in createUpload', e); // eslint-disable-line no-console
+        setErrorMessage('Error creating upload');
+        return Promise.reject(e);
+      }
+    }
+  };
+
+  // const resetInputRef = async () => { ... }; // todo
+
   return (
     <Layout
       onFileDrop={onDrop}
@@ -40,6 +105,14 @@ const Index: React.FC<Props> = () => {
         <div>
           <h1>Add a video.</h1>
           <h1>Get a shareable link to stream it.</h1>
+          <input className='aminBox' ref={myEndpoint} id="location" type="text" placeholder="Mux Upload URL" /> 
+          <input onClick={myFunc2} className='aminBox' id="startupload" type="button" value="start upload" /> 
+          {assetID && <p className='show'>Asset created: {assetID}</p>}
+          {errorMessage && <p className='show'>Error with upload please try again</p>}
+
+          {/* {resetButton && <a>Reset and upload again</a>} */}
+          {/* <button onClick={setInputRef('')} className='resetUpload' id="resetUpload" type="button" value=" reset upload">Reset and upload again</button>  */}
+
         </div>
         <div className="cta">
           <div className="drop-notice">
@@ -61,12 +134,20 @@ const Index: React.FC<Props> = () => {
         </div>
       </div>
       <style jsx>{`
-        input {
+        input:not(.aminBox) {
           display: none;
         }
         .drop-notice {
           display: none;
         }
+        .hide{
+          display:none;
+          font-size: 15px;
+        }
+        .show{
+          display:block;
+          font-size: 15px;
+        }
 
         .cta {
           display: flex;

yarn.lock

@@ -700,14 +700,14 @@
     hls.js "1.1.5"
     mux-embed "^4.7.0"
 
-"@mux/mux-node@^3.2":
-  version "3.3.2"
-  resolved "https://registry.yarnpkg.com/@mux/mux-node/-/mux-node-3.3.2.tgz#ef8986b9b89161265d9e28d1c723eee2ca2cfadf"
-  integrity sha512-lBKRrsVwtUg0Vb9J/fI65M+9bw3Q27vCM5h5RzJc7BNwr7KxkykEdvaJwixflHbaQASosfa/lRROxYSL5L5S1Q==
+"@mux/mux-node@^5.0.0-rc.1":
+  version "5.0.0-rc.1"
+  resolved "https://registry.yarnpkg.com/@mux/mux-node/-/mux-node-5.0.0-rc.1.tgz#91be34db0a69b689173a1441467ceafaa4d45bc6"
+  integrity sha512-6BTRPDO1iMnjr4JfpDhJgf5tKVTTMMI/mPYiCdfqAQJ3GW4p4znFUtwW+EiHWV60wlaM8jENlOkegQcgoostRQ==
   dependencies:
     axios "^0.25.0"
     esdoc-ecmascript-proposal-plugin "^1.0.0"
-    jsonwebtoken "^8.4.0"
+    jsonwebtoken "^8.5.1"
 
 "@mux/upchunk@^2.3":
   version "2.3.0"
@@ -2449,9 +2449,9 @@ flatted@^3.1.0:
   integrity sha512-WIWGi2L3DyTUvUrwRKgGi9TwxQMUEqPOPQBVi71R96jZXJdFskXEmf54BoZaS1kknGODoIGASGEzBUYdyMCBJg==
 
 follow-redirects@^1.14.7:
-  version "1.14.8"
-  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.14.8.tgz#016996fb9a11a100566398b1c6839337d7bfa8fc"
-  integrity sha512-1x0S9UVJHsQprFcEC/qnNzBLcIxsjAV905f/UkQxbclCsoTWlacCNOpQa/anodLl2uaEKFhfWOvM2Qg77+15zA==
+  version "1.14.9"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.14.9.tgz#dd4ea157de7bfaf9ea9b3fbd85aa16951f78d8d7"
+  integrity sha512-MQDfihBQYMcyy5dhRDJUHcw7lb2Pv/TuE6xP1vyraLukNDHKbDxDNaOE3NbCAdKQApno+GPRyo1YAp89yCjK4w==
 
 form-data@^3.0.0:
   version "3.0.1"
@@ -3554,7 +3554,7 @@ json5@^2.1.2:
   dependencies:
     minimist "^1.2.5"
 
-jsonwebtoken@^8.4.0:
+jsonwebtoken@^8.5.1:
   version "8.5.1"
   resolved "https://registry.yarnpkg.com/jsonwebtoken/-/jsonwebtoken-8.5.1.tgz#00e71e0b8df54c2121a1f26137df2280673bcc0d"
   integrity sha512-XjwVfRS6jTMsqYs0EsuJ4LGxXV14zQybNd4L2r0UvbVnSF9Af8x7p5MzbJ90Ioz/9TI41/hTCvznF/loiSzn8w==