Added tooltips on hover for history and blacklist pretty date

7 files changed, 95 insertions, 9 deletions

diff --git a/bazarr/api.py b/bazarr/api.py
index 9eb3b8630..4cd3b0035 100644
--- a/bazarr/api.py
+++ b/bazarr/api.py
@@ -1295,7 +1295,8 @@ class EpisodesHistory(Resource):
 
             # Make timestamp pretty
             if item['timestamp']:
-                item["raw_timestamp"] = int(item['timestamp']);
+                item["raw_timestamp"] = int(item['timestamp'])
+                item["parsed_timestamp"] = datetime.datetime.fromtimestamp(int(item['timestamp'])).strftime('%x %X')
                 item['timestamp'] = pretty.date(item["raw_timestamp"])
 
             # Check if subtitles is blacklisted
@@ -1383,7 +1384,8 @@ class MoviesHistory(Resource):
 
             # Make timestamp pretty
             if item['timestamp']:
-                item["raw_timestamp"] = int(item['timestamp']);
+                item["raw_timestamp"] = int(item['timestamp'])
+                item["parsed_timestamp"] = datetime.datetime.fromtimestamp(int(item['timestamp'])).strftime('%x %X')
                 item['timestamp'] = pretty.date(item["raw_timestamp"])
 
             # Check if subtitles is blacklisted
@@ -1521,6 +1523,7 @@ class EpisodesBlacklist(Resource):
 
         for item in data:
             # Make timestamp pretty
+            item["parsed_timestamp"] = datetime.datetime.fromtimestamp(int(item['timestamp'])).strftime('%x %X')
             item.update({'timestamp': pretty.date(datetime.datetime.fromtimestamp(item['timestamp']))})
 
             postprocessEpisode(item)
@@ -1589,6 +1592,7 @@ class MoviesBlacklist(Resource):
             postprocessMovie(item)
 
             # Make timestamp pretty
+            item["parsed_timestamp"] = datetime.datetime.fromtimestamp(int(item['timestamp'])).strftime('%x %X')
             item.update({'timestamp': pretty.date(datetime.datetime.fromtimestamp(item['timestamp']))})
 
         return jsonify(data=data)
diff --git a/frontend/src/@types/api.d.ts b/frontend/src/@types/api.d.ts
index dde7b47a2..21dbc332f 100644
--- a/frontend/src/@types/api.d.ts
+++ b/frontend/src/@types/api.d.ts
@@ -171,6 +171,7 @@ namespace Wanted {
 
 namespace Blacklist {
   type Base = ItemHistoryType & {
+    parsed_timestamp: string;
     timestamp: string;
     subs_id: string;
   };
@@ -194,6 +195,7 @@ namespace History {
       score?: string;
       subs_id?: string;
       raw_timestamp: int;
+      parsed_timestamp: string;
       timestamp: string;
       description: string;
       upgradable: boolean;
diff --git a/frontend/src/Blacklist/Movies/table.tsx b/frontend/src/Blacklist/Movies/table.tsx
index 53aadb941..b2b8dbaf0 100644
--- a/frontend/src/Blacklist/Movies/table.tsx
+++ b/frontend/src/Blacklist/Movies/table.tsx
@@ -4,7 +4,12 @@ import React, { FunctionComponent, useMemo } from "react";
 import { Link } from "react-router-dom";
 import { Column } from "react-table";
 import { MoviesApi } from "../../apis";
-import { AsyncButton, LanguageText, PageTable } from "../../components";
+import {
+  AsyncButton,
+  LanguageText,
+  PageTable,
+  TextPopover,
+} from "../../components";
 
 interface Props {
   blacklist: readonly Blacklist.Movie[];
@@ -45,6 +50,17 @@ const Table: FunctionComponent<Props> = ({ blacklist, update }) => {
       {
         Header: "Date",
         accessor: "timestamp",
+        Cell: (row) => {
+          if (row.value) {
+            return (
+              <TextPopover text={row.row.original.parsed_timestamp} delay={1}>
+                <span>{row.value}</span>
+              </TextPopover>
+            );
+          } else {
+            return null;
+          }
+        },
       },
       {
         accessor: "subs_id",
diff --git a/frontend/src/Blacklist/Series/table.tsx b/frontend/src/Blacklist/Series/table.tsx
index 954a1600c..4cbd2bee5 100644
--- a/frontend/src/Blacklist/Series/table.tsx
+++ b/frontend/src/Blacklist/Series/table.tsx
@@ -4,7 +4,12 @@ import React, { FunctionComponent, useMemo } from "react";
 import { Link } from "react-router-dom";
 import { Column } from "react-table";
 import { EpisodesApi } from "../../apis";
-import { AsyncButton, LanguageText, PageTable } from "../../components";
+import {
+  AsyncButton,
+  LanguageText,
+  PageTable,
+  TextPopover,
+} from "../../components";
 
 interface Props {
   blacklist: readonly Blacklist.Episode[];
@@ -52,6 +57,17 @@ const Table: FunctionComponent<Props> = ({ blacklist, update }) => {
       {
         Header: "Date",
         accessor: "timestamp",
+        Cell: (row) => {
+          if (row.value) {
+            return (
+              <TextPopover text={row.row.original.parsed_timestamp} delay={1}>
+                <span>{row.value}</span>
+              </TextPopover>
+            );
+          } else {
+            return null;
+          }
+        },
       },
       {
         accessor: "subs_id",
diff --git a/frontend/src/History/Movies/index.tsx b/frontend/src/History/Movies/index.tsx
index cea0906dd..c3e26ba13 100644
--- a/frontend/src/History/Movies/index.tsx
+++ b/frontend/src/History/Movies/index.tsx
@@ -6,7 +6,7 @@ import { Link } from "react-router-dom";
 import { Column, Row } from "react-table";
 import { useMoviesHistory } from "../../@redux/hooks";
 import { MoviesApi } from "../../apis";
-import { HistoryIcon, LanguageText } from "../../components";
+import { HistoryIcon, LanguageText, TextPopover } from "../../components";
 import { BlacklistButton } from "../../generic/blacklist";
 import { useAutoUpdate } from "../../utilites/hooks";
 import HistoryGenericView from "../generic";
@@ -64,7 +64,17 @@ const MoviesHistoryView: FunctionComponent<Props> = () => {
       {
         Header: "Date",
         accessor: "timestamp",
-        className: "text-nowrap",
+        Cell: (row) => {
+          if (row.value) {
+            return (
+              <TextPopover text={row.row.original.parsed_timestamp} delay={1}>
+                <span>{row.value}</span>
+              </TextPopover>
+            );
+          } else {
+            return null;
+          }
+        },
       },
       {
         accessor: "description",
diff --git a/frontend/src/History/Series/index.tsx b/frontend/src/History/Series/index.tsx
index 68d2a6a70..8f128304b 100644
--- a/frontend/src/History/Series/index.tsx
+++ b/frontend/src/History/Series/index.tsx
@@ -6,7 +6,7 @@ import { Link } from "react-router-dom";
 import { Column, Row } from "react-table";
 import { useSeriesHistory } from "../../@redux/hooks";
 import { EpisodesApi } from "../../apis";
-import { HistoryIcon, LanguageText } from "../../components";
+import { HistoryIcon, LanguageText, TextPopover } from "../../components";
 import { BlacklistButton } from "../../generic/blacklist";
 import { useAutoUpdate } from "../../utilites/hooks";
 import HistoryGenericView from "../generic";
@@ -71,7 +71,17 @@ const SeriesHistoryView: FunctionComponent<Props> = () => {
       {
         Header: "Date",
         accessor: "timestamp",
-        className: "text-nowrap",
+        Cell: (row) => {
+          if (row.value) {
+            return (
+              <TextPopover text={row.row.original.parsed_timestamp} delay={1}>
+                <span>{row.value}</span>
+              </TextPopover>
+            );
+          } else {
+            return null;
+          }
+        },
       },
       {
         accessor: "description",
diff --git a/frontend/src/components/modals/HistoryModal.tsx b/frontend/src/components/modals/HistoryModal.tsx
index 68e6cad56..6ffa3d8ff 100644
--- a/frontend/src/components/modals/HistoryModal.tsx
+++ b/frontend/src/components/modals/HistoryModal.tsx
@@ -6,7 +6,13 @@ import React, {
   useState,
 } from "react";
 import { Column } from "react-table";
-import { AsyncStateOverlay, HistoryIcon, LanguageText, PageTable } from "..";
+import {
+  AsyncStateOverlay,
+  HistoryIcon,
+  LanguageText,
+  PageTable,
+  TextPopover,
+} from "..";
 import { EpisodesApi, MoviesApi } from "../../apis";
 import { BlacklistButton } from "../../generic/blacklist";
 import { updateAsyncState } from "../../utilites";
@@ -64,6 +70,17 @@ export const MovieHistoryModal: FunctionComponent<BaseModalProps> = (props) => {
       {
         Header: "Date",
         accessor: "timestamp",
+        Cell: (row) => {
+          if (row.value) {
+            return (
+              <TextPopover text={row.row.original.parsed_timestamp} delay={1}>
+                <span>{row.value}</span>
+              </TextPopover>
+            );
+          } else {
+            return null;
+          }
+        },
       },
       {
         // Actions
@@ -155,6 +172,17 @@ export const EpisodeHistoryModal: FunctionComponent<
       {
         Header: "Date",
         accessor: "timestamp",
+        Cell: (row) => {
+          if (row.value) {
+            return (
+              <TextPopover text={row.row.original.parsed_timestamp} delay={1}>
+                <span>{row.value}</span>
+              </TextPopover>
+            );
+          } else {
+            return null;
+          }
+        },
       },
       {
         // Actions