Added tooltips on hover for history and blacklist pretty date

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)

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;

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",

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",

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",

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",

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