first commit

resources/client/admin/reports/pages/episode-insights-page.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import {PageStatus} from '@common/http/page-status';
+import {
+  ModelInsightsPageLayout,
+  ModelInsightsPageTitle,
+} from '@app/admin/reports/model-insights-page-layout';
+import {TitleLinkWithEpisodeNumber} from '@app/titles/title-link';
+import {InsightsReportRow} from '@app/admin/reports/insights/insights-report-row';
+import {InsightsPlaysChart} from '@app/admin/reports/insights/insights-plays-chart';
+import {InsightsDevicesChart} from '@app/admin/reports/insights/insights-devices-chart';
+import {InsightsLocationsChart} from '@app/admin/reports/insights/insights-locations-chart';
+import {InsightsPlatformsChart} from '@app/admin/reports/insights/insights-platforms-chart';
+import {useEpisode} from '@app/episodes/requests/use-episode';
+import {EpisodePoster} from '@app/episodes/episode-poster/episode-poster';
+import {EpisodeLink} from '@app/episodes/episode-link';
+
+export function EpisodeInsightsPage() {
+  const query = useEpisode('episode');
+
+  return query.data ? (
+    <ModelInsightsPageLayout
+      reportModel={`episode=${query.data.episode.id}`}
+      name={query.data.episode.name}
+      backLink="../../../../"
+      title={
+        <ModelInsightsPageTitle
+          image={
+            <EpisodePoster
+              episode={query.data.episode}
+              title={query.data.title}
+              srcSize="sm"
+            />
+          }
+          name={
+            <EpisodeLink
+              episode={query.data.episode}
+              title={query.data.title}
+              seasonNumber={query.data.episode.season_number}
+            />
+          }
+          description={
+            <TitleLinkWithEpisodeNumber
+              episode={query.data.episode}
+              title={query.data.title}
+            />
+          }
+        />
+      }
+    >
+      <InsightsReportRow>
+        <InsightsPlaysChart />
+        <InsightsDevicesChart />
+      </InsightsReportRow>
+      <InsightsReportRow>
+        <InsightsLocationsChart />
+        <InsightsPlatformsChart />
+      </InsightsReportRow>
+    </ModelInsightsPageLayout>
+  ) : (
+    <PageStatus query={query} loaderClassName="absolute inset-0 m-auto" />
+  );
+}

resources/client/admin/reports/pages/season-insights-page.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import {PageStatus} from '@common/http/page-status';
+import {
+  ModelInsightsPageLayout,
+  ModelInsightsPageTitle,
+} from '@app/admin/reports/model-insights-page-layout';
+import {TitleLink} from '@app/titles/title-link';
+import {InsightsReportRow} from '@app/admin/reports/insights/insights-report-row';
+import {InsightsPlaysChart} from '@app/admin/reports/insights/insights-plays-chart';
+import {InsightsDevicesChart} from '@app/admin/reports/insights/insights-devices-chart';
+import {InsightsLocationsChart} from '@app/admin/reports/insights/insights-locations-chart';
+import {InsightsPlatformsChart} from '@app/admin/reports/insights/insights-platforms-chart';
+import {useSeason} from '@app/seasons/requests/use-season';
+import {SeasonPoster} from '@app/seasons/season-poster';
+import {SeasonLink} from '@app/seasons/season-link';
+
+export function SeasonInsightsPage() {
+  const query = useSeason('season');
+
+  return query.data ? (
+    <ModelInsightsPageLayout
+      reportModel={`season=${query.data.season.id}`}
+      name={`Season ${query.data.season.number}`}
+      title={
+        <ModelInsightsPageTitle
+          image={
+            <SeasonPoster
+              season={query.data.season}
+              title={query.data.title}
+              srcSize="sm"
+            />
+          }
+          name={
+            <SeasonLink
+              seasonNumber={query.data.season.number}
+              title={query.data.title}
+            />
+          }
+          description={<TitleLink title={query.data.title} />}
+        />
+      }
+    >
+      <InsightsReportRow>
+        <InsightsPlaysChart />
+        <InsightsDevicesChart />
+      </InsightsReportRow>
+      <InsightsReportRow>
+        <InsightsLocationsChart />
+        <InsightsPlatformsChart />
+      </InsightsReportRow>
+    </ModelInsightsPageLayout>
+  ) : (
+    <PageStatus query={query} loaderClassName="absolute inset-0 m-auto" />
+  );
+}

resources/client/admin/reports/pages/title-insights-page.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import {useTitle} from '@app/titles/requests/use-title';
+import {PageStatus} from '@common/http/page-status';
+import {
+  ModelInsightsPageLayout,
+  ModelInsightsPageTitle,
+} from '@app/admin/reports/model-insights-page-layout';
+import {useParams} from 'react-router-dom';
+import {TitlePoster} from '@app/titles/title-poster/title-poster';
+import {TitleLink} from '@app/titles/title-link';
+import {InsightsReportRow} from '@app/admin/reports/insights/insights-report-row';
+import {InsightsPlaysChart} from '@app/admin/reports/insights/insights-plays-chart';
+import {InsightsDevicesChart} from '@app/admin/reports/insights/insights-devices-chart';
+import {InsightsLocationsChart} from '@app/admin/reports/insights/insights-locations-chart';
+import {InsightsPlatformsChart} from '@app/admin/reports/insights/insights-platforms-chart';
+import {InsightsSeasonsChart} from '@app/admin/reports/insights/insights-seasons-chart';
+import {InsightsEpisodesChart} from '@app/admin/reports/insights/insights-episodes-chart';
+
+export function TitleInsightsPage() {
+  const {titleId} = useParams();
+  const query = useTitle('title');
+
+  return query.data ? (
+    <ModelInsightsPageLayout
+      reportModel={`title=${titleId}`}
+      name={query.data.title.name}
+      title={
+        <ModelInsightsPageTitle
+          image={<TitlePoster title={query.data.title} srcSize="sm" />}
+          name={<TitleLink title={query.data.title} />}
+          description={<span>{query.data.title.year}</span>}
+        />
+      }
+    >
+      <InsightsReportRow>
+        <InsightsPlaysChart />
+        <InsightsDevicesChart />
+      </InsightsReportRow>
+      <InsightsReportRow>
+        <InsightsSeasonsChart />
+        <InsightsEpisodesChart />
+      </InsightsReportRow>
+      <InsightsReportRow>
+        <InsightsLocationsChart />
+        <InsightsPlatformsChart />
+      </InsightsReportRow>
+    </ModelInsightsPageLayout>
+  ) : (
+    <PageStatus query={query} loaderClassName="absolute inset-0 m-auto" />
+  );
+}

resources/client/admin/reports/pages/video-insights-page.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import {PageStatus} from '@common/http/page-status';
+import {
+  ModelInsightsPageLayout,
+  ModelInsightsPageTitle,
+} from '@app/admin/reports/model-insights-page-layout';
+import {TitleLink} from '@app/titles/title-link';
+import {InsightsReportRow} from '@app/admin/reports/insights/insights-report-row';
+import {InsightsPlaysChart} from '@app/admin/reports/insights/insights-plays-chart';
+import {InsightsDevicesChart} from '@app/admin/reports/insights/insights-devices-chart';
+import {InsightsLocationsChart} from '@app/admin/reports/insights/insights-locations-chart';
+import {InsightsPlatformsChart} from '@app/admin/reports/insights/insights-platforms-chart';
+import {useVideo} from '@app/admin/videos/requests/use-video';
+import {Link} from 'react-router-dom';
+import {getWatchLink} from '@app/videos/watch-page/get-watch-link';
+import {VideoThumbnail} from '@app/videos/video-thumbnail';
+
+export function VideoInsightsPage() {
+  const query = useVideo();
+  const video = query.data?.video;
+
+  return video ? (
+    <ModelInsightsPageLayout
+      reportModel={`video=${video.id}`}
+      name={video.name}
+      title={
+        <ModelInsightsPageTitle
+          image={<VideoThumbnail video={video} srcSize="sm" />}
+          name={
+            <Link
+              to={getWatchLink(video)}
+              className="hover:underline"
+              target="_blank"
+            >
+              {video.name}
+            </Link>
+          }
+          description={<TitleLink title={video.title!} />}
+        />
+      }
+    >
+      <InsightsReportRow>
+        <InsightsPlaysChart />
+        <InsightsDevicesChart />
+      </InsightsReportRow>
+      <InsightsReportRow>
+        <InsightsLocationsChart />
+        <InsightsPlatformsChart />
+      </InsightsReportRow>
+    </ModelInsightsPageLayout>
+  ) : (
+    <PageStatus query={query} loaderClassName="absolute inset-0 m-auto" />
+  );
+}