From 49afdaf00030fbf5b9fc0f246723c6ff6c183b76 Mon Sep 17 00:00:00 2001
From: Frederick Zhang <frederickzhang@ucla.edu>
Date: Thu, 6 Jun 2024 19:29:24 -0700
Subject: [PATCH 1/2] fix styling on old tagging page

---
 app/(interactive)/tag-match/[slug]/page.js |   2 -
 app/(interactive)/tag-match/page.js        | 118 +++++++++++----------
 2 files changed, 63 insertions(+), 57 deletions(-)

diff --git a/app/(interactive)/tag-match/[slug]/page.js b/app/(interactive)/tag-match/[slug]/page.js
index 52a6b67..8b89eab 100644
--- a/app/(interactive)/tag-match/[slug]/page.js
+++ b/app/(interactive)/tag-match/[slug]/page.js
@@ -473,8 +473,6 @@ export default function TagMatch() {
 
       </div>
 
-
-
       { /* CSV Table */}
       <table>
         <thead>
diff --git a/app/(interactive)/tag-match/page.js b/app/(interactive)/tag-match/page.js
index 789c442..33408ab 100644
--- a/app/(interactive)/tag-match/page.js
+++ b/app/(interactive)/tag-match/page.js
@@ -199,61 +199,69 @@ export default function TagMatch() {
     <div className={styles.container}>
       <label>Enter YouTube Code: </label>
       <input type="text" value={videoId} onChange={handleVideoIdChange} ref={inputRef} />
-      <VideoPlayer videoId={videoId} setVideoObject={setVideoObject} />
-      <button onClick={handleDownload}>Download CSV</button>
-      <button onClick={handleCopyColumns}>Copy Columns</button>
-      <table className={styles.table}>
-        <tbody>
-          <tr>
-            <td colSpan="2">Current Time: {timerValue}ms</td>
-          </tr>
-          <tr>
-            <td>Jump to: </td>
-          </tr>
-          <tr>
-            <td>
-              <input
-                type="number"
-                placeholder="Milliseconds"
-                value={timerValue}
-                onChange={(event) => handleMillisecondsChange(event.target.value)}
-                style={{ marginRight: '10px' }}
-              />
-            </td>
-            <td>ms</td>
-          </tr>
-          <tr>
-            <td>
-              <input
-                type="number"
-                placeholder="Minutes"
-                value={Math.floor(timerValue / 60000)}
-                onChange={(event) => {
-                  const minutes = parseFloat(event.target.value);
-                  const seconds = (timerValue % 60000) / 1000;
-                  handleMinutesSecondsChange(minutes, seconds);
-                }}
-                style={{ marginRight: '10px' }}
-              />
-            </td>
-            <td>minutes</td>
-            <td>
-              <input
-                type="number"
-                placeholder="Seconds"
-                value={Math.round((timerValue % 60000) / 1000)}
-                onChange={(event) => {
-                  const seconds = parseFloat(event.target.value);
-                  const minutes = Math.floor(timerValue / 60000);
-                  handleMinutesSecondsChange(minutes, seconds);
-                }}
-              />
-            </td>
-            <td>seconds</td>
-          </tr>
-        </tbody>
-      </table>
-      <KeybindingsTable />
+      <div style={{ display: 'flex', flexDirection: 'row', width: '100%', height: '28vw'}}>
+        <div style={{ display: 'flex', flexDirection: 'column'}}>
+          <div style={{width: '42vw'}}>
+            <VideoPlayer videoId={videoId} setVideoObject={setVideoObject} />
+          </div>
+          <button onClick={handleDownload}>Download CSV</button>
+          <button onClick={handleCopyColumns}>Copy Columns</button>
+        </div>
+        <div>
+          <table className={styles.table}>
+            <tbody>
+              <tr>
+                <td colSpan="2">Current Time: {timerValue}ms</td>
+              </tr>
+              <tr>
+                <td>Jump to: </td>
+              </tr>
+              <tr>
+                <td>
+                  <input
+                    type="number"
+                    placeholder="Milliseconds"
+                    value={timerValue}
+                    onChange={(event) => handleMillisecondsChange(event.target.value)}
+                    style={{ marginRight: '10px' }}
+                  />
+                </td>
+                <td>ms</td>
+              </tr>
+              <tr>
+                <td>
+                  <input
+                    type="number"
+                    placeholder="Minutes"
+                    value={Math.floor(timerValue / 60000)}
+                    onChange={(event) => {
+                      const minutes = parseFloat(event.target.value);
+                      const seconds = (timerValue % 60000) / 1000;
+                      handleMinutesSecondsChange(minutes, seconds);
+                    }}
+                    style={{ marginRight: '10px' }}
+                  />
+                </td>
+                <td>minutes</td>
+                <td>
+                  <input
+                    type="number"
+                    placeholder="Seconds"
+                    value={Math.round((timerValue % 60000) / 1000)}
+                    onChange={(event) => {
+                      const seconds = parseFloat(event.target.value);
+                      const minutes = Math.floor(timerValue / 60000);
+                      handleMinutesSecondsChange(minutes, seconds);
+                    }}
+                  />
+                </td>
+                <td>seconds</td>
+              </tr>
+            </tbody>
+          </table>
+          <KeybindingsTable />
+        </div>
+      </div>
 
       <hr />
       <table>

From 0d02d044703ddecf8b44e0b3537cae831188b36a Mon Sep 17 00:00:00 2001
From: Frederick Zhang <frederickzhang@ucla.edu>
Date: Thu, 6 Jun 2024 19:54:52 -0700
Subject: [PATCH 2/2] download straight csv

---
 app/(interactive)/match-list/page.js       |  2 +-
 app/(interactive)/tag-match/[slug]/page.js | 13 +++++++++++++
 app/(interactive)/tag-match/page.js        |  2 +-
 3 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/app/(interactive)/match-list/page.js b/app/(interactive)/match-list/page.js
index 3deb4f4..2b11785 100644
--- a/app/(interactive)/match-list/page.js
+++ b/app/(interactive)/match-list/page.js
@@ -72,7 +72,7 @@ export default function MatchList() {
             <div key={match.id}>
               <li>
                 <span>{match.name}<button onClick={() => handleDelete(match.id)}>Delete</button></span>
-                <span><button onClick={() => handleDownload(match.id)}>Download</button></span>
+                <span><button onClick={() => handleDownload(match.id)}>Download JSON</button></span>
                 <Link href={`/tag-match/${match.id}`}><button>Tag Match</button></Link>
                 <br/>
                 <input onChange={(e) => setNewName(e.target.value)}/>
diff --git a/app/(interactive)/tag-match/[slug]/page.js b/app/(interactive)/tag-match/[slug]/page.js
index 8b89eab..f8a6c8d 100644
--- a/app/(interactive)/tag-match/[slug]/page.js
+++ b/app/(interactive)/tag-match/[slug]/page.js
@@ -132,6 +132,18 @@ export default function TagMatch() {
     navigator.clipboard.writeText(csvData);
   };
 
+  const handleDownload = () => {
+    const csvData = convertToCSV(tableState.rows);
+    const blob = new Blob([csvData], { type: 'text/csv' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = 'points.csv';
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  }
 
   useEffect(() => {
     window.addEventListener('keydown', handleKeyDown);
@@ -418,6 +430,7 @@ export default function TagMatch() {
           <label>Input YouTube Code: </label>
           <input type="text" value={videoId} onChange={handleVideoIdChange} />
 
+          <button onClick={handleDownload}>Download CSV</button>
           <button onClick={handleCopy}>Copy Columns</button>
           <button onClick={undoLastAction}>Undo</button>
           <button onClick={togglePublish}>{isPublished ? "Unpublish" : "Publish"}</button>
diff --git a/app/(interactive)/tag-match/page.js b/app/(interactive)/tag-match/page.js
index 33408ab..9a5f10c 100644
--- a/app/(interactive)/tag-match/page.js
+++ b/app/(interactive)/tag-match/page.js
@@ -204,7 +204,7 @@ export default function TagMatch() {
           <div style={{width: '42vw'}}>
             <VideoPlayer videoId={videoId} setVideoObject={setVideoObject} />
           </div>
-          <button onClick={handleDownload}>Download CSV</button>
+          <button onClick={handleDownload}>Download JSON</button>
           <button onClick={handleCopyColumns}>Copy Columns</button>
         </div>
         <div>