Started work on channel descriptions and thumby updates.

www/css/adminPanel.css

@@ -58,6 +58,39 @@ img.admin-list-entry-item{
     text-align: center;
 }
 
+#channel-info-div{
+    display: flex;
+    justify-content: space-evenly;
+    padding: 0.3em 0;
+}
+
+.channel-info-span p{
+    margin: 0;
+}
+
+#channel-info-thumbnail-span div{
+    position: relative;
+}
+
+#channel-info-description-span{
+    flex: 0.5;
+}
+
+#channel-info-thumbnail-prompt{
+    position: absolute;
+    width: 8em;
+    top: 3em;
+    left: calc(50% - 4.5em);
+}
+
+
+#channel-info-description-prompt{
+    resize: vertical;
+    width: 100%;
+    min-height: 2em;
+    max-height: 8em;
+}
+
 #channel-rank-title{
     margin-bottom: 0;
 }

www/css/theme/movie-night.css

@@ -302,6 +302,11 @@ p.channel-guide-entry-item{
     background-color: var(--bg1-alt0);
 }
 
+/* channel settings */
+.channel-info-label{
+    color: var(--accent1-alt0);
+}
+
 /* channel */
 #media-panel-div{
     background-color: black;

www/js/channel/player.js

@@ -99,6 +99,8 @@ class player{
             }else if(data.media.type == "livehls"){
                 //Create a new HLS Livestream Handler for it
                 this.mediaHandler = new hlsLiveStreamHandler(this.client, this, data.media);
+            }else if(data.media.type == 'dm'){
+                this.mediaHandler = new hlsDailymotionHandler(this.client, this, data.media);
             //Otherwise, if we have a raw-file compatible source
             }else if(data.media.type == 'ia' || data.media.type == 'raw' || data.media.type == 'yt' || data.media.type == 'dm'){
                 //Create a new raw file handler for it

www/js/channelSettings.js

@@ -19,6 +19,7 @@ class channelSettingsPage{
         //Get channel name off of the URL
         this.channel = window.location.pathname.slice(3).replace('/settings','');
         //Instantiate UX handling objects, making sure to pass the channel name.
+        this.chanInfo = new chanInfo(this.channel);
         this.rankList = new rankList(this.channel);
         this.banList = new banList(this.channel);
         this.permList = new permList(this.channel);
@@ -29,6 +30,81 @@ class channelSettingsPage{
     }
 }
 
+class chanInfo{
+    constructor(channel){
+        //Define channel
+        this.channel = channel;
+        //Define UX elements
+        this.thumbnail = document.querySelector("#channel-info-thumbnail");
+        this.thumbnailInput = document.querySelector("#channel-info-thumbnail-prompt");
+        this.description = document.querySelector("#channel-info-description");
+        //Create description prompt
+        this.descriptionInput = document.createElement("textarea");
+        this.descriptionInput.id = "channel-info-description-prompt";
+
+        //Setup Input Event Handlers
+        this.setupInput();
+    }
+
+    setupInput(){
+        this.thumbnail.addEventListener('click', ()=>{this.toggleThumbnailPrompt(true)});
+        this.thumbnailInput.addEventListener('keydown', this.submitThumbnail.bind(this));
+
+        this.description.addEventListener('click', ()=>{this.toggleDescriptionPrompt(true)})
+        this.descriptionInput.addEventListener('keydown', this.submitDescription.bind(this));
+    }
+
+    toggleThumbnailPrompt(enabled){
+        this.thumbnailInput.style.display = enabled ? "" : "none";
+
+        if(enabled){
+            this.thumbnail.classList.remove('interactive');
+        }else{
+            this.thumbnail.classList.add('interactive');
+        }
+    }
+
+    submitThumbnail(event){
+        //If we hit didnt hit enter or escape
+        if(!(event.key == "Enter" || event.key == "Escape") && event.key != null){
+            //bail!
+            return;
+        }
+
+        //Toggle prompt
+        this.toggleThumbnailPrompt(false);
+
+        //Only returns after this point
+        if(event.key != "Enter" && event.key != null){
+            return;
+        }
+    }
+
+    toggleDescriptionPrompt(enabled){
+        if(enabled){
+            this.description.replaceWith(this.descriptionInput);
+        }else{
+            this.descriptionInput.replaceWith(this.description);
+        }
+    }
+
+    submitDescription(event){
+        //If we hit didnt hit enter (without shift) or escape
+        if(!((event.key == "Enter" && !event.shiftKey) || event.key == "Escape") && event.key != null){
+            //bail!
+            return;
+        }
+
+        //Toggle prompt
+        this.toggleDescriptionPrompt(false);
+
+        //Only returns after this point
+        if(event.key != "Enter" && !event.shiftKey && event.key != null){
+            return;
+        }
+    }
+}
+
 class rankList{
     constructor(channel){
         this.channel = channel
@@ -52,7 +128,7 @@ class rankList{
     }
 
     async submitNewRank(event){
-        if(event.key != "Enter" && event.key != null){
+        if((event.key != "Enter" ) && event.key != null){
             //Bail out if we didn't hit enter
             return;
         }