thrimbletrimmer: Read title prefix from thrimshim and display it greyed out

This gives a visual indicator showing the editor what prefix the title will have.
It also allows us to set the correct max title length.

thrimbletrimmer/index.html

@@ -80,7 +80,8 @@
         <div id="EditorDetailsPane">
             <div>
                 Title: <br />
-                <input type="text" id="VideoTitle" value="DB2019 - " maxlength="91" />
+                <input type="text" id="VideoTitlePrefix" value="DB2019 - " disabled>
+                <input type="text" id="VideoTitle" value="" maxlength="82" />
             </div>
             <div>
                 Description:<br/>

thrimbletrimmer/scripts/IO.js

@@ -11,6 +11,9 @@ pageSetup = function() {
             }
             //data = testThrimShim;
             desertBusStart = new Date(data.bustime_start);
+            document.getElementById("VideoTitlePrefix").value = data.title_prefix;
+            document.getElementById("VideoTitle").setAttribute("maxlength", data.title_max_length);
+
             document.getElementById("hiddenSubmissionID").value = data.id;
             document.getElementById("StreamName").value = data.video_channel ? data.video_channel:document.getElementById("StreamName").value;
             document.getElementById("StreamStart").value = data.event_start;

thrimbletrimmer/styles/style.css

@@ -28,7 +28,13 @@ body.ultrawide .my-player-dimensions { width:100% !important; }
 #EditorDetailsPane {
     margin-top:100px;
 }
-#VideoTitle, #VideoDescription {
+#VideoTitle {
+    width:90%
+}
+#VideoTitlePrefix {
+    width:5%;
+}
+#VideoDescription {
     width:100%;
 }