Add notification pane in reference UI (Dash-Industry-Forum#4977)

Author: dsilhavy

contrib/controlbar/controlbar.css

@@ -301,7 +301,7 @@
     padding: 0.35rem 0.75rem;
     font-size: 0.7rem;
     font-weight: 600;
-    color: var(--cb-accent);
+    color: rgba(255, 255, 255, 0.5);
     text-transform: uppercase;
     letter-spacing: 0.03em;
 }

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

@@ -769,22 +769,130 @@ body {
     height: 100% !important;
 }
 
-/* ---- Conformance Panel ---- */
-.conformance-panel {
-    margin-top: 1rem;
+/* ---- Notification Panel ---- */
+.notification-panel {
+    margin-top: 0.75rem;
+    background: var(--rp-bg-secondary);
+    border-radius: 8px;
+    border: 1px solid var(--rp-border);
+    overflow: hidden;
+}
+
+.notification-header {
+    padding: 0.5rem 0.75rem;
+    border-bottom: 1px solid var(--rp-border);
+}
+
+.notification-header h6 {
+    margin: 0;
+    font-size: 0.85rem;
+    color: var(--rp-text);
+}
+
+.notification-header-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.notification-header-row + .notification-header-row {
+    margin-top: 0.4rem;
+}
+
+.notification-filters {
+    display: flex;
+    gap: 0.25rem;
+}
+
+.notification-filter-btn {
+    font-size: 0.65rem;
+    padding: 1px 8px;
+    border-radius: 10px;
+    font-weight: 600;
+    text-transform: uppercase;
+    border: 1px solid var(--rp-border);
+    color: var(--rp-text-muted);
+    background: transparent;
+    opacity: 0.5;
+    transition: all 0.15s;
+    cursor: pointer;
+}
+
+.notification-filter-btn:hover {
+    opacity: 0.8;
+}
+
+.notification-filter-btn.active[data-filter="error"] {
+    background: rgba(220, 53, 69, 0.2);
+    color: var(--rp-danger);
+    border-color: var(--rp-danger);
+    opacity: 1;
+}
+
+.notification-filter-btn.active[data-filter="warning"] {
+    background: rgba(255, 193, 7, 0.2);
+    color: var(--rp-warning);
+    border-color: var(--rp-warning);
+    opacity: 1;
+}
+
+.notification-filter-btn.active[data-filter="suggestion"] {
+    background: rgba(13, 202, 240, 0.2);
+    color: var(--rp-info);
+    border-color: var(--rp-info);
+    opacity: 1;
+}
+
+.notification-search {
+    max-width: 180px;
+    font-size: 0.75rem !important;
+    padding: 2px 8px !important;
+    background: var(--rp-bg-primary);
+    border-color: var(--rp-border);
+    color: var(--rp-text);
+}
+
+.notification-search:focus {
+    border-color: var(--rp-accent);
+    box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.15);
+}
+
+.notification-list {
+    max-height: 200px;
+    overflow-y: auto;
+}
+
+.notification-empty {
+    padding: 1rem 0.75rem;
+    text-align: center;
+    font-size: 0.78rem;
+    color: var(--rp-text-muted);
 }
 
-.conformance-item {
+.notification-item {
     display: flex;
     align-items: flex-start;
     gap: 0.5rem;
-    padding: 0.4rem 0.75rem;
-    font-size: 0.8rem;
+    padding: 0.35rem 0.75rem;
+    font-size: 0.78rem;
     border-bottom: 1px solid var(--rp-separator);
 }
 
-.conformance-badge {
-    font-size: 0.65rem;
+.notification-item:last-child {
+    border-bottom: none;
+}
+
+.notification-timestamp {
+    font-family: monospace;
+    font-size: 0.7rem;
+    color: var(--rp-text-muted);
+    white-space: nowrap;
+    flex-shrink: 0;
+    padding-top: 1px;
+}
+
+.notification-badge {
+    font-size: 0.6rem;
     font-weight: 600;
     padding: 2px 6px;
     border-radius: 3px;
@@ -793,26 +901,24 @@ body {
     flex-shrink: 0;
 }
 
-.conformance-badge.badge-warning {
-    background: rgba(255, 193, 7, 0.2);
-    color: var(--rp-warning);
-}
-
-.conformance-badge.badge-error {
+.notification-badge.badge-error {
     background: rgba(220, 53, 69, 0.2);
     color: var(--rp-danger);
 }
 
-.conformance-badge.badge-suggestion {
+.notification-badge.badge-warning {
+    background: rgba(255, 193, 7, 0.2);
+    color: var(--rp-warning);
+}
+
+.notification-badge.badge-suggestion {
     background: rgba(13, 202, 240, 0.2);
     color: var(--rp-info);
 }
 
-/* ---- Error Modal ---- */
-.error-modal .modal-header {
-    background: var(--rp-danger);
-    color: #fff;
-    border-bottom: none;
+.notification-message {
+    word-break: break-word;
+    min-width: 0;
 }
 
 /* ---- Footer ---- */

samples/dash-if-reference-player/app/data/dashjs_config.json

@@ -1,6 +1,7 @@
 {
   "debug": {
-    "logLevel": 5
+    "logLevel": 5,
+    "dispatchEvent": true
   },
   "streaming": {
     "buffer": {

samples/dash-if-reference-player/app/js/ConformancePanel.js

@@ -187,6 +187,15 @@ export class DrmController {
             }
             this._extractHeaders(ck.httpRequestHeaders, this._ckHeaders, 'drm-ck-headers');
         }
+
+        // Enable DRM prioritization checkbox if any system has a priority set
+        const hasPriority = [pr, wv, fp].some(d => d && d.priority !== undefined && d.priority !== null);
+        if (hasPriority) {
+            const prioritize = $('#drm-prioritize');
+            if (prioritize) {
+                prioritize.checked = true;
+            }
+        }
     }
 
     /**