From 2a4ebf4a94dc0f1eb18904447cbaf038684f222e Mon Sep 17 00:00:00 2001
From: Ishan Ramrakhiani <himanalot@gmail.com>
Date: Wed, 13 May 2026 15:29:39 -0400
Subject: [PATCH] Add media details monitoring shortcut

---
 html/media/details.html |  9 +++++++++
 js/media/details.js     | 13 +++++++++++++
 js/player.js            | 34 ++++++++++++++++++++++++----------
 3 files changed, 46 insertions(+), 10 deletions(-)

diff --git a/html/media/details.html b/html/media/details.html
index 441c8ba4..3b0aae67 100644
--- a/html/media/details.html
+++ b/html/media/details.html
@@ -51,6 +51,15 @@ <h1 id="media_heading" data-t>Media Details</h1>
                         class="hidden"
                         >Versions</ob-element-button
                     >
+                    <ob-element-button
+                        data-text="Monitoring"
+                        data-icon-name="chart-line"
+                        data-icon-style="solid"
+                        data-t
+                        id="media_details_monitor"
+                        class="hidden"
+                        >Monitoring</ob-element-button
+                    >
                 </p>
             </div>
             <ob-field-thumbnail
diff --git a/js/media/details.js b/js/media/details.js
index 1b3a4c68..66475bd7 100644
--- a/js/media/details.js
+++ b/js/media/details.js
@@ -4,6 +4,12 @@
 // media details page
 OB.MediaDetails = {};
 OB.MediaDetails.currentId = null;
+OB.MediaDetails.canViewPlayerMonitor = function () {
+    return OB.Settings.permissions.some(function (permission) {
+        return permission == "view_player_monitor" || permission.indexOf("view_player_monitor:") == 0;
+    });
+};
+
 OB.MediaDetails.page = function (id) {
     OB.MediaDetails.currentId = id;
     OB.API.post("media", "get", { id: id, where_used: true }, function (response) {
@@ -44,6 +50,13 @@ OB.MediaDetails.page = function (id) {
             document.querySelector("#media_details_download").classList.remove("hidden");
         }
 
+        if (OB.MediaDetails.canViewPlayerMonitor()) {
+            $("#media_details_monitor").click(function () {
+                OB.Player.monitor(id);
+            });
+            document.querySelector("#media_details_monitor").classList.remove("hidden");
+        }
+
         // we can edit if we have manage_media (manage all media), or we're the owner and can create our own media
         if (item.can_edit) {
             $("#media_details_edit").click(function () {
diff --git a/js/player.js b/js/player.js
index 90f387be..d5d48612 100644
--- a/js/player.js
+++ b/js/player.js
@@ -297,12 +297,17 @@ OB.Player.deletePlayerConfirm = function (player_id) {
    PLAYER MONITORING SECTION
 ========================= */
 
-OB.Player.monitor = function () {
+OB.Player.monitor = function (media_id = null) {
     OB.UI.replaceMain("player/monitor.html");
+    OB.Player.monitor_filter_id = 0;
 
     $("#monitor_date_start").attr("data-value", moment().subtract(1, "days"));
     $("#monitor_date_end").attr("data-value", moment());
 
+    if (media_id) {
+        OB.Player.monitorFilterAdd("media_id", "is", media_id);
+    }
+
     OB.API.post("players", "search", {}, function (data) {
         var players = data.data;
         $.each(players, function (index, item) {
@@ -333,21 +338,30 @@ OB.Player.monitorFilterFieldChange = function () {
 
 OB.Player.monitor_filter_id = 0;
 
-OB.Player.monitorFilterAdd = function () {
+OB.Player.monitorFilterAdd = function (filter_column = null, filter_operator = null, filter_value = null) {
     OB.Player.monitor_filter_id++;
 
-    var filter_column = $("#monitor_filter_field").val();
-    var filter_operator = $("#monitor_filter_operator").val();
-    var filter_value = $.trim($("#monitor_filter_value").val());
+    if (filter_column == null) filter_column = $("#monitor_filter_field").val();
+    if (filter_operator == null) filter_operator = $("#monitor_filter_operator").val();
+    if (filter_value == null) filter_value = $("#monitor_filter_value").val();
+
+    filter_value = $.trim(String(filter_value));
 
     if (filter_value == "") return;
 
+    var filter_field_name = $("#monitor_filter_field option")
+        .filter(function () {
+            return this.value == filter_column;
+        })
+        .text();
+    var filter_operator_name = $("#monitor_filter_operator option")
+        .filter(function () {
+            return this.value == filter_operator;
+        })
+        .text();
+
     var filter_friendly_string =
-        $("#monitor_filter_field option:selected").text() +
-        " " +
-        $("#monitor_filter_operator option:selected").text() +
-        " " +
-        $("#monitor_filter_value").val();
+        (filter_field_name || filter_column) + " " + (filter_operator_name || filter_operator) + " " + filter_value;
 
     var $html = $(
         '<div><a href="javascript: OB.Player.monitorFilterDel(' +