refactor: migrate browser scripts to ts
This commit is contained in:
@@ -1,28 +1,24 @@
|
|||||||
;(function () {
|
"use strict";
|
||||||
const toggleDropdown = () => {
|
(() => {
|
||||||
const dropdown = document.getElementById('watchlist-dropdown')
|
const toggleDropdown = () => {
|
||||||
if (!dropdown) {
|
const dropdown = document.getElementById('watchlist-dropdown');
|
||||||
return
|
if (!dropdown) {
|
||||||
}
|
return;
|
||||||
|
}
|
||||||
dropdown.classList.toggle('open')
|
dropdown.classList.toggle('open');
|
||||||
}
|
};
|
||||||
|
window.toggleDropdown = toggleDropdown;
|
||||||
window.toggleDropdown = toggleDropdown
|
document.addEventListener('click', (event) => {
|
||||||
|
const dropdown = document.getElementById('watchlist-dropdown');
|
||||||
document.addEventListener('click', (event) => {
|
if (!dropdown) {
|
||||||
const dropdown = document.getElementById('watchlist-dropdown')
|
return;
|
||||||
if (!dropdown) {
|
}
|
||||||
return
|
const target = event.target;
|
||||||
}
|
if (!(target instanceof Node)) {
|
||||||
|
return;
|
||||||
const target = event.target
|
}
|
||||||
if (!(target instanceof Node)) {
|
if (!dropdown.contains(target)) {
|
||||||
return
|
dropdown.classList.remove('open');
|
||||||
}
|
}
|
||||||
|
});
|
||||||
if (!dropdown.contains(target)) {
|
})();
|
||||||
dropdown.classList.remove('open')
|
|
||||||
}
|
|
||||||
})
|
|
||||||
})()
|
|
||||||
|
|||||||
@@ -1,19 +1,23 @@
|
|||||||
|
"use strict";
|
||||||
function copyRecoveryKey(keyElementId, feedbackElementId) {
|
function copyRecoveryKey(keyElementId, feedbackElementId) {
|
||||||
var keyElement = document.getElementById(keyElementId)
|
const keyElement = document.getElementById(keyElementId);
|
||||||
var feedbackElement = document.getElementById(feedbackElementId)
|
const feedbackElement = document.getElementById(feedbackElementId);
|
||||||
|
if (!keyElement || !feedbackElement) {
|
||||||
if (!keyElement || !feedbackElement) {
|
return;
|
||||||
return
|
}
|
||||||
}
|
const key = keyElement.textContent || '';
|
||||||
|
navigator.clipboard
|
||||||
var key = keyElement.textContent || ''
|
.writeText(key)
|
||||||
navigator.clipboard.writeText(key).then(function () {
|
.then(() => {
|
||||||
feedbackElement.textContent = 'Recovery key copied.'
|
feedbackElement.textContent = 'Recovery key copied.';
|
||||||
}).catch(function () {
|
})
|
||||||
feedbackElement.textContent = 'Copy failed. Select and copy manually.'
|
.catch(() => {
|
||||||
})
|
feedbackElement.textContent = 'Copy failed. Select and copy manually.';
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function confirmDangerAction(message) {
|
function confirmDangerAction(message) {
|
||||||
return window.confirm(message)
|
return window.confirm(message);
|
||||||
}
|
}
|
||||||
|
;
|
||||||
|
window.copyRecoveryKey = copyRecoveryKey;
|
||||||
|
window.confirmDangerAction = confirmDangerAction;
|
||||||
|
|||||||
@@ -1,26 +1,23 @@
|
|||||||
;(function () {
|
"use strict";
|
||||||
const setActiveTab = (clickedTab) => {
|
(() => {
|
||||||
const group = clickedTab.closest('[data-tab-group="discover"]')
|
const setActiveTab = (clickedTab) => {
|
||||||
if (!group) {
|
const group = clickedTab.closest('[data-tab-group="discover"]');
|
||||||
return
|
if (!group) {
|
||||||
}
|
return;
|
||||||
|
}
|
||||||
const triggers = group.querySelectorAll('[data-tab-trigger]')
|
const triggers = group.querySelectorAll('[data-tab-trigger]');
|
||||||
triggers.forEach((tab) => tab.classList.remove('active'))
|
triggers.forEach((tab) => tab.classList.remove('active'));
|
||||||
clickedTab.classList.add('active')
|
clickedTab.classList.add('active');
|
||||||
}
|
};
|
||||||
|
document.addEventListener('click', (event) => {
|
||||||
document.addEventListener('click', (event) => {
|
const target = event.target;
|
||||||
const target = event.target
|
if (!(target instanceof Element)) {
|
||||||
if (!(target instanceof Element)) {
|
return;
|
||||||
return
|
}
|
||||||
}
|
const trigger = target.closest('[data-tab-trigger]');
|
||||||
|
if (!trigger) {
|
||||||
const trigger = target.closest('[data-tab-trigger]')
|
return;
|
||||||
if (!trigger) {
|
}
|
||||||
return
|
setActiveTab(trigger);
|
||||||
}
|
});
|
||||||
|
})();
|
||||||
setActiveTab(trigger)
|
|
||||||
})
|
|
||||||
})()
|
|
||||||
|
|||||||
@@ -1,108 +1,109 @@
|
|||||||
(function() {
|
"use strict";
|
||||||
if (window.searchInitialized) return
|
(() => {
|
||||||
window.searchInitialized = true
|
const globalWindow = window;
|
||||||
|
if (globalWindow.searchInitialized) {
|
||||||
let searchTimeout
|
return;
|
||||||
const searchInput = document.getElementById('search-input')
|
}
|
||||||
const searchDropdown = document.getElementById('search-dropdown')
|
globalWindow.searchInitialized = true;
|
||||||
|
let searchTimeout;
|
||||||
if (searchInput) {
|
const searchInput = document.getElementById('search-input');
|
||||||
searchInput.addEventListener('input', function(e) {
|
const searchDropdown = document.getElementById('search-dropdown');
|
||||||
clearTimeout(searchTimeout)
|
if (!searchInput || !searchDropdown) {
|
||||||
const query = e.target.value.trim()
|
return;
|
||||||
|
}
|
||||||
if (query.length < 2) {
|
searchInput.addEventListener('input', (event) => {
|
||||||
searchDropdown.replaceChildren()
|
if (searchTimeout) {
|
||||||
return
|
window.clearTimeout(searchTimeout);
|
||||||
}
|
}
|
||||||
|
const target = event.target;
|
||||||
searchTimeout = setTimeout(() => {
|
if (!(target instanceof HTMLInputElement)) {
|
||||||
fetch('/api/search-quick?q=' + encodeURIComponent(query))
|
return;
|
||||||
.then(res => res.json())
|
}
|
||||||
.then(results => {
|
const query = target.value.trim();
|
||||||
if (!results || results.length === 0) {
|
if (query.length < 2) {
|
||||||
searchDropdown.replaceChildren()
|
searchDropdown.replaceChildren();
|
||||||
return
|
return;
|
||||||
}
|
}
|
||||||
|
searchTimeout = window.setTimeout(() => {
|
||||||
const searchResults = document.createElement('div')
|
fetch('/api/search-quick?q=' + encodeURIComponent(query))
|
||||||
searchResults.className = 'search-results'
|
.then((res) => res.json())
|
||||||
|
.then((results) => {
|
||||||
const title = document.createElement('div')
|
if (!results || results.length === 0) {
|
||||||
title.className = 'search-results-title'
|
searchDropdown.replaceChildren();
|
||||||
title.textContent = 'Anime'
|
return;
|
||||||
searchResults.appendChild(title)
|
}
|
||||||
|
const searchResults = document.createElement('div');
|
||||||
results.forEach(r => {
|
searchResults.className = 'search-results';
|
||||||
const item = document.createElement('a')
|
const title = document.createElement('div');
|
||||||
item.className = 'search-result-item'
|
title.className = 'search-results-title';
|
||||||
item.setAttribute('href', '/anime/' + encodeURIComponent(String(r.id || '')))
|
title.textContent = 'Anime';
|
||||||
|
searchResults.appendChild(title);
|
||||||
if (isSafeImageUrl(r.image)) {
|
results.forEach((result) => {
|
||||||
const img = document.createElement('img')
|
const item = document.createElement('a');
|
||||||
img.className = 'search-result-thumb'
|
item.className = 'search-result-item';
|
||||||
img.setAttribute('src', r.image)
|
item.setAttribute('href', '/anime/' + encodeURIComponent(String(result.id || '')));
|
||||||
img.setAttribute('alt', String(r.title || ''))
|
if (isSafeImageUrl(result.image)) {
|
||||||
item.appendChild(img)
|
const img = document.createElement('img');
|
||||||
} else {
|
img.className = 'search-result-thumb';
|
||||||
const noImage = document.createElement('div')
|
img.setAttribute('src', result.image || '');
|
||||||
noImage.className = 'search-result-no-image'
|
img.setAttribute('alt', String(result.title || ''));
|
||||||
noImage.textContent = 'no image'
|
item.appendChild(img);
|
||||||
item.appendChild(noImage)
|
}
|
||||||
}
|
else {
|
||||||
|
const noImage = document.createElement('div');
|
||||||
const info = document.createElement('div')
|
noImage.className = 'search-result-no-image';
|
||||||
info.className = 'search-result-info'
|
noImage.textContent = 'no image';
|
||||||
|
item.appendChild(noImage);
|
||||||
const itemTitle = document.createElement('div')
|
}
|
||||||
itemTitle.className = 'search-result-title'
|
const info = document.createElement('div');
|
||||||
itemTitle.textContent = String(r.title || '')
|
info.className = 'search-result-info';
|
||||||
info.appendChild(itemTitle)
|
const itemTitle = document.createElement('div');
|
||||||
|
itemTitle.className = 'search-result-title';
|
||||||
const itemType = document.createElement('div')
|
itemTitle.textContent = String(result.title || '');
|
||||||
itemType.className = 'search-result-type'
|
info.appendChild(itemTitle);
|
||||||
itemType.textContent = String(r.type || '')
|
const itemType = document.createElement('div');
|
||||||
info.appendChild(itemType)
|
itemType.className = 'search-result-type';
|
||||||
|
itemType.textContent = String(result.type || '');
|
||||||
item.appendChild(info)
|
info.appendChild(itemType);
|
||||||
searchResults.appendChild(item)
|
item.appendChild(info);
|
||||||
|
searchResults.appendChild(item);
|
||||||
|
});
|
||||||
|
const viewAll = document.createElement('a');
|
||||||
|
viewAll.className = 'search-result-view-all';
|
||||||
|
viewAll.setAttribute('href', '/search?q=' + encodeURIComponent(query));
|
||||||
|
viewAll.textContent = 'View all results for ' + query;
|
||||||
|
searchResults.appendChild(viewAll);
|
||||||
|
searchDropdown.replaceChildren(searchResults);
|
||||||
})
|
})
|
||||||
|
.catch((err) => {
|
||||||
const viewAll = document.createElement('a')
|
console.error('Search error:', err);
|
||||||
viewAll.className = 'search-result-view-all'
|
});
|
||||||
viewAll.setAttribute('href', '/search?q=' + encodeURIComponent(query))
|
}, 300);
|
||||||
viewAll.textContent = 'View all results for ' + query
|
});
|
||||||
searchResults.appendChild(viewAll)
|
|
||||||
|
|
||||||
searchDropdown.replaceChildren(searchResults)
|
|
||||||
})
|
|
||||||
.catch(err => console.error('Search error:', err))
|
|
||||||
}, 300)
|
|
||||||
})
|
|
||||||
|
|
||||||
searchInput.addEventListener('blur', () => {
|
searchInput.addEventListener('blur', () => {
|
||||||
setTimeout(() => {
|
window.setTimeout(() => {
|
||||||
searchDropdown.replaceChildren()
|
searchDropdown.replaceChildren();
|
||||||
}, 200)
|
}, 200);
|
||||||
})
|
});
|
||||||
|
document.addEventListener('click', (event) => {
|
||||||
document.addEventListener('click', (e) => {
|
const target = event.target;
|
||||||
if (!e.target.closest('.header-search-wrapper')) {
|
if (!(target instanceof Element)) {
|
||||||
searchDropdown.replaceChildren()
|
return;
|
||||||
}
|
}
|
||||||
})
|
if (!target.closest('.header-search-wrapper')) {
|
||||||
}
|
searchDropdown.replaceChildren();
|
||||||
|
}
|
||||||
function isSafeImageUrl(rawUrl) {
|
});
|
||||||
if (!rawUrl || typeof rawUrl !== 'string') {
|
function isSafeImageUrl(rawUrl) {
|
||||||
return false
|
if (!rawUrl || typeof rawUrl !== 'string') {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
const parsed = new URL(rawUrl, window.location.origin);
|
||||||
|
return parsed.protocol === 'https:' || parsed.protocol === 'http:';
|
||||||
|
}
|
||||||
|
catch {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
})();
|
||||||
try {
|
|
||||||
const parsed = new URL(rawUrl, window.location.origin)
|
|
||||||
return parsed.protocol === 'https:' || parsed.protocol === 'http:'
|
|
||||||
} catch {
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})()
|
|
||||||
|
|||||||
@@ -1,240 +1,195 @@
|
|||||||
;(function () {
|
"use strict";
|
||||||
const jstOffsetMinutes = 9 * 60
|
(() => {
|
||||||
|
const jstOffsetMinutes = 9 * 60;
|
||||||
const parseBroadcastTime = (value) => {
|
const parseBroadcastTime = (value) => {
|
||||||
if (!value || typeof value !== 'string') {
|
if (!value || typeof value !== 'string') {
|
||||||
return null
|
return null;
|
||||||
}
|
}
|
||||||
|
const match = value.trim().match(/^(\d{1,2}):(\d{2})$/);
|
||||||
const match = value.trim().match(/^(\d{1,2}):(\d{2})$/)
|
if (!match) {
|
||||||
if (!match) {
|
return null;
|
||||||
return null
|
}
|
||||||
}
|
const hour = Number.parseInt(match[1], 10);
|
||||||
|
const minute = Number.parseInt(match[2], 10);
|
||||||
const hour = Number.parseInt(match[1], 10)
|
if (Number.isNaN(hour) || Number.isNaN(minute) || hour < 0 || hour > 23 || minute < 0 || minute > 59) {
|
||||||
const minute = Number.parseInt(match[2], 10)
|
return null;
|
||||||
if (Number.isNaN(hour) || Number.isNaN(minute) || hour < 0 || hour > 23 || minute < 0 || minute > 59) {
|
}
|
||||||
return null
|
return { hour, minute };
|
||||||
}
|
};
|
||||||
|
const isJstTimezone = (timezone) => {
|
||||||
return { hour, minute }
|
if (!timezone) {
|
||||||
}
|
return true;
|
||||||
|
}
|
||||||
const isJstTimezone = (timezone) => {
|
const normalized = timezone.trim().toLowerCase();
|
||||||
if (!timezone) {
|
return normalized === 'asia/tokyo' || normalized === 'jst';
|
||||||
return true
|
};
|
||||||
}
|
const parseFromStructuredAttrs = (node) => {
|
||||||
|
const day = node.getAttribute('data-broadcast-day');
|
||||||
const normalized = timezone.trim().toLowerCase()
|
const time = node.getAttribute('data-broadcast-time');
|
||||||
return normalized === 'asia/tokyo' || normalized === 'jst'
|
const timezone = node.getAttribute('data-broadcast-timezone');
|
||||||
}
|
if (!day || !time || !isJstTimezone(timezone)) {
|
||||||
|
return null;
|
||||||
const parseFromStructuredAttrs = (node) => {
|
}
|
||||||
const day = node.getAttribute('data-broadcast-day')
|
const parsedTime = parseBroadcastTime(time);
|
||||||
const time = node.getAttribute('data-broadcast-time')
|
if (!parsedTime) {
|
||||||
const timezone = node.getAttribute('data-broadcast-timezone')
|
return null;
|
||||||
|
}
|
||||||
if (!day || !time || !isJstTimezone(timezone)) {
|
return { day: day.trim(), hour: parsedTime.hour, minute: parsedTime.minute };
|
||||||
return null
|
};
|
||||||
}
|
const parseBroadcast = (text) => {
|
||||||
|
if (!text || typeof text !== 'string') {
|
||||||
const parsedTime = parseBroadcastTime(time)
|
return null;
|
||||||
if (!parsedTime) {
|
}
|
||||||
return null
|
const match = text.match(/^(.*) at (\d{1,2}):(\d{2}) \(JST\)$/i);
|
||||||
}
|
if (!match) {
|
||||||
|
return null;
|
||||||
return { day: day.trim(), hour: parsedTime.hour, minute: parsedTime.minute }
|
}
|
||||||
}
|
const day = match[1].trim();
|
||||||
|
const hour = Number.parseInt(match[2], 10);
|
||||||
const parseBroadcast = (text) => {
|
const minute = Number.parseInt(match[3], 10);
|
||||||
if (!text || typeof text !== 'string') {
|
if (Number.isNaN(hour) || Number.isNaN(minute)) {
|
||||||
return null
|
return null;
|
||||||
}
|
}
|
||||||
|
if (hour < 0 || hour > 23 || minute < 0 || minute > 59) {
|
||||||
const match = text.match(/^(.*) at (\d{1,2}):(\d{2}) \(JST\)$/i)
|
return null;
|
||||||
if (!match) {
|
}
|
||||||
return null
|
return { day, hour, minute };
|
||||||
}
|
};
|
||||||
|
const normalizeDay = (day) => {
|
||||||
const day = match[1].trim()
|
const key = day.trim().toLowerCase().replace(/s$/, '');
|
||||||
const hour = Number.parseInt(match[2], 10)
|
const days = {
|
||||||
const minute = Number.parseInt(match[3], 10)
|
mon: 1,
|
||||||
|
monday: 1,
|
||||||
if (Number.isNaN(hour) || Number.isNaN(minute)) {
|
tue: 2,
|
||||||
return null
|
tues: 2,
|
||||||
}
|
tuesday: 2,
|
||||||
|
wed: 3,
|
||||||
if (hour < 0 || hour > 23 || minute < 0 || minute > 59) {
|
wednesday: 3,
|
||||||
return null
|
thu: 4,
|
||||||
}
|
thur: 4,
|
||||||
|
thurs: 4,
|
||||||
return { day, hour, minute }
|
thursday: 4,
|
||||||
}
|
fri: 5,
|
||||||
|
friday: 5,
|
||||||
const normalizeDay = (day) => {
|
sat: 6,
|
||||||
const key = day.trim().toLowerCase().replace(/s$/, '')
|
saturday: 6,
|
||||||
const days = {
|
sun: 0,
|
||||||
mon: 1,
|
sunday: 0,
|
||||||
monday: 1,
|
};
|
||||||
tue: 2,
|
if (typeof days[key] !== 'number') {
|
||||||
tues: 2,
|
return null;
|
||||||
tuesday: 2,
|
}
|
||||||
wed: 3,
|
return days[key];
|
||||||
wednesday: 3,
|
};
|
||||||
thu: 4,
|
const convertToLocal = (parsed, localOffsetMinutes) => {
|
||||||
thur: 4,
|
const sourceMinutes = parsed.hour * 60 + parsed.minute;
|
||||||
thurs: 4,
|
const diff = jstOffsetMinutes - localOffsetMinutes;
|
||||||
thursday: 4,
|
const localTotal = sourceMinutes - diff;
|
||||||
fri: 5,
|
const dayShift = Math.floor(localTotal / 1440);
|
||||||
friday: 5,
|
const normalizedMinutes = ((localTotal % 1440) + 1440) % 1440;
|
||||||
sat: 6,
|
const localHour = Math.floor(normalizedMinutes / 60);
|
||||||
saturday: 6,
|
const localMinute = normalizedMinutes % 60;
|
||||||
sun: 0,
|
const sourceDayIndex = normalizeDay(parsed.day);
|
||||||
sunday: 0,
|
if (sourceDayIndex === null) {
|
||||||
}
|
return null;
|
||||||
|
}
|
||||||
if (typeof days[key] !== 'number') {
|
const localDayIndex = ((sourceDayIndex + dayShift) % 7 + 7) % 7;
|
||||||
return null
|
const localDay = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'][localDayIndex];
|
||||||
}
|
const time = `${localHour.toString().padStart(2, '0')}:${localMinute.toString().padStart(2, '0')}`;
|
||||||
|
return `${localDay} at ${time} (Local)`;
|
||||||
return days[key]
|
};
|
||||||
}
|
const nextAiringUTC = (parsed) => {
|
||||||
|
const targetDay = normalizeDay(parsed.day);
|
||||||
const convertToLocal = (parsed, localOffsetMinutes) => {
|
if (targetDay === null) {
|
||||||
const sourceMinutes = parsed.hour * 60 + parsed.minute
|
return null;
|
||||||
const diff = jstOffsetMinutes - localOffsetMinutes
|
}
|
||||||
const localTotal = sourceMinutes - diff
|
const now = new Date();
|
||||||
|
const jstNow = new Date(now.getTime() + jstOffsetMinutes * 60 * 1000);
|
||||||
const dayShift = Math.floor(localTotal / 1440)
|
const currentDay = jstNow.getUTCDay();
|
||||||
const normalizedMinutes = ((localTotal % 1440) + 1440) % 1440
|
const currentMinuteOfDay = jstNow.getUTCHours() * 60 + jstNow.getUTCMinutes();
|
||||||
const localHour = Math.floor(normalizedMinutes / 60)
|
const targetMinuteOfDay = parsed.hour * 60 + parsed.minute;
|
||||||
const localMinute = normalizedMinutes % 60
|
let dayDelta = (targetDay - currentDay + 7) % 7;
|
||||||
|
if (dayDelta === 0 && targetMinuteOfDay <= currentMinuteOfDay) {
|
||||||
const sourceDayIndex = normalizeDay(parsed.day)
|
dayDelta = 7;
|
||||||
if (sourceDayIndex === null) {
|
}
|
||||||
return null
|
const minuteDelta = dayDelta * 1440 + (targetMinuteOfDay - currentMinuteOfDay);
|
||||||
}
|
return new Date(now.getTime() + minuteDelta * 60 * 1000);
|
||||||
|
};
|
||||||
const localDayIndex = ((sourceDayIndex + dayShift) % 7 + 7) % 7
|
const formatRelative = (value, unit) => {
|
||||||
const localDay = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'][localDayIndex]
|
if (typeof Intl !== 'undefined' && typeof Intl.RelativeTimeFormat === 'function') {
|
||||||
|
const formatter = new Intl.RelativeTimeFormat(undefined, { numeric: 'auto' });
|
||||||
const time = `${localHour.toString().padStart(2, '0')}:${localMinute.toString().padStart(2, '0')}`
|
return formatter.format(value, unit);
|
||||||
return `${localDay} at ${time} (Local)`
|
}
|
||||||
}
|
const suffix = value === 1 ? unit : `${unit}s`;
|
||||||
|
return `in ${value} ${suffix}`;
|
||||||
const nextAiringUTC = (parsed) => {
|
};
|
||||||
const targetDay = normalizeDay(parsed.day)
|
const relativeText = (target) => {
|
||||||
if (targetDay === null) {
|
const diffMs = target.getTime() - Date.now();
|
||||||
return null
|
if (diffMs <= 0) {
|
||||||
}
|
return 'soon';
|
||||||
|
}
|
||||||
const now = new Date()
|
const minutes = Math.ceil(diffMs / 60000);
|
||||||
const jstNow = new Date(now.getTime() + jstOffsetMinutes * 60 * 1000)
|
if (minutes < 60) {
|
||||||
|
return formatRelative(minutes, 'minute');
|
||||||
const currentDay = jstNow.getUTCDay()
|
}
|
||||||
const currentMinuteOfDay = jstNow.getUTCHours() * 60 + jstNow.getUTCMinutes()
|
const hours = Math.ceil(minutes / 60);
|
||||||
const targetMinuteOfDay = parsed.hour * 60 + parsed.minute
|
if (hours < 36) {
|
||||||
|
return formatRelative(hours, 'hour');
|
||||||
let dayDelta = (targetDay - currentDay + 7) % 7
|
}
|
||||||
if (dayDelta === 0 && targetMinuteOfDay <= currentMinuteOfDay) {
|
const days = Math.ceil(hours / 24);
|
||||||
dayDelta = 7
|
return formatRelative(days, 'day');
|
||||||
}
|
};
|
||||||
|
const localDateTimeText = (date) => {
|
||||||
const minuteDelta = dayDelta * 1440 + (targetMinuteOfDay - currentMinuteOfDay)
|
const formatter = new Intl.DateTimeFormat(undefined, {
|
||||||
return new Date(now.getTime() + minuteDelta * 60 * 1000)
|
weekday: 'short',
|
||||||
}
|
hour: '2-digit',
|
||||||
|
minute: '2-digit',
|
||||||
const relativeText = (target) => {
|
});
|
||||||
const diffMs = target.getTime() - Date.now()
|
return formatter.format(date);
|
||||||
if (diffMs <= 0) {
|
};
|
||||||
return 'soon'
|
const updateNextAiring = (node, parsed) => {
|
||||||
}
|
const card = node.closest('.notification-content');
|
||||||
|
if (!card) {
|
||||||
const minutes = Math.ceil(diffMs / 60000)
|
return;
|
||||||
if (minutes < 60) {
|
}
|
||||||
return formatRelative(minutes, 'minute')
|
const nextNode = card.querySelector('[data-next-airing]');
|
||||||
}
|
if (!(nextNode instanceof HTMLElement)) {
|
||||||
|
return;
|
||||||
const hours = Math.ceil(minutes / 60)
|
}
|
||||||
if (hours < 36) {
|
const nextDate = nextAiringUTC(parsed);
|
||||||
return formatRelative(hours, 'hour')
|
if (!nextDate) {
|
||||||
}
|
nextNode.remove();
|
||||||
|
return;
|
||||||
const days = Math.ceil(hours / 24)
|
}
|
||||||
return formatRelative(days, 'day')
|
nextNode.textContent = `Next episode ${relativeText(nextDate)} (${localDateTimeText(nextDate)})`;
|
||||||
}
|
};
|
||||||
|
const updateNode = (node, localOffsetMinutes) => {
|
||||||
const formatRelative = (value, unit) => {
|
const card = node.closest('.notification-content');
|
||||||
if (typeof Intl !== 'undefined' && typeof Intl.RelativeTimeFormat === 'function') {
|
const nextNode = card ? card.querySelector('[data-next-airing]') : null;
|
||||||
const formatter = new Intl.RelativeTimeFormat(undefined, { numeric: 'auto' })
|
const structured = parseFromStructuredAttrs(node);
|
||||||
return formatter.format(value, unit)
|
const source = node.getAttribute('data-jst-text');
|
||||||
}
|
const parsed = structured || parseBroadcast(source);
|
||||||
|
if (!parsed) {
|
||||||
const suffix = value === 1 ? unit : `${unit}s`
|
if (nextNode instanceof HTMLElement) {
|
||||||
return `in ${value} ${suffix}`
|
nextNode.remove();
|
||||||
}
|
}
|
||||||
|
return;
|
||||||
const localDateTimeText = (date) => {
|
}
|
||||||
const formatter = new Intl.DateTimeFormat(undefined, {
|
const converted = convertToLocal(parsed, localOffsetMinutes);
|
||||||
weekday: 'short',
|
if (!converted) {
|
||||||
hour: '2-digit',
|
if (nextNode instanceof HTMLElement) {
|
||||||
minute: '2-digit',
|
nextNode.remove();
|
||||||
})
|
}
|
||||||
return formatter.format(date)
|
return;
|
||||||
}
|
}
|
||||||
|
node.textContent = converted;
|
||||||
const updateNextAiring = (node, parsed) => {
|
updateNextAiring(node, parsed);
|
||||||
const card = node.closest('.notification-content')
|
};
|
||||||
if (!card) {
|
const updateAll = () => {
|
||||||
return
|
const localOffsetMinutes = -new Date().getTimezoneOffset();
|
||||||
}
|
const nodes = document.querySelectorAll('[data-jst-text]');
|
||||||
|
nodes.forEach((node) => updateNode(node, localOffsetMinutes));
|
||||||
const nextNode = card.querySelector('[data-next-airing]')
|
};
|
||||||
if (!(nextNode instanceof HTMLElement)) {
|
document.addEventListener('DOMContentLoaded', updateAll);
|
||||||
return
|
document.body.addEventListener('htmx:afterSwap', updateAll);
|
||||||
}
|
})();
|
||||||
|
|
||||||
const nextDate = nextAiringUTC(parsed)
|
|
||||||
if (!nextDate) {
|
|
||||||
nextNode.remove()
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
nextNode.textContent = `Next episode ${relativeText(nextDate)} (${localDateTimeText(nextDate)})`
|
|
||||||
}
|
|
||||||
|
|
||||||
const updateNode = (node, localOffsetMinutes) => {
|
|
||||||
const card = node.closest('.notification-content')
|
|
||||||
const nextNode = card ? card.querySelector('[data-next-airing]') : null
|
|
||||||
|
|
||||||
const structured = parseFromStructuredAttrs(node)
|
|
||||||
const source = node.getAttribute('data-jst-text')
|
|
||||||
const parsed = structured || parseBroadcast(source)
|
|
||||||
if (!parsed) {
|
|
||||||
if (nextNode instanceof HTMLElement) {
|
|
||||||
nextNode.remove()
|
|
||||||
}
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
const converted = convertToLocal(parsed, localOffsetMinutes)
|
|
||||||
if (!converted) {
|
|
||||||
if (nextNode instanceof HTMLElement) {
|
|
||||||
nextNode.remove()
|
|
||||||
}
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
node.textContent = converted
|
|
||||||
updateNextAiring(node, parsed)
|
|
||||||
}
|
|
||||||
|
|
||||||
const updateAll = () => {
|
|
||||||
const localOffsetMinutes = -new Date().getTimezoneOffset()
|
|
||||||
const nodes = document.querySelectorAll('[data-jst-text]')
|
|
||||||
nodes.forEach((node) => updateNode(node, localOffsetMinutes))
|
|
||||||
}
|
|
||||||
|
|
||||||
document.addEventListener('DOMContentLoaded', updateAll)
|
|
||||||
document.body.addEventListener('htmx:afterSwap', updateAll)
|
|
||||||
})()
|
|
||||||
|
|||||||
28
static/ts/anime.ts
Normal file
28
static/ts/anime.ts
Normal file
@@ -0,0 +1,28 @@
|
|||||||
|
((): void => {
|
||||||
|
const toggleDropdown = (): void => {
|
||||||
|
const dropdown = document.getElementById('watchlist-dropdown')
|
||||||
|
if (!dropdown) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
dropdown.classList.toggle('open')
|
||||||
|
}
|
||||||
|
|
||||||
|
;(window as Window & { toggleDropdown?: () => void }).toggleDropdown = toggleDropdown
|
||||||
|
|
||||||
|
document.addEventListener('click', (event: MouseEvent): void => {
|
||||||
|
const dropdown = document.getElementById('watchlist-dropdown')
|
||||||
|
if (!dropdown) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
const target = event.target
|
||||||
|
if (!(target instanceof Node)) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!dropdown.contains(target)) {
|
||||||
|
dropdown.classList.remove('open')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})()
|
||||||
25
static/ts/auth.ts
Normal file
25
static/ts/auth.ts
Normal file
@@ -0,0 +1,25 @@
|
|||||||
|
function copyRecoveryKey(keyElementId: string, feedbackElementId: string): void {
|
||||||
|
const keyElement = document.getElementById(keyElementId)
|
||||||
|
const feedbackElement = document.getElementById(feedbackElementId)
|
||||||
|
|
||||||
|
if (!keyElement || !feedbackElement) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
const key = keyElement.textContent || ''
|
||||||
|
navigator.clipboard
|
||||||
|
.writeText(key)
|
||||||
|
.then((): void => {
|
||||||
|
feedbackElement.textContent = 'Recovery key copied.'
|
||||||
|
})
|
||||||
|
.catch((): void => {
|
||||||
|
feedbackElement.textContent = 'Copy failed. Select and copy manually.'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
function confirmDangerAction(message: string): boolean {
|
||||||
|
return window.confirm(message)
|
||||||
|
}
|
||||||
|
|
||||||
|
;(window as Window & { copyRecoveryKey?: typeof copyRecoveryKey; confirmDangerAction?: typeof confirmDangerAction }).copyRecoveryKey = copyRecoveryKey
|
||||||
|
;(window as Window & { copyRecoveryKey?: typeof copyRecoveryKey; confirmDangerAction?: typeof confirmDangerAction }).confirmDangerAction = confirmDangerAction
|
||||||
26
static/ts/discover.ts
Normal file
26
static/ts/discover.ts
Normal file
@@ -0,0 +1,26 @@
|
|||||||
|
((): void => {
|
||||||
|
const setActiveTab = (clickedTab: Element): void => {
|
||||||
|
const group = clickedTab.closest('[data-tab-group="discover"]')
|
||||||
|
if (!group) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
const triggers = group.querySelectorAll('[data-tab-trigger]')
|
||||||
|
triggers.forEach((tab: Element): void => tab.classList.remove('active'))
|
||||||
|
clickedTab.classList.add('active')
|
||||||
|
}
|
||||||
|
|
||||||
|
document.addEventListener('click', (event: MouseEvent): void => {
|
||||||
|
const target = event.target
|
||||||
|
if (!(target instanceof Element)) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
const trigger = target.closest('[data-tab-trigger]')
|
||||||
|
if (!trigger) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
setActiveTab(trigger)
|
||||||
|
})
|
||||||
|
})()
|
||||||
127
static/ts/search.ts
Normal file
127
static/ts/search.ts
Normal file
@@ -0,0 +1,127 @@
|
|||||||
|
((): void => {
|
||||||
|
const globalWindow = window as Window & { searchInitialized?: boolean }
|
||||||
|
if (globalWindow.searchInitialized) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
globalWindow.searchInitialized = true
|
||||||
|
|
||||||
|
let searchTimeout: number | undefined
|
||||||
|
const searchInput = document.getElementById('search-input') as HTMLInputElement | null
|
||||||
|
const searchDropdown = document.getElementById('search-dropdown')
|
||||||
|
|
||||||
|
if (!searchInput || !searchDropdown) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
searchInput.addEventListener('input', (event: Event): void => {
|
||||||
|
if (searchTimeout) {
|
||||||
|
window.clearTimeout(searchTimeout)
|
||||||
|
}
|
||||||
|
|
||||||
|
const target = event.target
|
||||||
|
if (!(target instanceof HTMLInputElement)) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
const query = target.value.trim()
|
||||||
|
if (query.length < 2) {
|
||||||
|
searchDropdown.replaceChildren()
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
searchTimeout = window.setTimeout((): void => {
|
||||||
|
fetch('/api/search-quick?q=' + encodeURIComponent(query))
|
||||||
|
.then((res: Response) => res.json())
|
||||||
|
.then((results: Array<{ id?: number; image?: string; title?: string; type?: string }>): void => {
|
||||||
|
if (!results || results.length === 0) {
|
||||||
|
searchDropdown.replaceChildren()
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
const searchResults = document.createElement('div')
|
||||||
|
searchResults.className = 'search-results'
|
||||||
|
|
||||||
|
const title = document.createElement('div')
|
||||||
|
title.className = 'search-results-title'
|
||||||
|
title.textContent = 'Anime'
|
||||||
|
searchResults.appendChild(title)
|
||||||
|
|
||||||
|
results.forEach((result): void => {
|
||||||
|
const item = document.createElement('a')
|
||||||
|
item.className = 'search-result-item'
|
||||||
|
item.setAttribute('href', '/anime/' + encodeURIComponent(String(result.id || '')))
|
||||||
|
|
||||||
|
if (isSafeImageUrl(result.image)) {
|
||||||
|
const img = document.createElement('img')
|
||||||
|
img.className = 'search-result-thumb'
|
||||||
|
img.setAttribute('src', result.image || '')
|
||||||
|
img.setAttribute('alt', String(result.title || ''))
|
||||||
|
item.appendChild(img)
|
||||||
|
} else {
|
||||||
|
const noImage = document.createElement('div')
|
||||||
|
noImage.className = 'search-result-no-image'
|
||||||
|
noImage.textContent = 'no image'
|
||||||
|
item.appendChild(noImage)
|
||||||
|
}
|
||||||
|
|
||||||
|
const info = document.createElement('div')
|
||||||
|
info.className = 'search-result-info'
|
||||||
|
|
||||||
|
const itemTitle = document.createElement('div')
|
||||||
|
itemTitle.className = 'search-result-title'
|
||||||
|
itemTitle.textContent = String(result.title || '')
|
||||||
|
info.appendChild(itemTitle)
|
||||||
|
|
||||||
|
const itemType = document.createElement('div')
|
||||||
|
itemType.className = 'search-result-type'
|
||||||
|
itemType.textContent = String(result.type || '')
|
||||||
|
info.appendChild(itemType)
|
||||||
|
|
||||||
|
item.appendChild(info)
|
||||||
|
searchResults.appendChild(item)
|
||||||
|
})
|
||||||
|
|
||||||
|
const viewAll = document.createElement('a')
|
||||||
|
viewAll.className = 'search-result-view-all'
|
||||||
|
viewAll.setAttribute('href', '/search?q=' + encodeURIComponent(query))
|
||||||
|
viewAll.textContent = 'View all results for ' + query
|
||||||
|
searchResults.appendChild(viewAll)
|
||||||
|
|
||||||
|
searchDropdown.replaceChildren(searchResults)
|
||||||
|
})
|
||||||
|
.catch((err: unknown): void => {
|
||||||
|
console.error('Search error:', err)
|
||||||
|
})
|
||||||
|
}, 300)
|
||||||
|
})
|
||||||
|
|
||||||
|
searchInput.addEventListener('blur', (): void => {
|
||||||
|
window.setTimeout((): void => {
|
||||||
|
searchDropdown.replaceChildren()
|
||||||
|
}, 200)
|
||||||
|
})
|
||||||
|
|
||||||
|
document.addEventListener('click', (event: MouseEvent): void => {
|
||||||
|
const target = event.target
|
||||||
|
if (!(target instanceof Element)) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!target.closest('.header-search-wrapper')) {
|
||||||
|
searchDropdown.replaceChildren()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
function isSafeImageUrl(rawUrl?: string): boolean {
|
||||||
|
if (!rawUrl || typeof rawUrl !== 'string') {
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const parsed = new URL(rawUrl, window.location.origin)
|
||||||
|
return parsed.protocol === 'https:' || parsed.protocol === 'http:'
|
||||||
|
} catch {
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})()
|
||||||
246
static/ts/timezone.ts
Normal file
246
static/ts/timezone.ts
Normal file
@@ -0,0 +1,246 @@
|
|||||||
|
((): void => {
|
||||||
|
const jstOffsetMinutes = 9 * 60
|
||||||
|
|
||||||
|
type ParsedBroadcast = {
|
||||||
|
day: string
|
||||||
|
hour: number
|
||||||
|
minute: number
|
||||||
|
}
|
||||||
|
|
||||||
|
const parseBroadcastTime = (value: string | null): { hour: number; minute: number } | null => {
|
||||||
|
if (!value || typeof value !== 'string') {
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
|
||||||
|
const match = value.trim().match(/^(\d{1,2}):(\d{2})$/)
|
||||||
|
if (!match) {
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
|
||||||
|
const hour = Number.parseInt(match[1], 10)
|
||||||
|
const minute = Number.parseInt(match[2], 10)
|
||||||
|
if (Number.isNaN(hour) || Number.isNaN(minute) || hour < 0 || hour > 23 || minute < 0 || minute > 59) {
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
|
||||||
|
return { hour, minute }
|
||||||
|
}
|
||||||
|
|
||||||
|
const isJstTimezone = (timezone: string | null): boolean => {
|
||||||
|
if (!timezone) {
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
|
||||||
|
const normalized = timezone.trim().toLowerCase()
|
||||||
|
return normalized === 'asia/tokyo' || normalized === 'jst'
|
||||||
|
}
|
||||||
|
|
||||||
|
const parseFromStructuredAttrs = (node: Element): ParsedBroadcast | null => {
|
||||||
|
const day = node.getAttribute('data-broadcast-day')
|
||||||
|
const time = node.getAttribute('data-broadcast-time')
|
||||||
|
const timezone = node.getAttribute('data-broadcast-timezone')
|
||||||
|
|
||||||
|
if (!day || !time || !isJstTimezone(timezone)) {
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
|
||||||
|
const parsedTime = parseBroadcastTime(time)
|
||||||
|
if (!parsedTime) {
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
|
||||||
|
return { day: day.trim(), hour: parsedTime.hour, minute: parsedTime.minute }
|
||||||
|
}
|
||||||
|
|
||||||
|
const parseBroadcast = (text: string | null): ParsedBroadcast | null => {
|
||||||
|
if (!text || typeof text !== 'string') {
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
|
||||||
|
const match = text.match(/^(.*) at (\d{1,2}):(\d{2}) \(JST\)$/i)
|
||||||
|
if (!match) {
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
|
||||||
|
const day = match[1].trim()
|
||||||
|
const hour = Number.parseInt(match[2], 10)
|
||||||
|
const minute = Number.parseInt(match[3], 10)
|
||||||
|
|
||||||
|
if (Number.isNaN(hour) || Number.isNaN(minute)) {
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
|
||||||
|
if (hour < 0 || hour > 23 || minute < 0 || minute > 59) {
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
|
||||||
|
return { day, hour, minute }
|
||||||
|
}
|
||||||
|
|
||||||
|
const normalizeDay = (day: string): number | null => {
|
||||||
|
const key = day.trim().toLowerCase().replace(/s$/, '')
|
||||||
|
const days: Record<string, number> = {
|
||||||
|
mon: 1,
|
||||||
|
monday: 1,
|
||||||
|
tue: 2,
|
||||||
|
tues: 2,
|
||||||
|
tuesday: 2,
|
||||||
|
wed: 3,
|
||||||
|
wednesday: 3,
|
||||||
|
thu: 4,
|
||||||
|
thur: 4,
|
||||||
|
thurs: 4,
|
||||||
|
thursday: 4,
|
||||||
|
fri: 5,
|
||||||
|
friday: 5,
|
||||||
|
sat: 6,
|
||||||
|
saturday: 6,
|
||||||
|
sun: 0,
|
||||||
|
sunday: 0,
|
||||||
|
}
|
||||||
|
|
||||||
|
if (typeof days[key] !== 'number') {
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
|
||||||
|
return days[key]
|
||||||
|
}
|
||||||
|
|
||||||
|
const convertToLocal = (parsed: ParsedBroadcast, localOffsetMinutes: number): string | null => {
|
||||||
|
const sourceMinutes = parsed.hour * 60 + parsed.minute
|
||||||
|
const diff = jstOffsetMinutes - localOffsetMinutes
|
||||||
|
const localTotal = sourceMinutes - diff
|
||||||
|
|
||||||
|
const dayShift = Math.floor(localTotal / 1440)
|
||||||
|
const normalizedMinutes = ((localTotal % 1440) + 1440) % 1440
|
||||||
|
const localHour = Math.floor(normalizedMinutes / 60)
|
||||||
|
const localMinute = normalizedMinutes % 60
|
||||||
|
|
||||||
|
const sourceDayIndex = normalizeDay(parsed.day)
|
||||||
|
if (sourceDayIndex === null) {
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
|
||||||
|
const localDayIndex = ((sourceDayIndex + dayShift) % 7 + 7) % 7
|
||||||
|
const localDay = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'][localDayIndex]
|
||||||
|
|
||||||
|
const time = `${localHour.toString().padStart(2, '0')}:${localMinute.toString().padStart(2, '0')}`
|
||||||
|
return `${localDay} at ${time} (Local)`
|
||||||
|
}
|
||||||
|
|
||||||
|
const nextAiringUTC = (parsed: ParsedBroadcast): Date | null => {
|
||||||
|
const targetDay = normalizeDay(parsed.day)
|
||||||
|
if (targetDay === null) {
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
|
||||||
|
const now = new Date()
|
||||||
|
const jstNow = new Date(now.getTime() + jstOffsetMinutes * 60 * 1000)
|
||||||
|
|
||||||
|
const currentDay = jstNow.getUTCDay()
|
||||||
|
const currentMinuteOfDay = jstNow.getUTCHours() * 60 + jstNow.getUTCMinutes()
|
||||||
|
const targetMinuteOfDay = parsed.hour * 60 + parsed.minute
|
||||||
|
|
||||||
|
let dayDelta = (targetDay - currentDay + 7) % 7
|
||||||
|
if (dayDelta === 0 && targetMinuteOfDay <= currentMinuteOfDay) {
|
||||||
|
dayDelta = 7
|
||||||
|
}
|
||||||
|
|
||||||
|
const minuteDelta = dayDelta * 1440 + (targetMinuteOfDay - currentMinuteOfDay)
|
||||||
|
return new Date(now.getTime() + minuteDelta * 60 * 1000)
|
||||||
|
}
|
||||||
|
|
||||||
|
const formatRelative = (value: number, unit: Intl.RelativeTimeFormatUnit): string => {
|
||||||
|
if (typeof Intl !== 'undefined' && typeof Intl.RelativeTimeFormat === 'function') {
|
||||||
|
const formatter = new Intl.RelativeTimeFormat(undefined, { numeric: 'auto' })
|
||||||
|
return formatter.format(value, unit)
|
||||||
|
}
|
||||||
|
|
||||||
|
const suffix = value === 1 ? unit : `${unit}s`
|
||||||
|
return `in ${value} ${suffix}`
|
||||||
|
}
|
||||||
|
|
||||||
|
const relativeText = (target: Date): string => {
|
||||||
|
const diffMs = target.getTime() - Date.now()
|
||||||
|
if (diffMs <= 0) {
|
||||||
|
return 'soon'
|
||||||
|
}
|
||||||
|
|
||||||
|
const minutes = Math.ceil(diffMs / 60000)
|
||||||
|
if (minutes < 60) {
|
||||||
|
return formatRelative(minutes, 'minute')
|
||||||
|
}
|
||||||
|
|
||||||
|
const hours = Math.ceil(minutes / 60)
|
||||||
|
if (hours < 36) {
|
||||||
|
return formatRelative(hours, 'hour')
|
||||||
|
}
|
||||||
|
|
||||||
|
const days = Math.ceil(hours / 24)
|
||||||
|
return formatRelative(days, 'day')
|
||||||
|
}
|
||||||
|
|
||||||
|
const localDateTimeText = (date: Date): string => {
|
||||||
|
const formatter = new Intl.DateTimeFormat(undefined, {
|
||||||
|
weekday: 'short',
|
||||||
|
hour: '2-digit',
|
||||||
|
minute: '2-digit',
|
||||||
|
})
|
||||||
|
return formatter.format(date)
|
||||||
|
}
|
||||||
|
|
||||||
|
const updateNextAiring = (node: Element, parsed: ParsedBroadcast): void => {
|
||||||
|
const card = node.closest('.notification-content')
|
||||||
|
if (!card) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
const nextNode = card.querySelector('[data-next-airing]')
|
||||||
|
if (!(nextNode instanceof HTMLElement)) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
const nextDate = nextAiringUTC(parsed)
|
||||||
|
if (!nextDate) {
|
||||||
|
nextNode.remove()
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
nextNode.textContent = `Next episode ${relativeText(nextDate)} (${localDateTimeText(nextDate)})`
|
||||||
|
}
|
||||||
|
|
||||||
|
const updateNode = (node: Element, localOffsetMinutes: number): void => {
|
||||||
|
const card = node.closest('.notification-content')
|
||||||
|
const nextNode = card ? card.querySelector('[data-next-airing]') : null
|
||||||
|
|
||||||
|
const structured = parseFromStructuredAttrs(node)
|
||||||
|
const source = node.getAttribute('data-jst-text')
|
||||||
|
const parsed = structured || parseBroadcast(source)
|
||||||
|
if (!parsed) {
|
||||||
|
if (nextNode instanceof HTMLElement) {
|
||||||
|
nextNode.remove()
|
||||||
|
}
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
const converted = convertToLocal(parsed, localOffsetMinutes)
|
||||||
|
if (!converted) {
|
||||||
|
if (nextNode instanceof HTMLElement) {
|
||||||
|
nextNode.remove()
|
||||||
|
}
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
node.textContent = converted
|
||||||
|
updateNextAiring(node, parsed)
|
||||||
|
}
|
||||||
|
|
||||||
|
const updateAll = (): void => {
|
||||||
|
const localOffsetMinutes = -new Date().getTimezoneOffset()
|
||||||
|
const nodes = document.querySelectorAll('[data-jst-text]')
|
||||||
|
nodes.forEach((node: Element): void => updateNode(node, localOffsetMinutes))
|
||||||
|
}
|
||||||
|
|
||||||
|
document.addEventListener('DOMContentLoaded', updateAll)
|
||||||
|
document.body.addEventListener('htmx:afterSwap', updateAll)
|
||||||
|
})()
|
||||||
Reference in New Issue
Block a user