diff --git a/src/components/podcast-episodes-list.tsx b/src/components/podcast-episodes-list.tsx
index a8a4667..ab9da62 100644
--- a/src/components/podcast-episodes-list.tsx
+++ b/src/components/podcast-episodes-list.tsx
@@ -8,10 +8,12 @@ import {
TableHeadCell,
TableRow,
} from "./ui/table/table";
+import { useTitle } from "../hooks/use-title";
export function PodcastEpisodesList() {
const { podcastId } = useParams<{ podcastId: string }>();
const { data: podcast } = usePodcastQuery(podcastId);
+ useTitle(podcast?.title ?? "Podcast");
return (
diff --git a/src/hooks/use-title.ts b/src/hooks/use-title.ts
new file mode 100644
index 0000000..a29260c
--- /dev/null
+++ b/src/hooks/use-title.ts
@@ -0,0 +1,11 @@
+import { useEffect } from "react";
+
+export function useTitle(title: string) {
+ useEffect(() => {
+ const prevTitle = document.title;
+ document.title = title;
+ return () => {
+ document.title = prevTitle;
+ };
+ });
+}
diff --git a/src/pages/episode.tsx b/src/pages/episode.tsx
index d75e9cd..631aa12 100644
--- a/src/pages/episode.tsx
+++ b/src/pages/episode.tsx
@@ -1,5 +1,6 @@
import { useParams } from "react-router-dom";
import { usePodcastQuery } from "../services/podcasts/podcast.hooks";
+import { useTitle } from "../hooks/use-title";
export function Episode() {
const { podcastId, episodeId } = useParams<{
@@ -13,6 +14,8 @@ export function Episode() {
(episode) => episode.id.toString() === episodeId,
);
+ useTitle(episode?.title ?? "Episode");
+
return (
{episode?.title}