feat: Tautulli integration (#2230)

* feat: media/user watch history data via Tautulli

* fix(frontend): only display slideover cog button if there is media to manage

* fix(lang): tweak permission denied messages

* refactor: reorder Media section in slideover

* refactor: use new Tautulli stats API

* fix(frontend): do not attempt to fetch data when user lacks req perms

* fix: remove unneccessary get_user requests

* feat(frontend): display user avatars

* feat: add external URL setting

* feat: add play counts for past week/month

* fix(lang): tweak strings

Co-authored-by: Ryan Cohen <ryan@sct.dev>

src/components/IssueBlock/index.tsx

@@ -8,7 +8,7 @@ import Link from 'next/link';
 import React from 'react';
 import { useIntl } from 'react-intl';
 import type Issue from '../../../server/entity/Issue';
-import globalMessages from '../../i18n/globalMessages';
+import { useUser } from '../../hooks/useUser';
 import Button from '../Common/Button';
 import { issueOptions } from '../IssueModal/constants';
 
@@ -17,6 +17,7 @@ interface IssueBlockProps {
 }
 
 const IssueBlock: React.FC<IssueBlockProps> = ({ issue }) => {
+  const { user } = useUser();
   const intl = useIntl();
   const issueOption = issueOptions.find(
     (opt) => opt.issueType === issue.issueType
@@ -27,7 +28,7 @@ const IssueBlock: React.FC<IssueBlockProps> = ({ issue }) => {
   }
 
   return (
-    <div className="px-4 py-4 text-gray-300">
+    <div className="px-4 py-3 text-gray-300">
       <div className="flex items-center justify-between">
         <div className="flex-col items-center flex-1 min-w-0 mr-6 text-sm leading-5">
           <div className="flex flex-nowrap">
@@ -39,7 +40,17 @@ const IssueBlock: React.FC<IssueBlockProps> = ({ issue }) => {
           <div className="flex mb-1 flex-nowrap white">
             <UserIcon className="min-w-0 flex-shrink-0 mr-1.5 h-5 w-5" />
             <span className="w-40 truncate md:w-auto">
-              {issue.createdBy.displayName}
+              <Link
+                href={
+                  issue.createdBy.id === user?.id
+                    ? '/profile'
+                    : `/users/${issue.createdBy.id}`
+                }
+              >
+                <a className="font-semibold text-gray-100 transition duration-300 hover:text-white hover:underline">
+                  {issue.createdBy.displayName}
+                </a>
+              </Link>
             </span>
           </div>
           <div className="flex mb-1 flex-nowrap white">
@@ -55,9 +66,8 @@ const IssueBlock: React.FC<IssueBlockProps> = ({ issue }) => {
         </div>
         <div className="flex flex-wrap flex-shrink-0 ml-2">
           <Link href={`/issues/${issue.id}`} passHref>
-            <Button buttonType="primary" buttonSize="sm" as="a">
+            <Button buttonType="primary" as="a">
               <EyeIcon />
-              <span>{intl.formatMessage(globalMessages.view)}</span>
             </Button>
           </Link>
         </div>