mirror of
https://github.com/KevinMidboe/seasoned.git
synced 2026-03-10 03:19:32 +00:00
Feat: Activity page enhancements (#106)
* Add activity page components and Tautulli stats integration - Add StatsOverview component for watch statistics display - Add WatchHistory component for recent watch activity - Add useTautulliStats composable for Tautulli API integration - Components display total plays, watch time, movies/episodes watched - Support for fetching home stats and last watched content * Enhance Graph component with improved styling and options - Add wrapper div for better layout control - Update color scheme with modern palette (Indigo, Amber, Emerald) - Add Filler plugin for filled area charts - Improve bar chart styling with rounded corners - Add proper lifecycle cleanup with onBeforeUnmount - Enhance tooltip formatting for time and number values - Add deep watch for reactive data updates - Better TypeScript type safety with Chart.js types * Refactor ActivityPage with enhanced stats and visualizations - Integrate StatsOverview component for at-a-glance metrics - Add WatchHistory component for recent watch activity - Add hourly viewing patterns chart - Modernize UI with card-based layout - Improve controls styling with better labels and input handling - Remove authentication dependency (now handled by route guards) - Use useTautulliStats composable for data fetching - Add comprehensive watch statistics (total plays, hours, by media type) - Support for both plays and duration view modes * Improve Plex authentication check with cookie fallback - Add usePlexAuth composable import to routes - Enhance hasPlexAccount() to check cookies when Vuex store is empty - Fixes authentication check after page refreshes - Ensures activity page remains accessible with valid Plex auth
This commit is contained in:
GitHub
@@ -1,9 +1,11 @@
|
||||
<template>
|
||||
<canvas ref="graphCanvas"></canvas>
|
||||
<div class="graph-wrapper">
|
||||
<canvas ref="graphCanvas"></canvas>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, watch } from "vue";
|
||||
import { ref, onMounted, watch, onBeforeUnmount } from "vue";
|
||||
import {
|
||||
Chart,
|
||||
LineElement,
|
||||
@@ -16,12 +18,14 @@
|
||||
Legend,
|
||||
Title,
|
||||
Tooltip,
|
||||
Filler,
|
||||
ChartType
|
||||
} from "chart.js";
|
||||
import type { BarOptions, ChartOptions } from "chart.js";
|
||||
|
||||
import type { Ref } from "vue";
|
||||
import { convertSecondsToHumanReadable } from "../utils";
|
||||
import { GraphValueTypes } from "../interfaces/IGraph";
|
||||
import { GraphTypes, GraphValueTypes } from "../interfaces/IGraph";
|
||||
import type { IGraphDataset, IGraphData } from "../interfaces/IGraph";
|
||||
|
||||
Chart.register(
|
||||
@@ -34,7 +38,8 @@
|
||||
CategoryScale,
|
||||
Legend,
|
||||
Title,
|
||||
Tooltip
|
||||
Tooltip,
|
||||
Filler
|
||||
);
|
||||
|
||||
interface Props {
|
||||
@@ -42,129 +47,188 @@
|
||||
data: IGraphData;
|
||||
type: ChartType;
|
||||
stacked: boolean;
|
||||
|
||||
datasetDescriptionSuffix: string;
|
||||
tooltipDescriptionSuffix: string;
|
||||
graphValueType?: GraphValueTypes;
|
||||
}
|
||||
|
||||
Chart.defaults.elements.point.radius = 0;
|
||||
Chart.defaults.elements.point.hitRadius = 10;
|
||||
// Chart.defaults.elements.point.pointHoverRadius = 10;
|
||||
Chart.defaults.elements.point.hoverBorderWidth = 4;
|
||||
|
||||
const props = defineProps<Props>();
|
||||
const graphCanvas: Ref<HTMLCanvasElement> = ref(null);
|
||||
let graphInstance = null;
|
||||
|
||||
/* eslint-disable no-use-before-define */
|
||||
onMounted(() => generateGraph());
|
||||
watch(() => props.data, generateGraph);
|
||||
/* eslint-enable no-use-before-define */
|
||||
const graphCanvas: Ref<HTMLCanvasElement | null> = ref(null);
|
||||
let graphInstance: Chart | null = null;
|
||||
|
||||
const graphTemplates = [
|
||||
{
|
||||
backgroundColor: "rgba(54, 162, 235, 0.2)",
|
||||
borderColor: "rgba(54, 162, 235, 1)",
|
||||
borderWidth: 1,
|
||||
tension: 0.4
|
||||
borderColor: "#6366F1",
|
||||
backgroundColor: "rgba(99,102,241,0.12)"
|
||||
},
|
||||
{
|
||||
backgroundColor: "rgba(255, 159, 64, 0.2)",
|
||||
borderColor: "rgba(255, 159, 64, 1)",
|
||||
borderWidth: 1,
|
||||
tension: 0.4
|
||||
borderColor: "#F59E0B",
|
||||
backgroundColor: "rgba(245,158,11,0.12)"
|
||||
},
|
||||
{
|
||||
backgroundColor: "rgba(255, 99, 132, 0.2)",
|
||||
borderColor: "rgba(255, 99, 132, 1)",
|
||||
borderWidth: 1,
|
||||
tension: 0.4
|
||||
borderColor: "#10B981",
|
||||
backgroundColor: "rgba(16,185,129,0.12)"
|
||||
}
|
||||
];
|
||||
// const gridColor = getComputedStyle(document.documentElement).getPropertyValue(
|
||||
// "--text-color-5"
|
||||
// );
|
||||
|
||||
function hydrateGraphLineOptions(dataset: IGraphDataset, index: number) {
|
||||
onMounted(() => generateGraph());
|
||||
watch(() => props.data, generateGraph, { deep: true });
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
if (graphInstance) graphInstance.destroy();
|
||||
});
|
||||
|
||||
function removeEmptyDataset(dataset: IGraphDataset) {
|
||||
return dataset;
|
||||
return !dataset.data.every(point => point === 0);
|
||||
}
|
||||
|
||||
function hydrateDataset(dataset: IGraphDataset, index: number) {
|
||||
const base = graphTemplates[index % graphTemplates.length];
|
||||
|
||||
if (props.type === "bar") {
|
||||
return {
|
||||
label: `${dataset.name} ${props.datasetDescriptionSuffix}`,
|
||||
data: dataset.data,
|
||||
backgroundColor: base.borderColor,
|
||||
inflateAmount: 0,
|
||||
borderRadius: {
|
||||
topLeft: 8,
|
||||
topRight: 8,
|
||||
bottomLeft: 8,
|
||||
bottomRight: 8
|
||||
},
|
||||
|
||||
borderSkipped: false,
|
||||
borderWidth: 2,
|
||||
borderColor: "transparent",
|
||||
|
||||
// Slight spacing between categories
|
||||
barPercentage: 0.8,
|
||||
categoryPercentage: 0.9
|
||||
} as BarOptions;
|
||||
}
|
||||
|
||||
// Line chart — subtle, minimal points
|
||||
return {
|
||||
label: `${dataset.name} ${props.datasetDescriptionSuffix}`,
|
||||
data: dataset.data,
|
||||
...graphTemplates[index]
|
||||
borderColor: base.borderColor,
|
||||
backgroundColor: base.backgroundColor,
|
||||
borderWidth: 2,
|
||||
tension: 0.35,
|
||||
fill: true,
|
||||
|
||||
pointRadius: 2,
|
||||
pointHoverRadius: 5,
|
||||
pointHitRadius: 12,
|
||||
pointBackgroundColor: base.borderColor,
|
||||
pointBorderColor: base.borderColor,
|
||||
pointBorderWidth: 0
|
||||
};
|
||||
}
|
||||
|
||||
function removeEmptyDataset(dataset: IGraphDataset) {
|
||||
/* eslint-disable-next-line no-unneeded-ternary */
|
||||
return dataset.data.every(point => point === 0) ? false : true;
|
||||
}
|
||||
|
||||
function generateGraph() {
|
||||
if (!graphCanvas.value) return;
|
||||
|
||||
const datasets = props.data.series
|
||||
.filter(removeEmptyDataset)
|
||||
.map(hydrateGraphLineOptions);
|
||||
.map(hydrateDataset);
|
||||
|
||||
const graphOptions = {
|
||||
const chartData = {
|
||||
labels: props.data.labels,
|
||||
datasets
|
||||
};
|
||||
|
||||
const options: ChartOptions = {
|
||||
maintainAspectRatio: false,
|
||||
responsive: true,
|
||||
layout: {
|
||||
padding: { top: 8 }
|
||||
},
|
||||
plugins: {
|
||||
tooltip: {
|
||||
callbacks: {
|
||||
// title: (tooltipItem, data) => `Watch date: ${tooltipItem[0].label}`,
|
||||
label: tooltipItem => {
|
||||
const context = tooltipItem.dataset.label.split(" ")[0];
|
||||
const text = `${context} ${props.tooltipDescriptionSuffix}`;
|
||||
legend: {
|
||||
display: true
|
||||
},
|
||||
|
||||
tooltip: {
|
||||
backgroundColor: "#111827",
|
||||
bodyColor: "#e5e7eb",
|
||||
padding: 12,
|
||||
cornerRadius: 8,
|
||||
displayColors: true,
|
||||
callbacks: {
|
||||
label: (tooltipItem: any) => {
|
||||
const context = tooltipItem.dataset.label.split(" ")[0];
|
||||
|
||||
let type = GraphTypes.Plays;
|
||||
let value = tooltipItem.raw;
|
||||
if (props.graphValueType === GraphValueTypes.Time) {
|
||||
if (props.graphValueType === String(GraphTypes.Duration)) {
|
||||
value = convertSecondsToHumanReadable(value);
|
||||
type = GraphTypes.Duration;
|
||||
}
|
||||
|
||||
return ` ${text}: ${value}`;
|
||||
const text = `${context} ${type}`;
|
||||
return `${text}: ${value}`;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
scales: {
|
||||
xAxes: {
|
||||
x: {
|
||||
stacked: props.stacked,
|
||||
gridLines: {
|
||||
display: false
|
||||
grid: {
|
||||
display: false,
|
||||
drawBorder: false
|
||||
},
|
||||
ticks: {
|
||||
color: "#9CA3AF",
|
||||
font: { size: 11 }
|
||||
}
|
||||
},
|
||||
yAxes: {
|
||||
|
||||
y: {
|
||||
stacked: props.stacked,
|
||||
beginAtZero: true,
|
||||
grid: {
|
||||
color: "rgba(0,0,0,0.04)",
|
||||
drawBorder: false
|
||||
},
|
||||
ticks: {
|
||||
callback: value => {
|
||||
if (props.graphValueType === GraphValueTypes.Time) {
|
||||
color: "#9CA3AF",
|
||||
font: { size: 11 },
|
||||
padding: 8,
|
||||
callback: (value: number) => {
|
||||
if (props.graphValueType === String(GraphTypes.Duration)) {
|
||||
return convertSecondsToHumanReadable(value);
|
||||
}
|
||||
|
||||
return value;
|
||||
},
|
||||
beginAtZero: true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const chartData = {
|
||||
labels: props.data.labels.toString().split(","),
|
||||
datasets
|
||||
};
|
||||
|
||||
if (graphInstance) {
|
||||
graphInstance.clear();
|
||||
graphInstance.data = chartData;
|
||||
graphInstance.update("none");
|
||||
graphInstance.update();
|
||||
return;
|
||||
}
|
||||
|
||||
graphInstance = new Chart(graphCanvas.value, {
|
||||
type: props.type,
|
||||
data: chartData,
|
||||
options: graphOptions
|
||||
options
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
<style scoped lang="scss">
|
||||
.graph-wrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 240px;
|
||||
}
|
||||
</style>
|
||||
|
||||
86
src/components/activity/StatsOverview.vue
Normal file
86
src/components/activity/StatsOverview.vue
Normal file
@@ -0,0 +1,86 @@
|
||||
<template>
|
||||
<div v-if="watchStats" class="stats-overview">
|
||||
<div class="stat-card">
|
||||
<div class="stat-value">{{ watchStats.totalPlays }}</div>
|
||||
<div class="stat-label">Total Plays</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-value">{{ watchStats.totalHours }}h</div>
|
||||
<div class="stat-label">Watch Time</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-value">{{ watchStats.moviePlays }}</div>
|
||||
<div class="stat-label">Movies watched</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-value">{{ watchStats.episodePlays }}</div>
|
||||
<div class="stat-label">Episodes watched</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { WatchStats } from "../../composables/useTautulliStats";
|
||||
|
||||
interface Props {
|
||||
watchStats: WatchStats | null;
|
||||
}
|
||||
|
||||
defineProps<Props>();
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "scss/variables";
|
||||
@import "scss/media-queries";
|
||||
|
||||
.stats-overview {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
||||
gap: 1.5rem;
|
||||
margin-bottom: 2rem;
|
||||
|
||||
@include mobile-only {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
background: var(--background-ui);
|
||||
padding: 1.5rem;
|
||||
border-radius: 12px;
|
||||
text-align: center;
|
||||
transition: transform 0.2s;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
|
||||
@include mobile-only {
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
color: var(--highlight-color);
|
||||
margin-bottom: 0.5rem;
|
||||
|
||||
@include mobile-only {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 0.9rem;
|
||||
color: var(--text-color-60);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
font-weight: 300;
|
||||
|
||||
@include mobile-only {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
101
src/components/activity/WatchHistory.vue
Normal file
101
src/components/activity/WatchHistory.vue
Normal file
@@ -0,0 +1,101 @@
|
||||
<template>
|
||||
<div v-if="topContent.length > 0" class="watch-history">
|
||||
<h3 class="section-title">Last Watched</h3>
|
||||
<div class="top-content-list">
|
||||
<div
|
||||
v-for="(item, index) in topContent"
|
||||
:key="index"
|
||||
class="top-content-item"
|
||||
>
|
||||
<div class="content-rank">{{ index + 1 }}</div>
|
||||
<div class="content-details">
|
||||
<div class="content-title">{{ item.title }}</div>
|
||||
<div class="content-meta">
|
||||
{{ item.type }} • {{ item.plays }} plays • {{ item.duration }}min
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
interface TopContentItem {
|
||||
title: string;
|
||||
type: string;
|
||||
plays: number;
|
||||
duration: number;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
topContent: TopContentItem[];
|
||||
}
|
||||
|
||||
defineProps<Props>();
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "scss/variables";
|
||||
@import "scss/media-queries";
|
||||
|
||||
.watch-history {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
margin: 0 0 1rem 0;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 500;
|
||||
color: $text-color;
|
||||
}
|
||||
|
||||
.top-content-list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
gap: 1rem;
|
||||
|
||||
@include mobile-only {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.top-content-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
background: var(--background-ui);
|
||||
padding: 1rem;
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--text-color-50);
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover {
|
||||
border-color: var(--text-color);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
}
|
||||
|
||||
.content-rank {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: var(--highlight-color);
|
||||
min-width: 2.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.content-details {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.content-title {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-color);
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.content-meta {
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-color-60);
|
||||
}
|
||||
</style>
|
||||
299
src/composables/useTautulliStats.ts
Normal file
299
src/composables/useTautulliStats.ts
Normal file
@@ -0,0 +1,299 @@
|
||||
import { API_HOSTNAME } from "../api";
|
||||
|
||||
export interface WatchStats {
|
||||
totalHours: number;
|
||||
totalPlays: number;
|
||||
moviePlays: number;
|
||||
episodePlays: number;
|
||||
musicPlays: number;
|
||||
lastWatched: WatchContent[];
|
||||
}
|
||||
|
||||
interface DayStats {
|
||||
date: string;
|
||||
plays: number;
|
||||
duration: number;
|
||||
}
|
||||
|
||||
interface HomeStatItem {
|
||||
rating_key: number;
|
||||
title: string;
|
||||
total_plays?: number;
|
||||
total_duration?: number;
|
||||
users_watched?: string;
|
||||
last_play?: number;
|
||||
grandparent_thumb?: string;
|
||||
thumb?: string;
|
||||
content_rating?: string;
|
||||
labels?: string[];
|
||||
media_type?: string;
|
||||
}
|
||||
|
||||
export interface WatchContent {
|
||||
title: string;
|
||||
plays: number;
|
||||
duration: number;
|
||||
type: string;
|
||||
}
|
||||
|
||||
interface PlaysGraphData {
|
||||
categories: string[];
|
||||
series: {
|
||||
name: string;
|
||||
data: number[];
|
||||
}[];
|
||||
}
|
||||
|
||||
export async function tautulliRequest(
|
||||
resource: string,
|
||||
params: Record<string, any> = {}
|
||||
) {
|
||||
try {
|
||||
const queryParams = new URLSearchParams(params);
|
||||
const url = new URL(
|
||||
`/api/v1/user/stats/${resource}?${queryParams}`,
|
||||
API_HOSTNAME
|
||||
);
|
||||
const options: RequestInit = {
|
||||
headers: {
|
||||
"Content-Type": "application/json"
|
||||
},
|
||||
credentials: "include"
|
||||
};
|
||||
|
||||
const resp = await fetch(url, options);
|
||||
|
||||
if (!resp.ok) {
|
||||
throw new Error(`Tautulli API request failed: ${resp.statusText}`);
|
||||
}
|
||||
|
||||
const response = await resp.json();
|
||||
if (response?.success !== true) {
|
||||
throw new Error(response?.message || "Unknown API error");
|
||||
}
|
||||
|
||||
return response.data;
|
||||
} catch (error) {
|
||||
console.error(`[Tautulli] Error with ${resource}:`, error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
// Fetch home statistics (pre-aggregated by Tautulli!)
|
||||
export async function fetchHomeStats(
|
||||
timeRange = 30,
|
||||
statsType: "plays" | "duration" = "plays"
|
||||
): Promise<WatchStats> {
|
||||
try {
|
||||
const params: Record<string, any> = {
|
||||
days: timeRange,
|
||||
type: statsType,
|
||||
grouping: 0
|
||||
};
|
||||
|
||||
const stats = await tautulliRequest("home_stats", params);
|
||||
|
||||
// Extract stats from the response
|
||||
let totalPlays = 0;
|
||||
let totalHours = 0;
|
||||
let moviePlays = 0;
|
||||
let episodePlays = 0;
|
||||
let musicPlays = 0;
|
||||
|
||||
// Find the relevant stat sections
|
||||
const topMovies = stats.find((s: any) => s.stat_id === "top_movies");
|
||||
const topTV = stats.find((s: any) => s.stat_id === "top_tv");
|
||||
const topMusic = stats.find((s: any) => s.stat_id === "top_music");
|
||||
|
||||
if (topMovies?.rows) {
|
||||
moviePlays = topMovies.rows.reduce(
|
||||
(sum: number, item: any) => sum + (item.total_plays || 0),
|
||||
0
|
||||
);
|
||||
}
|
||||
|
||||
if (topTV?.rows) {
|
||||
episodePlays = topTV.rows.reduce(
|
||||
(sum: number, item: any) => sum + (item.total_plays || 0),
|
||||
0
|
||||
);
|
||||
}
|
||||
|
||||
if (topMusic?.rows) {
|
||||
musicPlays = topMusic.rows.reduce(
|
||||
(sum: number, item: any) => sum + (item.total_plays || 0),
|
||||
0
|
||||
);
|
||||
}
|
||||
|
||||
totalPlays = moviePlays + episodePlays + musicPlays;
|
||||
|
||||
// Calculate total hours from duration
|
||||
if (statsType === "duration") {
|
||||
const totalDuration = [topMovies, topTV, topMusic].reduce((sum, stat) => {
|
||||
if (!stat?.rows) return sum;
|
||||
return (
|
||||
sum +
|
||||
stat.rows.reduce(
|
||||
(s: number, item: any) => s + (item.total_duration || 0),
|
||||
0
|
||||
)
|
||||
);
|
||||
}, 0);
|
||||
totalHours = Math.round(totalDuration / 3600); // Convert seconds to hours
|
||||
}
|
||||
|
||||
// Get "last_watched" stat which contains recent items
|
||||
const limit = 12;
|
||||
const lastWatched = stats
|
||||
.find((s: any) => s.stat_id === "last_watched")
|
||||
.rows.slice(0, limit)
|
||||
.map((item: any) => ({
|
||||
title: item.title || item.full_title || "Unknown",
|
||||
plays: item.total_plays || 0,
|
||||
duration: Math.round((item.total_duration || 0) / 60), // Convert to minutes
|
||||
type: item.media_type || "unknown"
|
||||
}));
|
||||
|
||||
return {
|
||||
totalHours,
|
||||
totalPlays,
|
||||
moviePlays,
|
||||
episodePlays,
|
||||
musicPlays,
|
||||
lastWatched
|
||||
};
|
||||
} catch (error) {
|
||||
console.error("[Tautulli] Error fetching home stats:", error);
|
||||
return {
|
||||
totalHours: 0,
|
||||
totalPlays: 0,
|
||||
moviePlays: 0,
|
||||
episodePlays: 0,
|
||||
musicPlays: 0,
|
||||
lastWatched: []
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
// Fetch plays by date (already aggregated by Tautulli!)
|
||||
export async function fetchPlaysByDate(
|
||||
timeRange = 30,
|
||||
yAxis: "plays" | "duration" = "plays"
|
||||
): Promise<DayStats[]> {
|
||||
try {
|
||||
const params: Record<string, any> = {
|
||||
days: timeRange,
|
||||
y_axis: yAxis,
|
||||
grouping: 0
|
||||
};
|
||||
|
||||
const data: PlaysGraphData = await tautulliRequest("plays_by_date", params);
|
||||
|
||||
// Sum all series data for each date
|
||||
return data.categories.map((date, index) => {
|
||||
const totalValue = data.series
|
||||
.filter(s => s.name !== "Total")
|
||||
.reduce((sum, series) => sum + (series.data[index] || 0), 0);
|
||||
|
||||
return {
|
||||
date,
|
||||
plays: yAxis === "plays" ? totalValue : 0,
|
||||
duration: yAxis === "duration" ? totalValue : 0
|
||||
};
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("[Tautulli] Error fetching plays by date:", error);
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
// Fetch plays by day of week (already aggregated!)
|
||||
export async function fetchPlaysByDayOfWeek(
|
||||
timeRange = 30,
|
||||
yAxis: "plays" | "duration" = "plays"
|
||||
): Promise<{
|
||||
labels: string[];
|
||||
movies: number[];
|
||||
episodes: number[];
|
||||
music: number[];
|
||||
}> {
|
||||
try {
|
||||
const params: Record<string, any> = {
|
||||
days: timeRange,
|
||||
y_axis: yAxis,
|
||||
grouping: 0
|
||||
};
|
||||
|
||||
const data: PlaysGraphData = await tautulliRequest(
|
||||
"plays_by_dayofweek",
|
||||
params
|
||||
);
|
||||
|
||||
// Map series names to our expected format
|
||||
const movies =
|
||||
data.series.find(s => s.name === "Movies")?.data || new Array(7).fill(0);
|
||||
const episodes =
|
||||
data.series.find(s => s.name === "TV")?.data || new Array(7).fill(0);
|
||||
const music =
|
||||
data.series.find(s => s.name === "Music")?.data || new Array(7).fill(0);
|
||||
|
||||
return {
|
||||
labels: data.categories,
|
||||
movies,
|
||||
episodes,
|
||||
music
|
||||
};
|
||||
} catch (error) {
|
||||
console.error("[Tautulli] Error fetching plays by day of week:", error);
|
||||
return {
|
||||
labels: [
|
||||
"Sunday",
|
||||
"Monday",
|
||||
"Tuesday",
|
||||
"Wednesday",
|
||||
"Thursday",
|
||||
"Friday",
|
||||
"Saturday"
|
||||
],
|
||||
movies: new Array(7).fill(0),
|
||||
episodes: new Array(7).fill(0),
|
||||
music: new Array(7).fill(0)
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
// Fetch plays by hour of day (already aggregated!)
|
||||
export async function fetchPlaysByHourOfDay(
|
||||
timeRange = 30,
|
||||
yAxis: "plays" | "duration" = "plays"
|
||||
): Promise<{ labels: string[]; data: number[] }> {
|
||||
try {
|
||||
const params: Record<string, any> = {
|
||||
days: timeRange,
|
||||
y_axis: yAxis,
|
||||
grouping: 0
|
||||
};
|
||||
|
||||
const data: PlaysGraphData = await tautulliRequest(
|
||||
"plays_by_hourofday",
|
||||
params
|
||||
);
|
||||
|
||||
// Sum all series data for each hour
|
||||
const hourlyData = data.categories.map((hour, index) =>
|
||||
data.series.reduce((sum, series) => sum + (series.data[index] || 0), 0)
|
||||
);
|
||||
|
||||
return {
|
||||
labels: data.categories.map(h => `${h}:00`),
|
||||
data: hourlyData
|
||||
};
|
||||
} catch (error) {
|
||||
console.error("[Tautulli] Error fetching plays by hour:", error);
|
||||
return {
|
||||
labels: Array.from({ length: 24 }, (_, i) => `${i}:00`),
|
||||
data: new Array(24).fill(0)
|
||||
};
|
||||
}
|
||||
}
|
||||
@@ -1,84 +1,110 @@
|
||||
<template>
|
||||
<div v-if="plexUserId" class="wrapper">
|
||||
<h1>Your watch activity</h1>
|
||||
<div class="activity">
|
||||
<h1 class="activity__title">Watch Activity</h1>
|
||||
|
||||
<div style="display: flex; flex-direction: row">
|
||||
<label class="filter" for="dayinput">
|
||||
<span>Days:</span>
|
||||
<input
|
||||
id="dayinput"
|
||||
v-model="days"
|
||||
class="dayinput"
|
||||
placeholder="days"
|
||||
type="number"
|
||||
pattern="[0-9]*"
|
||||
@change="fetchChartData"
|
||||
/>
|
||||
</label>
|
||||
<!-- Stats Overview -->
|
||||
<stats-overview :watch-stats="watchStats" />
|
||||
|
||||
<div class="filter">
|
||||
<span>Data sorted by:</span>
|
||||
<div class="controls">
|
||||
<div class="control-group">
|
||||
<label class="control-label">Time Range</label>
|
||||
<div class="input-wrapper">
|
||||
<input
|
||||
v-model.number="days"
|
||||
class="days-input"
|
||||
type="number"
|
||||
min="1"
|
||||
max="365"
|
||||
@change="fetchChartData"
|
||||
/>
|
||||
<span class="input-suffix">days</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="control-group">
|
||||
<label class="control-label">View Mode</label>
|
||||
<toggle-button
|
||||
v-model:selected="graphViewMode"
|
||||
class="filter-item"
|
||||
:options="[GraphTypes.Plays, GraphTypes.Duration]"
|
||||
@change="fetchChartData"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="chart-section">
|
||||
<h3 class="chart-header">Activity per day:</h3>
|
||||
<div class="graph">
|
||||
<Graph
|
||||
v-if="playsByDayData"
|
||||
:data="playsByDayData"
|
||||
type="line"
|
||||
:stacked="false"
|
||||
:dataset-description-suffix="`watch last ${days} days`"
|
||||
:tooltip-description-suffix="selectedGraphViewMode.tooltipLabel"
|
||||
:graph-value-type="selectedGraphViewMode.valueType"
|
||||
/>
|
||||
<div class="activity__charts">
|
||||
<div class="chart-card">
|
||||
<h3>Daily Activity</h3>
|
||||
<div class="chart-card__graph">
|
||||
<Graph
|
||||
v-if="playsByDayData"
|
||||
:data="playsByDayData"
|
||||
type="line"
|
||||
:stacked="false"
|
||||
:dataset-description-suffix="`watch last ${days} days`"
|
||||
:tooltip-description-suffix="selectedGraphViewMode.tooltipLabel"
|
||||
:graph-value-type="graphViewMode"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 class="chart-header">Activity per day of week:</h3>
|
||||
<div class="graph">
|
||||
<Graph
|
||||
v-if="playsByDayofweekData"
|
||||
:data="playsByDayofweekData"
|
||||
type="bar"
|
||||
:stacked="true"
|
||||
:dataset-description-suffix="`watch last ${days} days`"
|
||||
:tooltip-description-suffix="selectedGraphViewMode.tooltipLabel"
|
||||
:graph-value-type="selectedGraphViewMode.valueType"
|
||||
/>
|
||||
<div class="chart-card">
|
||||
<h3>Activity by Media Type</h3>
|
||||
<div class="chart-card__graph">
|
||||
<Graph
|
||||
v-if="playsByDayofweekData"
|
||||
:data="playsByDayofweekData"
|
||||
:graphValueType="graphViewMode"
|
||||
type="bar"
|
||||
:stacked="true"
|
||||
:dataset-description-suffix="`watch last ${days} days`"
|
||||
tooltip-description-suffix="plays"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="chart-card">
|
||||
<h3>Viewing Patterns by Hour</h3>
|
||||
<div class="chart-card__graph">
|
||||
<Graph
|
||||
v-if="hourlyData"
|
||||
:data="hourlyData"
|
||||
type="bar"
|
||||
:stacked="false"
|
||||
:dataset-description-suffix="`last ${days} days`"
|
||||
tooltip-description-suffix="plays"
|
||||
:graph-value-type="graphViewMode"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="not-authenticated">
|
||||
<h1><IconStop /> Must be authenticated</h1>
|
||||
|
||||
<!-- Top Content -->
|
||||
<watch-history :top-content="topContent" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from "vue";
|
||||
import { useStore } from "vuex";
|
||||
import { ref, computed, onMounted } from "vue";
|
||||
import Graph from "@/components/Graph.vue";
|
||||
import ToggleButton from "@/components/ui/ToggleButton.vue";
|
||||
import IconStop from "@/icons/IconStop.vue";
|
||||
import type { Ref } from "vue";
|
||||
import { fetchGraphData } from "../api";
|
||||
import StatsOverview from "@/components/activity/StatsOverview.vue";
|
||||
import WatchHistory from "@/components/activity/WatchHistory.vue";
|
||||
import {
|
||||
fetchHomeStats,
|
||||
fetchPlaysByDate,
|
||||
fetchPlaysByDayOfWeek,
|
||||
fetchPlaysByHourOfDay
|
||||
} from "../composables/useTautulliStats";
|
||||
import {
|
||||
GraphTypes,
|
||||
GraphValueTypes,
|
||||
IGraphData
|
||||
} from "../interfaces/IGraph";
|
||||
|
||||
const store = useStore();
|
||||
import type { Ref } from "vue";
|
||||
import type { WatchStats } from "../composables/useTautulliStats";
|
||||
|
||||
const days: Ref<number> = ref(30);
|
||||
const graphViewMode: Ref<GraphTypes> = ref(GraphTypes.Plays);
|
||||
const plexUserId = computed(() => store.getters["user/plexUserId"]);
|
||||
|
||||
const graphValueViewMode = [
|
||||
{
|
||||
@@ -95,156 +121,226 @@
|
||||
|
||||
const playsByDayData: Ref<IGraphData> = ref(null);
|
||||
const playsByDayofweekData: Ref<IGraphData> = ref(null);
|
||||
const hourlyData: Ref<IGraphData> = ref(null);
|
||||
const watchStats = ref(null);
|
||||
const topContent = ref([]);
|
||||
|
||||
const selectedGraphViewMode = computed(() =>
|
||||
graphValueViewMode.find(viewMode => viewMode.type === graphViewMode.value)
|
||||
);
|
||||
|
||||
function convertDateStringToDayMonth(date: string): string {
|
||||
function convertDateStringToDayMonth(date: string, short = true): string {
|
||||
if (!date.match(/[0-9]{4}-[0-9]{2}-[0-9]{2}/)) {
|
||||
return date;
|
||||
}
|
||||
|
||||
const [, month, day] = date.split("-");
|
||||
return `${day}.${month}`;
|
||||
const [year, month, day] = date.split("-");
|
||||
return short ? `${month}.${day}` : `${day}.${month}.${year}`;
|
||||
}
|
||||
|
||||
function convertDateLabels(data) {
|
||||
return {
|
||||
labels: data.categories.map(convertDateStringToDayMonth),
|
||||
series: data.series
|
||||
};
|
||||
function activityPerDay(dataPromise: Promise<any>) {
|
||||
dataPromise.then(dayData => {
|
||||
playsByDayData.value = {
|
||||
labels: dayData.map(d =>
|
||||
convertDateStringToDayMonth(d.date, dayData.length < 365)
|
||||
),
|
||||
series: [
|
||||
{
|
||||
name: "Activity",
|
||||
data:
|
||||
graphViewMode.value === GraphTypes.Plays
|
||||
? dayData.map(d => d.plays)
|
||||
: dayData.map(d => d.duration)
|
||||
}
|
||||
]
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
async function fetchPlaysByDay() {
|
||||
playsByDayData.value = await fetchGraphData(
|
||||
"plays_by_day",
|
||||
days.value,
|
||||
graphViewMode.value
|
||||
).then(data => convertDateLabels(data?.data));
|
||||
function playsByDayOfWeek(dataPromise: Promise<any>) {
|
||||
dataPromise.then(weekData => {
|
||||
playsByDayofweekData.value = {
|
||||
labels: weekData.labels,
|
||||
series: [
|
||||
{ name: "Movies", data: weekData.movies },
|
||||
{ name: "Episodes", data: weekData.episodes },
|
||||
{ name: "Music", data: weekData.music }
|
||||
]
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
async function fetchPlaysByDayOfWeek() {
|
||||
playsByDayofweekData.value = await fetchGraphData(
|
||||
"plays_by_dayofweek",
|
||||
days.value,
|
||||
graphViewMode.value
|
||||
).then(data => convertDateLabels(data?.data));
|
||||
function hourly(hourlyPromise: Promise<any>) {
|
||||
hourlyPromise.then(hourData => {
|
||||
hourlyData.value = {
|
||||
labels: hourData.labels,
|
||||
series: [{ name: "Plays", data: hourData.data }]
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
function fetchChartData() {
|
||||
fetchPlaysByDay();
|
||||
fetchPlaysByDayOfWeek();
|
||||
async function fetchChartData() {
|
||||
try {
|
||||
const yAxis =
|
||||
graphViewMode.value === GraphTypes.Plays ? "plays" : "duration";
|
||||
|
||||
// Fetch all data in parallel using efficient Tautulli APIs
|
||||
fetchHomeStats(days.value, "duration").then(
|
||||
(homeStats: WatchStats) => (watchStats.value = homeStats)
|
||||
);
|
||||
|
||||
// Activity per day (line graph of last n days)
|
||||
activityPerDay(fetchPlaysByDate(days.value, yAxis));
|
||||
|
||||
// Activity by day of week (stacked by media type)
|
||||
playsByDayOfWeek(fetchPlaysByDayOfWeek(days.value, yAxis));
|
||||
|
||||
// Hourly distribution
|
||||
hourly(fetchPlaysByHourOfDay(days.value, yAxis));
|
||||
} catch (error) {
|
||||
console.error("[ActivityPage] Error fetching chart data:", error);
|
||||
}
|
||||
}
|
||||
|
||||
fetchChartData();
|
||||
onMounted(fetchChartData);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "scss/variables";
|
||||
@import "scss/media-queries";
|
||||
|
||||
.wrapper {
|
||||
padding: 2rem;
|
||||
.activity {
|
||||
padding: 3rem;
|
||||
max-width: 100%;
|
||||
|
||||
@include mobile-only {
|
||||
padding: 0 0.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
.filter {
|
||||
margin-top: 0.5rem;
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
font-size: 1.2rem;
|
||||
|
||||
&:not(:first-of-type) {
|
||||
margin-left: 1.25rem;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
font-size: inherit;
|
||||
max-width: 6rem;
|
||||
background-color: $background-ui;
|
||||
color: $text-color;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: inherit;
|
||||
line-height: 1;
|
||||
margin: 0.5rem 0;
|
||||
&__title {
|
||||
margin: 0 0 2rem 0;
|
||||
font-size: 2rem;
|
||||
font-weight: 300;
|
||||
color: $text-color;
|
||||
line-height: 1;
|
||||
|
||||
@include mobile-only {
|
||||
font-size: 1.5rem;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__charts {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
|
||||
@include mobile-only {
|
||||
gap: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// .filter {
|
||||
// display: flex;
|
||||
// flex-direction: row;
|
||||
// flex-wrap: wrap;
|
||||
// align-items: center;
|
||||
// margin-bottom: 2rem;
|
||||
.chart-card {
|
||||
background: var(--background-ui);
|
||||
border-radius: 12px;
|
||||
padding: 1.5rem;
|
||||
border: 1px solid var(--text-color-50);
|
||||
|
||||
// h2 {
|
||||
// margin-bottom: 0.5rem;
|
||||
// width: 100%;
|
||||
// font-weight: 400;
|
||||
// }
|
||||
@include mobile-only {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
// &-item:not(:first-of-type) {
|
||||
// margin-left: 1rem;
|
||||
// }
|
||||
h3 {
|
||||
margin: 0 0 1rem 0;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 500;
|
||||
color: $text-color;
|
||||
|
||||
// .dayinput {
|
||||
// font-size: 1.2rem;
|
||||
// max-width: 3rem;
|
||||
// background-color: $background-ui;
|
||||
// color: $text-color;
|
||||
// }
|
||||
// }
|
||||
@include mobile-only {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.chart-section {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.graph {
|
||||
&__graph {
|
||||
position: relative;
|
||||
height: 35vh;
|
||||
width: 90vw;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
min-height: 300px;
|
||||
|
||||
.chart-header {
|
||||
font-weight: 300;
|
||||
@include mobile-only {
|
||||
height: 30vh;
|
||||
min-height: 250px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.not-authenticated {
|
||||
padding: 2rem;
|
||||
.controls {
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
flex-wrap: wrap;
|
||||
|
||||
h1 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 3rem;
|
||||
|
||||
svg {
|
||||
margin-right: 1rem;
|
||||
height: 3rem;
|
||||
width: 3rem;
|
||||
}
|
||||
@include mobile-only {
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
@include mobile {
|
||||
padding: 1rem;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.65rem;
|
||||
.control-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
min-width: 200px;
|
||||
|
||||
svg {
|
||||
margin-right: 1rem;
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
}
|
||||
}
|
||||
@include mobile-only {
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.control-label {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
color: var(--text-color-60);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.input-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: var(--background-ui);
|
||||
border: 1px solid var(--text-color-50);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
transition: border-color 0.2s;
|
||||
|
||||
&:hover,
|
||||
&:focus-within {
|
||||
border-color: var(--text-color);
|
||||
}
|
||||
}
|
||||
|
||||
.days-input {
|
||||
flex: 1;
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding: 0.75rem 1rem;
|
||||
font-size: 1rem;
|
||||
color: $text-color;
|
||||
outline: none;
|
||||
width: 80px;
|
||||
|
||||
&::-webkit-inner-spin-button,
|
||||
&::-webkit-outer-spin-button {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.input-suffix {
|
||||
padding: 0 1rem;
|
||||
font-size: 0.9rem;
|
||||
color: var(--text-color-60);
|
||||
user-select: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -3,6 +3,8 @@ import type { RouteRecordRaw, RouteLocationNormalized } from "vue-router";
|
||||
|
||||
/* eslint-disable-next-line import-x/no-cycle */
|
||||
import store from "./store";
|
||||
import { usePlexAuth } from "./composables/usePlexAuth";
|
||||
const { getPlexAuthCookie } = usePlexAuth();
|
||||
|
||||
declare global {
|
||||
interface Window {
|
||||
@@ -96,7 +98,14 @@ const router = createRouter({
|
||||
});
|
||||
|
||||
const loggedIn = () => store.getters["user/loggedIn"];
|
||||
const hasPlexAccount = () => store.getters["user/plexUserId"] !== null;
|
||||
const hasPlexAccount = () => {
|
||||
// Check Vuex store first
|
||||
if (store.getters["user/plexUserId"] !== null) return true;
|
||||
|
||||
// Fallback to localStorage/cookie for page refreshes
|
||||
const authToken = getPlexAuthCookie();
|
||||
return !!authToken;
|
||||
};
|
||||
const hamburgerIsOpen = () => store.getters["hamburger/isOpen"];
|
||||
|
||||
router.beforeEach(
|
||||
|
||||
Reference in New Issue
Block a user