Add support page

data/interfaces/default/base.html

@@ -134,7 +134,7 @@
                             <li role="separator" class="divider"></li>
                             <li><a href="logs"><i class="fa fa-fw fa-list-alt"></i> View Logs</a></li>
                             <li><a href="${anon_url('https://github.com/%s/%s-Wiki/wiki/Frequently-Asked-Questions' % (plexpy.CONFIG.GIT_USER, plexpy.CONFIG.GIT_REPO))}" target="_blank"><i class="fa fa-fw fa-question-circle"></i> FAQ</a></li>
-                            <li><a href="settings?support=true"><i class="fa fa-fw fa-comment"></i> Support</a></li>
+                            <li><a href="support"><i class="fa fa-fw fa-comment"></i> Support</a></li>
                             <li role="separator" class="divider"></li>
                             <li><a href="#" data-target="#donate-modal" data-toggle="modal"><i class="fa fa-fw fa-heart"></i> Donate</a></li>
                             <li role="separator" class="divider"></li>

data/interfaces/default/css/tautulli.css

@@ -4096,3 +4096,59 @@ a[data-tab-destination] {
 .pointer {
     cursor: pointer;
 }
+
+.iframe-container {
+    width: 100%;
+    height: calc(100vh - 200px);
+    position: relative;
+}
+.iframe-overlay {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: url(../images/discord-overlay.png) no-repeat;
+    background-size: cover;
+    border: 1px solid #36393e;
+}
+.iframe-button-container {
+    margin: 0;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+.iframe-button {
+    color: #fff;
+    border-radius: 20px;
+    text-align: center;
+    cursor: pointer;
+    font-size: 15px;
+    height: 28px;
+    line-height: 28px;
+    min-width: 210px;
+    transition: box-shadow 0.3s ease;
+    padding: 0 15px;
+    background: rgba(114, 137, 218, 0.4);
+    text-transform: uppercase;
+    text-decoration: none;
+    display: block;
+}
+.iframe-button:hover,
+.iframe-button:focus {
+    color: #fff;
+    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px 99999px inset, rgba(0, 0, 0, 0.2) 0px 1px 5px 0px, rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 3px 1px -2px;
+}
+.iframe-button:active {
+    box-shadow: rgba(255, 255, 255, 0.1) 0px 0px 0px 99999px inset, rgba(0, 0, 0, 0.2) 0px 5px 5px -3px, rgba(0, 0, 0, 0.14) 0px 8px 10px 1px, rgba(0, 0, 0, 0.12) 0px 3px 14px 2px;
+}
+.iframe {
+    width: 100%;
+    height: 100%;
+    position: inherit;
+    display: block;
+    border: 0;
+}

data/interfaces/default/settings.html

@@ -1763,9 +1763,6 @@
                 } else if ("${kwargs.get('reinstall_geoip')}" == 'true') {
                     $('#reinstall_geoip_db').removeClass('no-highlight').css('color','#e9a049');
                 }
-                if ("${kwargs.get('support')}" == 'true') {
-                    $('.support-modal-link').removeClass('no-highlight').css('color','#e9a049');
-                }
             }
         });
     }

data/interfaces/default/support.html

@@ -0,0 +1,60 @@
+<%inherit file="base.html"/>
+
+<%def name="headIncludes()">
+</%def>
+
+<%def name="headerIncludes()">
+</%def>
+
+<%def name="body()">
+<div class='container-fluid'>
+    <div class='table-card-header'>
+        <div class="header-bar">
+            <span><i class="fa fa-comment"></i> Support</span>
+        </div>
+        <div class="button-bar">
+            <div class="btn-group">
+                <button class="btn btn-dark" id="popout-iframe-button"><i class="fa fa-external-link"></i> Pop Out Chat</button>
+            </div>
+        </div>
+    </div>
+    <div class='table-card-back'>
+        <div class="iframe-container">
+            <iframe class="iframe" allowfullscreen="true" id="support-iframe" data-name="Tautulli-Support" data-src="https://tautulli.com/support"
+                    sandbox="allow-presentation allow-forms allow-same-origin allow-pointer-lock allow-scripts allow-popups allow-modals allow-top-navigation"
+                    style="display: none;">
+            </iframe>
+            <div class="iframe-overlay">
+                <div class="iframe-button-container">
+                    <a class="iframe-button">Join the Discord Chat</a>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+</%def>
+
+<%def name="modalIncludes()">
+</%def>
+
+<%def name="javascriptIncludes()">
+<script>
+    var popout_chat;
+    $('.iframe-button').click(function () {
+        if (popout_chat) {
+            popout_chat.close();
+        }
+
+        var iframe = $('#support-iframe');
+        iframe.attr('src', iframe.data('src')).fadeIn();
+        $('.iframe-overlay').fadeOut();
+    });
+
+    $('#popout-iframe-button').click(function () {
+        var iframe = $('#support-iframe');
+        popout_chat = window.open(iframe.attr('src'), 'Tautulli-Discord-Support', 'width=1280,height=720');
+        iframe.attr('src', '').fadeOut();
+        $('.iframe-overlay').fadeIn();
+    });
+</script>
+</%def>

plexpy/webserve.py

@@ -5845,3 +5845,8 @@ class WebInterface(object):
 
         logger.error(u"Failed to retrieve newsletter: Missing newsletter_id parameter.")
         return "Failed to retrieve newsletter: missing newsletter_id parameter"
+
+    @cherrypy.expose
+    @requireAuth()
+    def support(self, query='', **kwargs):
+        return serve_template(templatename="support.html", title="Support")