Cleanup + Reorganisation (#3)

* Experiment with rewriting the UI in React

* Reimplement existing UI in React

* Slight Organisation/Renaming/Clean Up

Author: mjakeman

css/Easel.module.css

@@ -81,8 +81,24 @@
 }
 
 .Header {
-    font-size: 20px;
-    padding: 10px 20px;
-    margin: 0;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+
+    padding: 0 20px;
     background-color: #111;
+}
+
+.HeaderText {
+    margin: 0;
+    padding: 0;
+    font-size: 24px;
+    line-height: 50px;
+}
+
+.HeaderCredit,
+.HeaderCredit a {
+    font-size: 14px;
+    line-height: 50px;
+    color: rgba(255,255,255,0.8);
 }

css/easel.css

@@ -3,62 +3,7 @@
     margin: 0;
 }
 
+/* Make the background black so changing pages is not as jarring */
 body {
     background: black;
 }
-
-/*.video-container {
-    position: fixed;
-    width: 100vw;
-    height: 100vh;
-    // border: 5px solid blue;
-    box-sizing: border-box;
-    background-color: #222;
-}
-
-.video-container button {
-    background-color: #111;
-    color: white;
-    padding: 8px;
-    margin: 5px;
-    border: 1px solid black;
-    border-bottom: 3px solid black;
-    border-radius: 2px;
-    transition: background-color 0.15s ease-out;
-}
-
-.video-container button:hover {
-    background-color: #222;
-}
-
-.video-container button:active {
-    background-color: #222;
-    border-bottom: 1px solid black;
-    position: relative;
-    top: 2px;
-}
-
-video {
-    display: block;
-    height: 80%;
-    background-color: black;
-}
-
-nav {
-    display: flex;
-    color: white;
-    font-size: 120%;
-    line-height: 120%;
-    padding: 10px 30px;
-    justify-content: space-between;
-}
-
-nav .credit {
-    font-size: 60%;
-    display: inline;
-    color: rgba(255,255,255,0.4) !important;
-}
-
-nav .credit a {
-    color: inherit;
-} */

css/video.css

@@ -1,7 +1,7 @@
 {
     "manifest_version": 2,
     "name": "Easel - Lecture Recordings (UoA)",
-    "version": "0.2",
+    "version": "0.2.1",
     "author": "Matt Jakeman",
     "description": "An unofficial enhancement suite for watching Lecture Recordings at the University of Auckland.",
 
@@ -14,13 +14,13 @@
     "content_scripts": [
       {
         "matches": ["*://mediaplayer.auckland.ac.nz/*", "*://mediastore.auckland.ac.nz/*"],
-        "js": ["dist/videoenhance.js"],
+        "js": ["dist/video.js"],
         "css": ["css/video.css"],
         "all_frames": true
       },
       {
         "matches": ["*://learningtools.auckland.ac.nz/ltr/home/index/*"],
-        "js": ["dist/course.js"],
+        "js": ["dist/recordings.js"],
         "all_frames": true
       }
     ],
@@ -34,5 +34,5 @@
       "unlimitedStorage",
       "storage"
     ],
-    "web_accessible_resources": ["html/easel.html", "html/error.html"]
+    "web_accessible_resources": ["html/error.html"]
   }

html/easel.html

@@ -10,6 +10,9 @@ export class Header extends React.Component<HeaderProps, {}> {
         let courseText = (this.props.courseName !== undefined)
             ? "(" + this.props.courseName + ")"
             : "";
-        return <h1 className={Style.Header}>Easel - Lecture Recording Manager {courseText}</h1>;
+        return <header className={Style.Header}>
+                <h1 className={Style.HeaderText}>Easel - Lecture Recording Manager {courseText}</h1>
+                <p className={Style.HeaderCredit}>Created by <a href="https://www.mattjakeman.com/">Matt Jakeman</a></p>
+            </header>;
     }
 }