From 7c7b536ec80c059f0383bc70a761c542dd2a3608 Mon Sep 17 00:00:00 2001
From: herby2212 <12448284+herby2212@users.noreply.github.com>
Date: Sat, 7 Jan 2023 12:43:43 +0100
Subject: [PATCH 1/4] implementation for history page

---
 data/interfaces/default/history.html | 42 +++++++++++++++++++++++-----
 plexpy/webserve.py                   |  5 ++++
 2 files changed, 40 insertions(+), 7 deletions(-)

diff --git a/data/interfaces/default/history.html b/data/interfaces/default/history.html
index cf15c87f..37a57b46 100644
--- a/data/interfaces/default/history.html
+++ b/data/interfaces/default/history.html
@@ -52,6 +52,17 @@
                     <input type="checkbox" name="media_type-filter" id="history-media_type-live" value="live" autocomplete="off"><i class="fa fa-broadcast-tower"></i> Live TV
                 </label>
             </div>
+            <div class="btn-group" data-toggle="buttons" id="network_type-selection">
+                <label class="btn btn-dark btn-filter">
+                    <input type="checkbox" name="network_type-filter" id="history-network_type-lan" value="lan" autocomplete="off"><i class="fa fa-server"></i> Local Play
+                </label>
+                <label class="btn btn-dark btn-filter">
+                    <input type="checkbox" name="network_type-filter" id="history-network_type-wan" value="wan" autocomplete="off"><i class="fa fa-globe"></i> Remote Play
+                </label>
+                <label class="btn btn-dark btn-filter">
+                    <input type="checkbox" name="network_type-filter" id="history-network_type-cellular" value="cellular" autocomplete="off"><i class="fa fa-broadcast-tower"></i> Mobile Play
+                </label>
+            </div>
             <div class="btn-group" data-toggle="buttons" id="transcode_decision-selection">
                 <label class="btn btn-dark btn-filter">
                     <input type="checkbox" name="transcode_decision-filter" id="history-transcode_decision-direct_play" value="direct play" autocomplete="off"><i class="fa fa-play-circle"></i> Direct Play
@@ -145,7 +156,7 @@
             }
         });
 
-        function loadHistoryTable(media_type, transcode_decision, selected_user_id) {
+        function loadHistoryTable(media_type, network_type, transcode_decision, selected_user_id) {
             history_table_options.ajax = {
                 url: 'get_history',
                 type: 'POST',
@@ -153,6 +164,7 @@
                     return {
                         json_data: JSON.stringify(d),
                         media_type: media_type,
+                        network_type: network_type,
                         transcode_decision: transcode_decision,
                         user_id: selected_user_id
                     };
@@ -177,6 +189,15 @@
                 history_table.draw();
             });
 
+            $('#network_type-selection').on('change', function () {
+                $('#network_type-selection > label').removeClass('active');
+                var selected_filter = $('input[name=network_type-filter]:checked', '#network_type-selection');
+                $(selected_filter).closest('label').addClass('active');
+                network_type = $(selected_filter).map(function () { return $(this).val(); }).get().join(',');
+                setLocalStorage('history_network_type', network_type);
+                history_table.draw();
+            });
+
             $('#transcode_decision-selection').on('change', function () {
                 $('#transcode_decision-selection > label').removeClass('active');
                 var selected_filter = $('input[name=transcode_decision-filter]:checked', '#transcode_decision-selection');
@@ -192,23 +213,30 @@
             });
         }
 
-        var selected_user_id = "${_session['user_group']}" == "admin" ? null : "${_session['user_id']}";
+        let selected_user_id = "${_session['user_group']}" == "admin" ? null : "${_session['user_id']}";
 
-        var media_type = getLocalStorage('history_media_type', 'all');
+        let media_type = getLocalStorage('history_media_type', 'all');
         $.each(media_type.split(','), function (i, item) {
-            var history_media_type = $('#history-media_type-' + item);
+            let history_media_type = $('#history-media_type-' + item);
             history_media_type.prop('checked', true);
             history_media_type.closest('label').addClass('active');
         });
 
-        var transcode_decision = getLocalStorage('history_transcode_decision', 'all');
+        let network_type = getLocalStorage('history_network_type', 'all');
+        $.each(network_type.split(','), function (i, item) {
+            let history_network_type = $('#history-network_type-' + item);
+            history_network_type.prop('checked', true);
+            history_network_type.closest('label').addClass('active');
+        });
+
+        let transcode_decision = getLocalStorage('history_transcode_decision', 'all');
         $.each(transcode_decision.split(','), function (i, item) {
-            var history_transcode_decision = $('#history-transcode_decision-' + item.replace(' ', '_'));
+            let history_transcode_decision = $('#history-transcode_decision-' + item.replace(' ', '_'));
             history_transcode_decision.prop('checked', true);
             history_transcode_decision.closest('label').addClass('active');
         });
 
-        loadHistoryTable(media_type, transcode_decision, selected_user_id);
+        loadHistoryTable(media_type, network_type, transcode_decision, selected_user_id);
 
         % if _session['user_group'] == 'admin':
         $('#row-edit-mode').on('click', function() {
diff --git a/plexpy/webserve.py b/plexpy/webserve.py
index 76c44243..e2a485c1 100644
--- a/plexpy/webserve.py
+++ b/plexpy/webserve.py
@@ -1898,6 +1898,7 @@ class WebInterface(object):
                 after (str):                    History after and including the date, "YYYY-MM-DD"
                 section_id (int):               2
                 media_type (str):               "movie", "episode", "track", "live"
+                network_type (str):             "lan", "wan", "cellular"
                 transcode_decision (str):       "direct play", "copy", "transcode",
                 guid (str):                     Plex guid for an item, e.g. "com.plexapp.agents.thetvdb://121361/6/1"
                 order_column (str):             "date", "friendly_name", "ip_address", "platform", "player",
@@ -2029,6 +2030,10 @@ class WebInterface(object):
             media_type = helpers.split_strip(kwargs.get('media_type', ''))
             if media_type and 'all' not in media_type:
                 custom_where.append(['media_type_live', media_type])
+        if 'network_type' in kwargs:
+            network_type = helpers.split_strip(kwargs.get('network_type', ''))
+            if network_type:
+                custom_where.append(['location', network_type])
         if 'transcode_decision' in kwargs:
             transcode_decision = helpers.split_strip(kwargs.get('transcode_decision', ''))
             if transcode_decision and 'all' not in transcode_decision:

From 47f87a98df51a3094a59cd3d6772cde360f6aa87 Mon Sep 17 00:00:00 2001
From: herby2212 <12448284+herby2212@users.noreply.github.com>
Date: Sat, 7 Jan 2023 12:57:50 +0100
Subject: [PATCH 2/4] implementation for library history

---
 data/interfaces/default/history.html | 14 +++++------
 data/interfaces/default/library.html | 36 ++++++++++++++++++++++++----
 2 files changed, 38 insertions(+), 12 deletions(-)

diff --git a/data/interfaces/default/history.html b/data/interfaces/default/history.html
index 37a57b46..7a3f9722 100644
--- a/data/interfaces/default/history.html
+++ b/data/interfaces/default/history.html
@@ -182,7 +182,7 @@
 
             $('#media_type-selection').on('change', function () {
                 $('#media_type-selection > label').removeClass('active');
-                var selected_filter = $('input[name=media_type-filter]:checked', '#media_type-selection');
+                let selected_filter = $('input[name=media_type-filter]:checked', '#media_type-selection');
                 $(selected_filter).closest('label').addClass('active');
                 media_type = $(selected_filter).map(function () { return $(this).val(); }).get().join(',');
                 setLocalStorage('history_media_type', media_type);
@@ -191,7 +191,7 @@
 
             $('#network_type-selection').on('change', function () {
                 $('#network_type-selection > label').removeClass('active');
-                var selected_filter = $('input[name=network_type-filter]:checked', '#network_type-selection');
+                let selected_filter = $('input[name=network_type-filter]:checked', '#network_type-selection');
                 $(selected_filter).closest('label').addClass('active');
                 network_type = $(selected_filter).map(function () { return $(this).val(); }).get().join(',');
                 setLocalStorage('history_network_type', network_type);
@@ -200,7 +200,7 @@
 
             $('#transcode_decision-selection').on('change', function () {
                 $('#transcode_decision-selection > label').removeClass('active');
-                var selected_filter = $('input[name=transcode_decision-filter]:checked', '#transcode_decision-selection');
+                let selected_filter = $('input[name=transcode_decision-filter]:checked', '#transcode_decision-selection');
                 $(selected_filter).closest('label').addClass('active');
                 transcode_decision = $(selected_filter).map(function () { return $(this).val(); }).get().join(',');
                 setLocalStorage('history_transcode_decision', transcode_decision);
@@ -213,23 +213,23 @@
             });
         }
 
-        let selected_user_id = "${_session['user_group']}" == "admin" ? null : "${_session['user_id']}";
+        const selected_user_id = "${_session['user_group']}" == "admin" ? null : "${_session['user_id']}";
 
-        let media_type = getLocalStorage('history_media_type', 'all');
+        const media_type = getLocalStorage('history_media_type', 'all');
         $.each(media_type.split(','), function (i, item) {
             let history_media_type = $('#history-media_type-' + item);
             history_media_type.prop('checked', true);
             history_media_type.closest('label').addClass('active');
         });
 
-        let network_type = getLocalStorage('history_network_type', 'all');
+        const network_type = getLocalStorage('history_network_type', '');
         $.each(network_type.split(','), function (i, item) {
             let history_network_type = $('#history-network_type-' + item);
             history_network_type.prop('checked', true);
             history_network_type.closest('label').addClass('active');
         });
 
-        let transcode_decision = getLocalStorage('history_transcode_decision', 'all');
+        const transcode_decision = getLocalStorage('history_transcode_decision', 'all');
         $.each(transcode_decision.split(','), function (i, item) {
             let history_transcode_decision = $('#history-transcode_decision-' + item.replace(' ', '_'));
             history_transcode_decision.prop('checked', true);
diff --git a/data/interfaces/default/library.html b/data/interfaces/default/library.html
index 59de6497..87e91676 100644
--- a/data/interfaces/default/library.html
+++ b/data/interfaces/default/library.html
@@ -216,6 +216,17 @@ DOCUMENTATION :: END
                                                 </button>
                                             </div>
                                             % endif
+                                            <div class="btn-group" data-toggle="buttons" id="network_type-selection">
+                                                <label class="btn btn-dark btn-filter">
+                                                    <input type="checkbox" name="network_type-filter" id="history-network_type-lan" value="lan" autocomplete="off"><i class="fa fa-server"></i> Local Play
+                                                </label>
+                                                <label class="btn btn-dark btn-filter">
+                                                    <input type="checkbox" name="network_type-filter" id="history-network_type-wan" value="wan" autocomplete="off"><i class="fa fa-globe"></i> Remote Play
+                                                </label>
+                                                <label class="btn btn-dark btn-filter">
+                                                    <input type="checkbox" name="network_type-filter" id="history-network_type-cellular" value="cellular" autocomplete="off"><i class="fa fa-broadcast-tower"></i> Mobile Play
+                                                </label>
+                                            </div>
                                             <div class="btn-group" data-toggle="buttons" id="transcode_decision-selection">
                                                 <label class="btn btn-dark btn-filter">
                                                     <input type="checkbox" name="transcode_decision-filter" id="history-transcode_decision-direct_play" value="direct play" autocomplete="off"><i class="fa fa-play-circle"></i> Direct Play
@@ -567,7 +578,7 @@ DOCUMENTATION :: END
 
     $(".inactive-library-tooltip").tooltip();
 
-    function loadHistoryTable(transcode_decision) {
+    function loadHistoryTable(network_type, transcode_decision) {
         // Build watch history table
         history_table_options.ajax = {
             url: 'get_history',
@@ -577,6 +588,7 @@ DOCUMENTATION :: END
                     json_data: JSON.stringify( d ),
                     section_id: section_id,
                     user_id: "${history_user_id}",
+                    network_type: network_type,
                     transcode_decision: transcode_decision
                 };
             }
@@ -590,23 +602,37 @@ DOCUMENTATION :: END
 
         $('#transcode_decision-selection').on('change', function () {
             $('#transcode_decision-selection > label').removeClass('active');
-            var selected_filter = $('input[name=transcode_decision-filter]:checked', '#transcode_decision-selection');
+            let selected_filter = $('input[name=transcode_decision-filter]:checked', '#transcode_decision-selection');
             $(selected_filter).closest('label').addClass('active');
             transcode_decision = $(selected_filter).map(function () { return $(this).val(); }).get().join(',');
             setLocalStorage('library_' + section_id + 'history_transcode_decision', transcode_decision);
             history_table.draw();
         });
+
+        $('#network_type-selection').on('change', function () {
+            $('#network_type-selection > label').removeClass('active');
+            let selected_filter = $('input[name=network_type-filter]:checked', '#network_type-selection');
+            $(selected_filter).closest('label').addClass('active');
+            network_type = $(selected_filter).map(function () { return $(this).val(); }).get().join(',');
+            setLocalStorage('library_' + section_id + 'history_network_type', network_type);
+            history_table.draw();
+        });
     }
 
     $('#nav-tabs-history').on('shown.bs.tab', function() {
         if (typeof(history_table) === 'undefined') {
-            var transcode_decision = getLocalStorage('library_' + section_id + 'history_transcode_decision', 'all');
+            const transcode_decision = getLocalStorage('library_' + section_id + 'history_transcode_decision', 'all');
             $.each(transcode_decision.split(','), function (i, item) {
-                var history_transcode_decision = $('#history-transcode_decision-' + item.replace(' ', '_'));
+                let history_transcode_decision = $('#history-transcode_decision-' + item.replace(' ', '_'));
                 history_transcode_decision.prop('checked', true);
                 history_transcode_decision.closest('label').addClass('active');
             });
-
+            const network_type = getLocalStorage('library_' + section_id + 'history_network_type', 'all');
+            $.each(network_type.split(','), function (i, item) {
+                let history_network_type = $('#history-network_type-' + item);
+                history_network_type.prop('checked', true);
+                history_network_type.closest('label').addClass('active');
+            });
             loadHistoryTable(transcode_decision);
         }
     });

From 3511028df45e7045624f4ba23132966fa5bca3d1 Mon Sep 17 00:00:00 2001
From: herby2212 <12448284+herby2212@users.noreply.github.com>
Date: Sat, 7 Jan 2023 14:19:18 +0100
Subject: [PATCH 3/4] align settings

---
 data/interfaces/default/css/tautulli.css |  12 +++
 data/interfaces/default/history.html     | 118 ++++++++++++-----------
 2 files changed, 74 insertions(+), 56 deletions(-)

diff --git a/data/interfaces/default/css/tautulli.css b/data/interfaces/default/css/tautulli.css
index ac99ae76..340de4aa 100644
--- a/data/interfaces/default/css/tautulli.css
+++ b/data/interfaces/default/css/tautulli.css
@@ -2427,6 +2427,18 @@ a .library-user-instance-box:hover {
 .home-padded-header .button-bar {
     float: left;
 }
+#history-option-container {
+    float: right;
+    background-color: #333;
+    padding: 1rem;
+    border-radius: 0.6rem;
+}
+.history-option-bar {
+    margin: 0.2rem;
+}
+.history-option-button-group {
+    display: table-cell;
+}
 .home-platforms {
 }
 .home-platforms ul,
diff --git a/data/interfaces/default/history.html b/data/interfaces/default/history.html
index 7a3f9722..60f3e798 100644
--- a/data/interfaces/default/history.html
+++ b/data/interfaces/default/history.html
@@ -19,65 +19,71 @@
         <div class="header-bar">
             <span><i class="fa fa-history"></i> History</span>
         </div>
-        <div class="button-bar">
-            % if _session['user_group'] == 'admin':
-            <div class="alert alert-danger alert-edit" role="alert" id="row-edit-mode-alert"><i class="fa fa-exclamation-triangle"></i>&nbsp</div>
-            <div class="btn-group">
-                <button class="btn btn-danger btn-edit" data-toggle="button" aria-pressed="false" autocomplete="off" id="row-edit-mode">
-                    <i class="fa fa-trash-o"></i> Delete mode
-                </button>
+        <div id="history-option-container" class="container">
+            <div class="button-bar history-option-bar" style="float: left;">
+                % if _session['user_group'] == 'admin':
+                <div class="alert alert-danger alert-edit" role="alert" id="row-edit-mode-alert"><i class="fa fa-exclamation-triangle"></i>&nbsp</div>
+                <div class="btn-group">
+                    <button class="btn btn-danger btn-edit" data-toggle="button" aria-pressed="false" autocomplete="off" id="row-edit-mode">
+                        <i class="fa fa-trash-o"></i> Delete mode
+                    </button>
+                </div>
+                % endif
+                % if _session['user_group'] == 'admin':
+                <div class="btn-group" id="user-selection">
+                    <label>
+                        <select name="history-user" id="history-user" class="btn" style="color: inherit;">
+                            <option value="">All Users</option>
+                            <option disabled>&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;</option>
+                        </select>
+                    </label>
+                </div>
+                % endif
             </div>
-            % endif
-            % if _session['user_group'] == 'admin':
-            <div class="btn-group" id="user-selection">
-                <label>
-                    <select name="history-user" id="history-user" class="btn" style="color: inherit;">
-                        <option value="">All Users</option>
-                        <option disabled>&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;</option>
-                    </select>
-                </label>
+            <div class="button-bar history-option-bar">         
+                <div class="btn-group">
+                    <button class="btn btn-dark refresh-history-button" id="refresh-history-list"><i class="fa fa-refresh"></i> Refresh history</button>
+                </div>
+                <div class="btn-group colvis-button-bar"></div>
             </div>
-            % endif
-            <div class="btn-group" data-toggle="buttons" id="media_type-selection">
-                <label class="btn btn-dark btn-filter">
-                    <input type="checkbox" name="media_type-filter" id="history-media_type-movie" value="movie" autocomplete="off"><i class="fa fa-film"></i> Movies
-                </label>
-                <label class="btn btn-dark btn-filter">
-                    <input type="checkbox" name="media_type-filter" id="history-media_type-episode" value="episode" autocomplete="off"><i class="fa fa-television"></i> TV Shows
-                </label>
-                <label class="btn btn-dark btn-filter">
-                    <input type="checkbox" name="media_type-filter" id="history-media_type-track" value="track" autocomplete="off"><i class="fa fa-music"></i> Music
-                </label>
-                <label class="btn btn-dark btn-filter">
-                    <input type="checkbox" name="media_type-filter" id="history-media_type-live" value="live" autocomplete="off"><i class="fa fa-broadcast-tower"></i> Live TV
-                </label>
+            <div class="button-bar history-option-bar">
+                <div class="btn-group-justified history-option-button-group" data-toggle="buttons" id="media_type-selection" style="padding-right: 0.5rem;">
+                    <label class="btn btn-dark btn-filter">
+                        <input type="checkbox" name="media_type-filter" id="history-media_type-movie" value="movie" autocomplete="off"><i class="fa fa-film"></i> Movies
+                    </label>
+                    <label class="btn btn-dark btn-filter">
+                        <input type="checkbox" name="media_type-filter" id="history-media_type-episode" value="episode" autocomplete="off"><i class="fa fa-television"></i> TV Shows
+                    </label>
+                    <label class="btn btn-dark btn-filter">
+                        <input type="checkbox" name="media_type-filter" id="history-media_type-track" value="track" autocomplete="off"><i class="fa fa-music"></i> Music
+                    </label>
+                    <label class="btn btn-dark btn-filter">
+                        <input type="checkbox" name="media_type-filter" id="history-media_type-live" value="live" autocomplete="off"><i class="fa fa-broadcast-tower"></i> Live TV
+                    </label>
+                </div>
+                <div class="btn-group-justified history-option-button-group" data-toggle="buttons" id="network_type-selection" style="padding-right: 0.5rem;">
+                    <label class="btn btn-dark btn-filter">
+                        <input type="checkbox" name="network_type-filter" id="history-network_type-lan" value="lan" autocomplete="off"><i class="fa fa-server"></i> Local Play
+                    </label>
+                    <label class="btn btn-dark btn-filter">
+                        <input type="checkbox" name="network_type-filter" id="history-network_type-wan" value="wan" autocomplete="off"><i class="fa fa-globe"></i> Remote Play
+                    </label>
+                    <label class="btn btn-dark btn-filter">
+                        <input type="checkbox" name="network_type-filter" id="history-network_type-cellular" value="cellular" autocomplete="off"><i class="fa fa-broadcast-tower"></i> Mobile Play
+                    </label>
+                </div>
+                <div class="btn-group-justified history-option-button-group" data-toggle="buttons" id="transcode_decision-selection">
+                    <label class="btn btn-dark btn-filter">
+                        <input type="checkbox" name="transcode_decision-filter" id="history-transcode_decision-direct_play" value="direct play" autocomplete="off"><i class="fa fa-play-circle"></i> Direct Play
+                    </label>
+                    <label class="btn btn-dark btn-filter">
+                        <input type="checkbox" name="transcode_decision-filter" id="history-transcode_decision-copy" value="copy" autocomplete="off"><i class="fa fa-stream"></i> Direct Stream
+                    </label>
+                    <label class="btn btn-dark btn-filter">
+                        <input type="checkbox" name="transcode_decision-filter" id="history-transcode_decision-transcode" value="transcode" autocomplete="off"><i class="fa fa-server"></i> Transcode
+                    </label>
+                </div>  
             </div>
-            <div class="btn-group" data-toggle="buttons" id="network_type-selection">
-                <label class="btn btn-dark btn-filter">
-                    <input type="checkbox" name="network_type-filter" id="history-network_type-lan" value="lan" autocomplete="off"><i class="fa fa-server"></i> Local Play
-                </label>
-                <label class="btn btn-dark btn-filter">
-                    <input type="checkbox" name="network_type-filter" id="history-network_type-wan" value="wan" autocomplete="off"><i class="fa fa-globe"></i> Remote Play
-                </label>
-                <label class="btn btn-dark btn-filter">
-                    <input type="checkbox" name="network_type-filter" id="history-network_type-cellular" value="cellular" autocomplete="off"><i class="fa fa-broadcast-tower"></i> Mobile Play
-                </label>
-            </div>
-            <div class="btn-group" data-toggle="buttons" id="transcode_decision-selection">
-                <label class="btn btn-dark btn-filter">
-                    <input type="checkbox" name="transcode_decision-filter" id="history-transcode_decision-direct_play" value="direct play" autocomplete="off"><i class="fa fa-play-circle"></i> Direct Play
-                </label>
-                <label class="btn btn-dark btn-filter">
-                    <input type="checkbox" name="transcode_decision-filter" id="history-transcode_decision-copy" value="copy" autocomplete="off"><i class="fa fa-stream"></i> Direct Stream
-                </label>
-                <label class="btn btn-dark btn-filter">
-                    <input type="checkbox" name="transcode_decision-filter" id="history-transcode_decision-transcode" value="transcode" autocomplete="off"><i class="fa fa-server"></i> Transcode
-                </label>
-            </div>
-            <div class="btn-group">
-                <button class="btn btn-dark refresh-history-button" id="refresh-history-list"><i class="fa fa-refresh"></i> Refresh history</button>
-            </div>
-            <div class="btn-group colvis-button-bar"></div>
         </div>
     </div>
     <div class="table-card-back">

From 08dc6a1391ab199cc5486f87ed521f330b77c015 Mon Sep 17 00:00:00 2001
From: herby2212 <12448284+herby2212@users.noreply.github.com>
Date: Sat, 7 Jan 2023 14:35:18 +0100
Subject: [PATCH 4/4] fix load issue for library history + user history

---
 data/interfaces/default/history.html |   2 +-
 data/interfaces/default/library.html |   4 +-
 data/interfaces/default/user.html    | 120 +++++++++++++++++----------
 3 files changed, 80 insertions(+), 46 deletions(-)

diff --git a/data/interfaces/default/history.html b/data/interfaces/default/history.html
index 60f3e798..c31dd9f9 100644
--- a/data/interfaces/default/history.html
+++ b/data/interfaces/default/history.html
@@ -16,7 +16,7 @@
     </div>
     % endif
     <div class='table-card-header'>
-        <div class="header-bar">
+        <div class="header-bar" style="margin-top: 2.4rem;">
             <span><i class="fa fa-history"></i> History</span>
         </div>
         <div id="history-option-container" class="container">
diff --git a/data/interfaces/default/library.html b/data/interfaces/default/library.html
index 87e91676..d1a56012 100644
--- a/data/interfaces/default/library.html
+++ b/data/interfaces/default/library.html
@@ -627,13 +627,13 @@ DOCUMENTATION :: END
                 history_transcode_decision.prop('checked', true);
                 history_transcode_decision.closest('label').addClass('active');
             });
-            const network_type = getLocalStorage('library_' + section_id + 'history_network_type', 'all');
+            const network_type = getLocalStorage('library_' + section_id + 'history_network_type', '');
             $.each(network_type.split(','), function (i, item) {
                 let history_network_type = $('#history-network_type-' + item);
                 history_network_type.prop('checked', true);
                 history_network_type.closest('label').addClass('active');
             });
-            loadHistoryTable(transcode_decision);
+            loadHistoryTable(network_type, transcode_decision);
         }
     });
 
diff --git a/data/interfaces/default/user.html b/data/interfaces/default/user.html
index 501c68ca..c214ec3f 100644
--- a/data/interfaces/default/user.html
+++ b/data/interfaces/default/user.html
@@ -151,50 +151,67 @@ DOCUMENTATION :: END
                             <div class="row">
                                 <div class="col-md-12">
                                     <div class='table-card-header'>
-                                        <div class="header-bar">
+                                        <div class="header-bar" style="margin-top: 2.4rem;">
                                             <span>
                                                 <i class="fa fa-history"></i> History for <strong>
                                                     <span class="set-username">${data['friendly_name']}</span>
                                                 </strong>
                                             </span>
                                         </div>
-                                        <div class="button-bar">
-                                            % if _session['user_group'] == 'admin':
-                                            <div class="btn-group">
-                                                <button class="btn btn-danger btn-edit" data-toggle="button" aria-pressed="false" autocomplete="off" id="row-edit-mode">
-                                                    <i class="fa fa-trash-o"></i> Delete mode
-                                                </button>
+                                        <div id="history-option-container" class="container">
+                                            <div class="button-bar history-option-bar" style="float: left;">
+                                                % if _session['user_group'] == 'admin':
+                                                <div class="btn-group">
+                                                    <button class="btn btn-danger btn-edit" data-toggle="button" aria-pressed="false" autocomplete="off" id="row-edit-mode">
+                                                        <i class="fa fa-trash-o"></i> Delete mode
+                                                    </button>
+                                                </div>
+                                                % endif
                                             </div>
-                                            % endif
-                                            <div class="btn-group" data-toggle="buttons" id="media_type-selection">
-                                                <label class="btn btn-dark btn-filter">
-                                                    <input type="checkbox" name="media_type-filter" id="history-media_type-movie" value="movie" autocomplete="off"><i class="fa fa-film"></i> Movies
-                                                </label>
-                                                <label class="btn btn-dark btn-filter">
-                                                    <input type="checkbox" name="media_type-filter" id="history-media_type-episode" value="episode" autocomplete="off"><i class="fa fa-television"></i> TV Shows
-                                                </label>
-                                                <label class="btn btn-dark btn-filter">
-                                                    <input type="checkbox" name="media_type-filter" id="history-media_type-track" value="track" autocomplete="off"><i class="fa fa-music"></i> Music
-                                                </label>
-                                                <label class="btn btn-dark btn-filter">
-                                                    <input type="checkbox" name="media_type-filter" id="history-media_type-live" value="live" autocomplete="off"><i class="fa fa-broadcast-tower"></i> Live TV
-                                                </label>
+                                            <div class="button-bar history-option-bar">         
+                                                <div class="btn-group">
+                                                    <button class="btn btn-dark refresh-history-button" id="refresh-history-list"><i class="fa fa-refresh"></i> Refresh history</button>
+                                                </div>
+                                                <div class="btn-group colvis-button-bar"></div>
                                             </div>
-                                            <div class="btn-group" data-toggle="buttons" id="transcode_decision-selection">
-                                                <label class="btn btn-dark btn-filter">
-                                                    <input type="checkbox" name="transcode_decision-filter" id="history-transcode_decision-direct_play" value="direct play" autocomplete="off"><i class="fa fa-play-circle"></i> Direct Play
-                                                </label>
-                                                <label class="btn btn-dark btn-filter">
-                                                    <input type="checkbox" name="transcode_decision-filter" id="history-transcode_decision-direct_stream" value="copy" autocomplete="off"><i class="fa fa-stream"></i> Direct Stream
-                                                </label>
-                                                <label class="btn btn-dark btn-filter">
-                                                    <input type="checkbox" name="transcode_decision-filter" id="history-transcode_decision-transcode" value="transcode" autocomplete="off"><i class="fa fa-server"></i> Transcode
-                                                </label>
+                                            <div class="button-bar history-option-bar">
+                                                <div class="btn-group-justified history-option-button-group" data-toggle="buttons" id="media_type-selection" style="padding-right: 0.5rem;">
+                                                    <label class="btn btn-dark btn-filter">
+                                                        <input type="checkbox" name="media_type-filter" id="history-media_type-movie" value="movie" autocomplete="off"><i class="fa fa-film"></i> Movies
+                                                    </label>
+                                                    <label class="btn btn-dark btn-filter">
+                                                        <input type="checkbox" name="media_type-filter" id="history-media_type-episode" value="episode" autocomplete="off"><i class="fa fa-television"></i> TV Shows
+                                                    </label>
+                                                    <label class="btn btn-dark btn-filter">
+                                                        <input type="checkbox" name="media_type-filter" id="history-media_type-track" value="track" autocomplete="off"><i class="fa fa-music"></i> Music
+                                                    </label>
+                                                    <label class="btn btn-dark btn-filter">
+                                                        <input type="checkbox" name="media_type-filter" id="history-media_type-live" value="live" autocomplete="off"><i class="fa fa-broadcast-tower"></i> Live TV
+                                                    </label>
+                                                </div>
+                                                <div class="btn-group-justified history-option-button-group" data-toggle="buttons" id="network_type-selection" style="padding-right: 0.5rem;">
+                                                    <label class="btn btn-dark btn-filter">
+                                                        <input type="checkbox" name="network_type-filter" id="history-network_type-lan" value="lan" autocomplete="off"><i class="fa fa-server"></i> Local Play
+                                                    </label>
+                                                    <label class="btn btn-dark btn-filter">
+                                                        <input type="checkbox" name="network_type-filter" id="history-network_type-wan" value="wan" autocomplete="off"><i class="fa fa-globe"></i> Remote Play
+                                                    </label>
+                                                    <label class="btn btn-dark btn-filter">
+                                                        <input type="checkbox" name="network_type-filter" id="history-network_type-cellular" value="cellular" autocomplete="off"><i class="fa fa-broadcast-tower"></i> Mobile Play
+                                                    </label>
+                                                </div>
+                                                <div class="btn-group-justified history-option-button-group" data-toggle="buttons" id="transcode_decision-selection">
+                                                    <label class="btn btn-dark btn-filter">
+                                                        <input type="checkbox" name="transcode_decision-filter" id="history-transcode_decision-direct_play" value="direct play" autocomplete="off"><i class="fa fa-play-circle"></i> Direct Play
+                                                    </label>
+                                                    <label class="btn btn-dark btn-filter">
+                                                        <input type="checkbox" name="transcode_decision-filter" id="history-transcode_decision-copy" value="copy" autocomplete="off"><i class="fa fa-stream"></i> Direct Stream
+                                                    </label>
+                                                    <label class="btn btn-dark btn-filter">
+                                                        <input type="checkbox" name="transcode_decision-filter" id="history-transcode_decision-transcode" value="transcode" autocomplete="off"><i class="fa fa-server"></i> Transcode
+                                                    </label>
+                                                </div>  
                                             </div>
-                                            <div class="btn-group">
-                                                <button class="btn btn-dark refresh-history-button" id="refresh-history-list"><i class="fa fa-refresh"></i> Refresh history</button>
-                                            </div>
-                                            <div class="btn-group colvis-button-bar" id="button-bar-history"></div>
                                         </div>
                                     </div>
                                     <div class="table-card-back">
@@ -532,7 +549,7 @@ DOCUMENTATION :: END
 
     $(".inactive-user-tooltip").tooltip();
 
-    function loadHistoryTable(media_type, transcode_decision) {
+    function loadHistoryTable(media_type, network_type, transcode_decision) {
         // Build watch history table
         history_table_options.ajax = {
             url: 'get_history',
@@ -542,6 +559,7 @@ DOCUMENTATION :: END
                     json_data: JSON.stringify( d ),
                     user_id: user_id,
                     media_type: media_type,
+                    network_type: network_type,
                     transcode_decision: transcode_decision
                 };
             }
@@ -556,16 +574,25 @@ DOCUMENTATION :: END
 
         $('#media_type-selection').on('change', function () {
             $('#media_type-selection > label').removeClass('active');
-            var selected_filter = $('input[name=media_type-filter]:checked', '#media_type-selection');
+            let selected_filter = $('input[name=media_type-filter]:checked', '#media_type-selection');
             $(selected_filter).closest('label').addClass('active');
             media_type = $(selected_filter).map(function () { return $(this).val(); }).get().join(',');
             setLocalStorage('user_' + user_id + '-history_media_type', media_type);
             history_table.draw();
         });
 
+        $('#network_type-selection').on('change', function () {
+            $('#network_type-selection > label').removeClass('active');
+            let selected_filter = $('input[name=network_type-filter]:checked', '#network_type-selection');
+            $(selected_filter).closest('label').addClass('active');
+            network_type = $(selected_filter).map(function () { return $(this).val(); }).get().join(',');
+            setLocalStorage('user_' + user_id + 'history_network_type', network_type);
+            history_table.draw();
+        });
+
         $('#transcode_decision-selection').on('change', function () {
             $('#transcode_decision-selection > label').removeClass('active');
-            var selected_filter = $('input[name=transcode_decision-filter]:checked', '#transcode_decision-selection');
+            let selected_filter = $('input[name=transcode_decision-filter]:checked', '#transcode_decision-selection');
             $(selected_filter).closest('label').addClass('active');
             transcode_decision = $(selected_filter).map(function () { return $(this).val(); }).get().join(',');
             setLocalStorage('user_' + user_id + 'history_transcode_decision', transcode_decision);
@@ -575,21 +602,28 @@ DOCUMENTATION :: END
 
     $('#nav-tabs-history').on('shown.bs.tab', function() {
         if (typeof(history_table) === 'undefined') {
-            var media_type = getLocalStorage('user_' + user_id + '-history_media_type', 'all');
+            const media_type = getLocalStorage('user_' + user_id + '-history_media_type', 'all');
             $.each(media_type.split(','), function (i, item) {
-                var history_media_type = $('#history-media_type-' + item);
+                let history_media_type = $('#history-media_type-' + item);
                 history_media_type.prop('checked', true);
                 history_media_type.closest('label').addClass('active');
             });
 
-            var transcode_decision = getLocalStorage('user_' + user_id + 'history_transcode_decision', 'all');
+            const network_type = getLocalStorage('user_' + user_id + 'history_network_type', '');
+            $.each(network_type.split(','), function (i, item) {
+                let history_network_type = $('#history-network_type-' + item);
+                history_network_type.prop('checked', true);
+                history_network_type.closest('label').addClass('active');
+            });
+
+            const transcode_decision = getLocalStorage('user_' + user_id + 'history_transcode_decision', 'all');
             $.each(transcode_decision.split(','), function (i, item) {
-                var history_transcode_decision = $('#history-transcode_decision-' + item.replace(' ', '_'));
+                let history_transcode_decision = $('#history-transcode_decision-' + item.replace(' ', '_'));
                 history_transcode_decision.prop('checked', true);
                 history_transcode_decision.closest('label').addClass('active');
             });
 
-            loadHistoryTable(media_type, transcode_decision);
+            loadHistoryTable(media_type, network_type, transcode_decision);
         }
     });