Feature/drm UI (#3659)

* Initial commit, changed DRM selection, added Clearkey, added manual HTTP-Header

* Added priority-selection

* Added method to provide multiple request headers, added switching between input modes for Clearkey, added handling DRM-data provided by sources.json

* Added logic to make Clearkey work with the new drm-handling, added handling additional incoming parameters.

* Removed X-AxDRM-Message being a default field, added Popup to specify multiple KID=KEY pairs, fixed error in handleRequestHeaders logic

* Fixed unintended/missing behaviour when calling doLoad() with manually set DRM

* Rollback of unintentional changes to package.json and package-lock.json

* Removed default server-url

* Removed commented code, added hr element between each key-value pair in dialogue windows

* Changed time the UI is adjusted from loading the video to selecting the URL.

* Fixed old DRM data persisting on selecting a new stream.

* Minor Ui changes for DRM menu

Co-authored-by: dsilhavy <daniel.silhavy@fokus.fraunhofer.de>

samples/dash-if-reference-player/app/css/main.css

@@ -4,7 +4,7 @@ body {
     overflow-x: hidden;
 }
 
-label input {
+label input select {
     display: inline;
 }
 
@@ -95,14 +95,16 @@ a:hover {
 }
 
 .options-item-body input,
-.options-item-body label {
+.options-item-body label,
+.options-item-body select {
     cursor: pointer;
     clear: both;
     float: left;
     margin-bottom: 2px !important;
 }
 
-.options-item-body input {
+.options-item-body input,
+.options-item-body select {
     margin-right: 5px;
 }
 
@@ -591,6 +593,58 @@ Conformance warnings
     padding: 12px;
 }
 
+/********************************************************
+DRM Header Dialogue
+*********************************************************/
+
+.requestHeaderDialogue {
+    display: none;
+    position: fixed;
+    z-index: 1;
+    padding-top: 100px;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    text-align: center;
+    background-color: rgb(255, 255, 255);
+    background-color: rgba(255, 255, 255, 0.4);
+}
+
+.requestHeaderDialogueContent {
+    display: inline-block;
+    background-color: #fefefe;
+    padding: 20px;
+    border: 1px solid #888;
+    width: 80%; /* Could be more or less, depending on screen size */
+}
+
+.dialogue-btn{
+    margin-bottom: 2px;
+}
+
+.modal-hr {
+    border: none;
+    height: 1px;
+    color: #333;
+    background-color: #333;
+}
+
+.close {
+    color: rgb(255, 0, 0);
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+}
+
+.close:hover,
+.close:focus {
+    color: black;
+    text-decoration: none;
+    cursor: pointer;
+}
+
 /********************************************************
 BS Information
 *********************************************************/