Compare commits
2 Commits
005fb72a48
...
0e1869aacf
| Author | SHA1 | Date | |
|---|---|---|---|
| 0e1869aacf | |||
| 2a94e1124c |
|
|
@ -3,7 +3,7 @@
|
|||
"name": "YT Playlist Features",
|
||||
"version": "0.1.0",
|
||||
"description": "Extract and work with YouTube playlist data",
|
||||
"permissions": ["storage"],
|
||||
"permissions": [],
|
||||
"background": {
|
||||
"service_worker": "background/service-worker.js"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
"name": "YT Playlist Features",
|
||||
"version": "0.1.0",
|
||||
"description": "Extract and work with YouTube playlist data",
|
||||
"permissions": ["storage"],
|
||||
"permissions": [],
|
||||
"background": {
|
||||
"scripts": ["background/service-worker.js"]
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
import browser from "webextension-polyfill";
|
||||
import type { Message } from "../shared/messages";
|
||||
import { savePlaylist, getPlaylist } from "../shared/storage";
|
||||
|
||||
const LOG_PREFIX = "[yt-playlist-features:bg]";
|
||||
|
||||
|
|
@ -11,15 +10,8 @@ browser.runtime.onMessage.addListener(
|
|||
if (msg.type === "PLAYLIST_EXTRACTED") {
|
||||
console.log(
|
||||
LOG_PREFIX,
|
||||
`Saving playlist: "${msg.data.metadata.title}" (${msg.data.extractedCount} videos)`,
|
||||
`Playlist: "${msg.data.metadata.title}" (${msg.data.extractedCount} videos)`,
|
||||
);
|
||||
await savePlaylist(msg.data);
|
||||
return;
|
||||
}
|
||||
|
||||
if (msg.type === "GET_PLAYLIST") {
|
||||
const data = await getPlaylist(msg.playlistId);
|
||||
return { type: "PLAYLIST_RESPONSE", data } satisfies Message;
|
||||
}
|
||||
},
|
||||
);
|
||||
|
|
|
|||
52
src/content/ui/i18n.ts
Normal file
52
src/content/ui/i18n.ts
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
type MessageKey =
|
||||
| "colIndex"
|
||||
| "colTitle"
|
||||
| "colChannel"
|
||||
| "colDuration"
|
||||
| "colAddedBy"
|
||||
| "colVotes"
|
||||
| "filterTitle"
|
||||
| "filterChannel"
|
||||
| "filterAddedBy"
|
||||
| "badgeLive"
|
||||
| "headerVideos";
|
||||
|
||||
const messages: Record<string, Record<MessageKey, string>> = {
|
||||
ja: {
|
||||
colIndex: "#",
|
||||
colTitle: "タイトル",
|
||||
colChannel: "チャンネル",
|
||||
colDuration: "長さ",
|
||||
colAddedBy: "追加者",
|
||||
colVotes: "投票",
|
||||
filterTitle: "タイトル検索...",
|
||||
filterChannel: "チャンネル...",
|
||||
filterAddedBy: "追加者...",
|
||||
badgeLive: "ライブ",
|
||||
headerVideos: "本の動画",
|
||||
},
|
||||
en: {
|
||||
colIndex: "#",
|
||||
colTitle: "Title",
|
||||
colChannel: "Channel",
|
||||
colDuration: "Duration",
|
||||
colAddedBy: "Added by",
|
||||
colVotes: "Votes",
|
||||
filterTitle: "Search title...",
|
||||
filterChannel: "Channel...",
|
||||
filterAddedBy: "Added by...",
|
||||
badgeLive: "LIVE",
|
||||
headerVideos: "videos",
|
||||
},
|
||||
};
|
||||
|
||||
function detectLang(): string {
|
||||
const htmlLang = document.documentElement.lang;
|
||||
if (htmlLang?.startsWith("ja")) return "ja";
|
||||
return "en";
|
||||
}
|
||||
|
||||
export function t(key: MessageKey): string {
|
||||
const lang = detectLang();
|
||||
return (messages[lang] ?? messages.en)[key];
|
||||
}
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
import type { PlaylistData, PlaylistVideo } from "../../types/playlist";
|
||||
import { t } from "./i18n";
|
||||
|
||||
type SortKey = "index" | "title" | "channel" | "duration" | "addedBy" | "votes";
|
||||
type SortDir = "asc" | "desc";
|
||||
|
|
@ -10,14 +11,16 @@ interface Column {
|
|||
collab?: boolean; // only shown for collaborative playlists
|
||||
}
|
||||
|
||||
const allColumns: Column[] = [
|
||||
{ label: "#", cls: "ytpf-col-index", key: "index" },
|
||||
{ label: "Title", cls: "ytpf-col-title", key: "title" },
|
||||
{ label: "Channel", cls: "ytpf-col-channel", key: "channel" },
|
||||
{ label: "Duration", cls: "ytpf-col-duration", key: "duration" },
|
||||
{ label: "Added by", cls: "ytpf-col-addedby", key: "addedBy", collab: true },
|
||||
{ label: "Votes", cls: "ytpf-col-votes", key: "votes", collab: true },
|
||||
];
|
||||
function getAllColumns(): Column[] {
|
||||
return [
|
||||
{ label: t("colIndex"), cls: "ytpf-col-index", key: "index" },
|
||||
{ label: t("colTitle"), cls: "ytpf-col-title", key: "title" },
|
||||
{ label: t("colChannel"), cls: "ytpf-col-channel", key: "channel" },
|
||||
{ label: t("colDuration"), cls: "ytpf-col-duration", key: "duration" },
|
||||
{ label: t("colAddedBy"), cls: "ytpf-col-addedby", key: "addedBy", collab: true },
|
||||
{ label: t("colVotes"), cls: "ytpf-col-votes", key: "votes", collab: true },
|
||||
];
|
||||
}
|
||||
|
||||
interface TagInput {
|
||||
container: HTMLElement;
|
||||
|
|
@ -251,7 +254,7 @@ function buildRow(
|
|||
if (video.isLive) {
|
||||
const badge = document.createElement("span");
|
||||
badge.className = "ytpf-live";
|
||||
badge.textContent = "LIVE";
|
||||
badge.textContent = t("badgeLive");
|
||||
tdDuration.appendChild(badge);
|
||||
} else {
|
||||
tdDuration.textContent = video.durationText ?? "--";
|
||||
|
|
@ -279,7 +282,7 @@ export function renderPlaylistTable(data: PlaylistData): HTMLElement {
|
|||
const isCollab = data.videos.some(
|
||||
(v) => v.addedBy != null || v.voteCount != null,
|
||||
);
|
||||
const columns = allColumns.filter((c) => !c.collab || isCollab);
|
||||
const columns = getAllColumns().filter((c) => !c.collab || isCollab);
|
||||
|
||||
const wrapper = document.createElement("div");
|
||||
wrapper.className = "ytpf-wrapper";
|
||||
|
|
@ -290,7 +293,7 @@ export function renderPlaylistTable(data: PlaylistData): HTMLElement {
|
|||
|
||||
const titleSpan = document.createElement("span");
|
||||
titleSpan.className = "ytpf-header-title";
|
||||
titleSpan.textContent = `${data.metadata.title} — ${data.extractedCount} videos`;
|
||||
titleSpan.textContent = `${data.metadata.title} — ${data.extractedCount} ${t("headerVideos")}`;
|
||||
|
||||
const metaSpan = document.createElement("span");
|
||||
metaSpan.className = "ytpf-header-meta";
|
||||
|
|
@ -313,12 +316,12 @@ export function renderPlaylistTable(data: PlaylistData): HTMLElement {
|
|||
titleInput.className = "ytpf-filter-input";
|
||||
titleInput.type = "text";
|
||||
titleInput.name = "ytpf-title-filter";
|
||||
titleInput.placeholder = "タイトル検索...";
|
||||
titleInput.placeholder = t("filterTitle");
|
||||
filters.appendChild(titleInput);
|
||||
|
||||
// Channel tag input
|
||||
const channelNames = [...new Set(data.videos.map((v) => v.channel.name))].sort();
|
||||
const channelTagInput = createTagInput("チャンネル...", channelNames, () => applyFilters());
|
||||
const channelTagInput = createTagInput(t("filterChannel"), channelNames, () => applyFilters());
|
||||
filters.appendChild(channelTagInput.container);
|
||||
|
||||
// Added-by tag input (collab only)
|
||||
|
|
@ -327,7 +330,7 @@ export function renderPlaylistTable(data: PlaylistData): HTMLElement {
|
|||
const addedByNames = [...new Set(
|
||||
data.videos.map((v) => v.addedBy).filter((n): n is string => n != null),
|
||||
)].sort();
|
||||
addedByTagInput = createTagInput("追加者...", addedByNames, () => applyFilters());
|
||||
addedByTagInput = createTagInput(t("filterAddedBy"), addedByNames, () => applyFilters());
|
||||
filters.appendChild(addedByTagInput.container);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,3 @@
|
|||
import type { PlaylistData } from "../types/playlist";
|
||||
|
||||
export type Message =
|
||||
| { type: "PLAYLIST_EXTRACTED"; data: PlaylistData }
|
||||
| { type: "GET_PLAYLIST"; playlistId: string }
|
||||
| { type: "PLAYLIST_RESPONSE"; data: PlaylistData | null };
|
||||
export type Message = { type: "PLAYLIST_EXTRACTED"; data: PlaylistData };
|
||||
|
|
|
|||
|
|
@ -1,25 +0,0 @@
|
|||
import browser from "webextension-polyfill";
|
||||
import type { PlaylistData } from "../types/playlist";
|
||||
|
||||
const STORAGE_PREFIX = "playlist:";
|
||||
|
||||
export async function savePlaylist(data: PlaylistData): Promise<void> {
|
||||
await browser.storage.local.set({
|
||||
[STORAGE_PREFIX + data.metadata.playlistId]: data,
|
||||
});
|
||||
}
|
||||
|
||||
export async function getPlaylist(
|
||||
playlistId: string,
|
||||
): Promise<PlaylistData | null> {
|
||||
const key = STORAGE_PREFIX + playlistId;
|
||||
const result = await browser.storage.local.get(key);
|
||||
return (result[key] as PlaylistData) ?? null;
|
||||
}
|
||||
|
||||
export async function getAllPlaylists(): Promise<PlaylistData[]> {
|
||||
const all = await browser.storage.local.get(null);
|
||||
return Object.entries(all)
|
||||
.filter(([key]) => key.startsWith(STORAGE_PREFIX))
|
||||
.map(([, value]) => value as PlaylistData);
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user