paste WebVTT-player styling, but Metadata is not functional yet

viewer/public/data/MIT Regressions intro captions.vtt

@@ -2,9 +2,6 @@ WEBVTT
 Kind: captions
 Language: en
 
-00:00:01.550 --> 00:00:03.361
-["The Vanishing American Family"  by ScubaZ]
-
 00:00:14.068 --> 00:00:16.837
 The Massachusetts Institute of Technology began with a promise.
 

viewer/public/data/MIT Regressions intro metadata.vtt

@@ -2,42 +2,7 @@ WEBVTT
 Kind: captions
 Language: en
 
-00:00:01.550 --> 00:00:03.361
+NOTE  We could have a separation between MUSIC SOURCE, VIDEO SOURCE, NARRATION SOURCE, COMMENTARY, and TRANSCRIPT.
+
+00:00:01.550 --> 00:01:15.448
 ["The Vanishing American Family"  by ScubaZ]
-
-00:00:14.068 --> 00:00:16.837
-The Massachusetts Institute of Technology began with a promise.
-
-00:00:19.252 --> 00:00:21.331
-A promise that with a devotion to technology,
-
-00:00:22.008 --> 00:00:23.735
-through rigorous study of math and science,
-
-00:00:23.939 --> 00:00:25.504
-we can engineer a better tomorrow.
-
-00:00:26.603 --> 00:00:27.599
-we can make
-
-00:00:27.599 --> 00:00:30.000
-a Better World.
-
-00:00:34.095 --> 00:00:35.347
-In this story,
-
-00:00:35.347 --> 00:00:37.242
-we ask a simple question.
-
-00:00:39.045 --> 00:00:40.283
-Have we kept our promise?
-
-00:01:07.526 --> 00:01:10.121
-MIT was founded in 1861.
-
-00:01:10.121 --> 00:01:13.448
-But the Institute as we know it today was born in 1941.
-
-00:01:13.448 --> 00:01:15.448
-December 7th, 1941.
-

viewer/src/components/Player.tsx

@@ -38,10 +38,17 @@ export default function Player() {
                     }}
                 />
             </div>
-            <WebVttPlayer
+            <div>
-                audio={audioUrl}
+                {/* div "control-panel" has multiple buttons for displaying settings on WebVttPlayer */}
-                transcript={transcriptUrl}
+                <div id="control-panel" className="flex flex-row">
-                metadata={metadataUrl} />
+                    <button id="show-metadata" className="bg-gray-200 hover:bg-gray-400 dark:bg-gray-800 dark:hover:bg-gray-700 text-gray-800 dark:text-gray-200 py-2 px-4">Show Metadata</button>
+                </div>
+                <WebVttPlayer
+                    // className="custom-webvtt-player"
+                    audio={audioUrl}
+                    transcript={transcriptUrl}
+                    metadata={metadataUrl} />
+            </div>
         </>
     );
 }

viewer/src/pages/index.tsx

@@ -12,7 +12,6 @@ const Home: NextPage = () => {
 
   const hello = trpc.example.hello.useQuery({ text: "from tRPC" });
   const {theme, setTheme} = useTheme()
-  console.log(theme)
 
   return (
     <>

viewer/src/styles/globals.css

@@ -1,3 +1,163 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+
+@layer components {
+
+    .webvtt-player {
+        /* hug the left-hand side of the screen */
+        /* @apply text-purple-500; */
+    }
+
+    .track {
+        /* flex: 6;
+        height: 90vh;
+        padding: 15px;
+        overflow-y: scroll; */
+
+        /* implement the above styling with tailwind */
+
+        /* tailwind flex-CUSTOMNUMBER */
+        /* @apply h-96 p-[15px] overflow-y-scroll flex-[6]; */
+        @apply text-orange-200;
+    }
+
+}
+
+/* Player */
+.webvtt-player .media {
+    width: 100%;
+    border: thin solid #ccc;
+    margin-right: auto;
+}
+
+.webvtt-player audio {
+    width: 100%;
+    background-color: #ccc;
+}
+
+.webvtt-player audio::-webkit-media-controls-panel {
+    background-color: #ccc;
+}
+
+.webvtt-player .tracks {
+    display: flex;
+}
+
+.webvtt-player .controls {
+    padding: 5px;
+    text-align: center;
+    vertical-align: text-top;
+    background-color: #ccc;
+}
+
+.webvtt-player .seekBar {
+    vertical-align: middle;
+    width: 70%;
+}
+
+/* Track */
+
+.webvtt-player .track {
+    flex: 6;
+    height: 90vh;
+    padding: 10px;
+    overflow-y: scroll;
+}
+
+/* TranscriptLine */
+
+.webvtt-player .active {
+    background-color: #eee;
+    border: 1px solid #ccc;
+}
+
+.webvtt-player .match {
+    background-color: lightyellow;
+}
+
+.webvtt-player .line {
+    padding: 5px;
+    cursor: pointer;
+}
+
+.webvtt-player .time {
+    width: 110px;
+    float: left;
+    font-size: 10pt;
+    line-height: 14pt;
+}
+
+.webvtt-player .text {
+    margin-left: 110px;
+}
+
+
+/* Metadatapoint */
+
+.webvtt-player .point {
+    padding: 5px;
+}
+
+.webvtt-player .time {
+    width: 110px;
+    float: left;
+    font-size: 10pt;
+    line-height: 14pt;
+    cursor: pointer;
+}
+
+.webvtt-player .text {
+    margin-left: 110px;
+}
+
+.webvtt-player .title {
+    font-weight: bold;
+    font-size: inherit;
+    margin: 0;
+    cursor: pointer;
+}
+
+.webvtt-player .titleAlt {
+    font-style: italic;
+    font-weight: normal;
+    font-size: inherit;
+    margin: 0;
+}
+
+.webvtt-player .field {
+    margin-top: 5px;
+}
+
+.webvtt-player .field span {
+    font-style: italic;
+}
+
+
+/* Search */
+.search {
+    border-top: thin solid #ccc;
+    padding: 5px 5px 5px 5px;
+    font-size: 14pt;
+    margin-top: 5px;
+}
+
+.search .container {
+    border: thin solid #ccc;
+}
+
+.search input {
+    font-size: 12pt;
+    border: none;
+    width: 90%;
+}
+
+.search input:focus {
+    outline: none;
+}
+
+.search .icon {
+    padding-left: 5px;
+    padding-right: 5px;
+}