- (
+
+ {trackSecondsMatchSourceTracks(tonieCard, tonieCard.tonieInfo.tracks?.length) ? (
+ <>
+ {
+ setIsTracklistVisible(false);
+ handlePlay(getTrackStartTime(tonieCard, index));
+ }}
+ />{" "}
+
+ ) : (
+ ""
+ )}{" "}
+
+
+ {index + 1}. {track}
+
+ {t("tonies.toniesaudioplayer.noTracks")}
+ )} +
+
+ }
+ onClick={() => openTracklist()}
+ disabled={!isLoaded || tonieCard.tonieInfo.tracks.length == 0}
+ />
+ }
+ onClick={handlePrevTrackButton}
+ disabled={!isLoaded}
+ />
+
+ ) : (
+
+
+ }
+ getPopupContainer={() => cardRef.current || document.body}
+ >
+
+ ) : (
+
+ {tonieCard.tonieInfo.episode}
+ {tonieCard.tonieInfo.series}
+ {currentTrackTitle && (
+ {currentTrackTitle}
+ )}
+
+
+
+ `${Math.floor((val || 0) / 60)}:${String(Math.floor((val || 0) % 60)).padStart(
+ 2,
+ "0"
+ )}`,
+ }}
+ marks={
+ tonieCard.trackSeconds
+ ? tonieCard.trackSeconds.reduce((acc: Record, sec: number) => {
+ acc[sec] = " ";
+ return acc;
+ }, {})
+ : undefined
+ }
+ style={{ marginBottom: 8 }}
+ />
+
+
+
+ {Math.floor(progress / 60) ?? 0}:{String(Math.floor(progress % 60) ?? 0).padStart(2, "0")}
+
+ {currentTrackTitle ? (
+
+ {Math.floor(duration / 60)}:{String(Math.floor(duration % 60)).padStart(2, "0")}
+
+ )}
+
+
+ {currentTrackNo}
+ {tonieCard.tonieInfo.tracks.length && <> / {tonieCard.tonieInfo.tracks.length}}
+
+ ) : (
+ ""
+ )}
+ {Number.isFinite(duration) && !isNaN(duration) && (
+
+ {playerCard}
+
+ ) : (
+ playerCard
+ )}
+
+ );
+};
+
+export default StandAloneAudioPlayer;
diff --git a/src/components/footer/AudioPlayerFooter.tsx b/src/components/footer/AudioPlayerFooter.tsx
index 4f6e6786..54428e84 100644
--- a/src/components/footer/AudioPlayerFooter.tsx
+++ b/src/components/footer/AudioPlayerFooter.tsx
@@ -1,6 +1,6 @@
import React, { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
-import { Button, Popover, Progress, Slider, theme } from "antd";
+import { Button, Popover, Progress, Slider, theme, Tooltip } from "antd";
import {
PlayCircleOutlined,
PauseCircleOutlined,
@@ -12,6 +12,7 @@ import {
ShrinkOutlined,
ArrowsAltOutlined,
CloseOutlined,
+ ExportOutlined,
} from "@ant-design/icons";
import { TeddyCloudApi } from "../../api";
@@ -21,6 +22,7 @@ import { useAudioContext } from "../audio/AudioContext";
import TonieInformationModal from "../utils/TonieInformationModal";
import { getLongestStringByPixelWidth } from "../../utils/helpers";
import { isIOS } from "../../utils/browserUtils";
+import { useNavigate } from "react-router";
const { useToken } = theme;
const useThemeToken = () => useToken().token;
@@ -37,6 +39,7 @@ interface AudioPlayerFooterProps {
const AudioPlayerFooter: React.FC
+ {tonieCardOrTAFRecord && "ruid" in tonieCardOrTAFRecord && (
+
+ {
+ const params = new URLSearchParams();
+ params.set("ruid", tonieCardOrTAFRecord.ruid);
+ params.set("position", timeStringToSeconds(currentPlayPositionFormat).toString());
+ navigate(`tonies/audioplayer?${params.toString()}`);
+ }}
+ />
+
+ )}
{showAudioPlayerMinimal ? (
-
+
) : (
-
+
)}
= ({ onVisibilityChang
placement="top"
style={{ right: 8 }}
>
-
-
+
);
const progressBar = (
@@ -479,6 +505,20 @@ const AudioPlayerFooter: React.FC
+
+ );
+
+ const CustomNextArrow: React.FC
+
+ );
+
+ const usePageLoaded = () => {
+ const [loaded, setLoaded] = useState(false);
+
+ useEffect(() => {
+ const handleLoad = () => setLoaded(true);
+
+ if (document.readyState === "complete") {
+ setLoaded(true);
+ } else {
+ window.addEventListener("load", handleLoad);
+ return () => window.removeEventListener("load", handleLoad);
+ }
+ }, []);
+
+ return loaded;
+ };
+
+ const allLoaded = usePageLoaded();
+
+ const settings = {
+ arrows: true,
+ infinite: false,
+ slidesToShow: 6,
+ slidesToScroll: 1,
+ draggable: true,
+ swipeToSlide: true,
+ dots: false,
+ touchMove: true,
+ nextArrow:
+
+ );
+ })}
+
+
+
+
+
+ setCurrentIndex(next)}>
+ {tonieCards.map((tonie) => {
+ const series =
+ tonie.sourceInfo?.series || tonie.tonieInfo.series || t("tonies.toniesaudioplayer.unknown");
+ const episode = tonie.sourceInfo?.episode || tonie.tonieInfo.episode || "";
+ const picture = tonie.sourceInfo?.picture || tonie.tonieInfo.picture || "/img_unknown.png";
+
+ return (
+
+ {episode}
+
+ }
+ />
+
+
+ setHoveredTonieRUID(tonie.ruid)}
+ onMouseLeave={() => setHoveredTonieRUID(null)}
+ >
+ 
+ {allLoaded && (
+ handlePlay(tonie)}
+ />
+ )}
+
+ }
+ >
+ {t("tonies.noData")}
-{t("tonies.noDataText")}
- - } - /> - ); - - if (loading) { - return
+ const listActions = (
+ <>
+ setIsHelpModalOpen(false)} />
+ )}
+ {showFilter ? (
+ setCollapsed(!collapsed)}
+ bordered={false}
+ />
+ ) : (
+ ""
+ )}
+
setIsHelpModalOpen(false)} />
- )}
- {showFilter ? (
- setCollapsed(!collapsed)}
- bordered={false}
- />
- ) : (
- ""
- )}
-
+
+ }
+ />
+ );
+
+ if (loading) {
+ return
+ } onClick={() => setIsHelpModalOpen(true)}>
+ {t("fileBrowser.help.showHelp")}
+
+
+ {isHelpModalOpen && (
+
- } onClick={() => setIsHelpModalOpen(true)}>
- {t("fileBrowser.help.showHelp")}
-
+
- {isHelpModalOpen && (
-
+ {selectionMode && (
+
+
+ {selectedTonies.length} {t("tonies.selectMode.selected")}
+
+ )}
+
+
+
+
+
+ {selectionMode && (
+
+ );
+
+ const noDataTonies = (
+
-
- {selectionMode && (
-
- {selectionMode && (
-
-
- {selectedTonies.length} {t("tonies.selectMode.selected")}
-
- )}
-
-
-
+ setSelectedTonies(tonieCards.map((c) => c.ruid))}
+ >
+ {t("tonies.selectMode.selectAll")}
+
+
+ setNoCloud(
+ tonieCards,
+ selectedTonies,
+ t,
+ overlay,
+ addNotification,
+ true,
+ handleUpdateCard
+ )
+ }
+ disabled={selectedTonies.length === 0}
+ >
+ {t("tonies.selectMode.setNoCloud")}
+
+ exportToCSV(tonieCards, selectedTonies, t)}
+ disabled={selectedTonies.length === 0}
+ >
+
+ {t("tonies.selectMode.exportCsv")}
-
+
- setSelectedTonies(tonieCards.map((c) => c.ruid))}
- >
- {t("tonies.selectMode.selectAll")}
-
-
- setNoCloud(
- tonieCards,
- selectedTonies,
- t,
- overlay,
- addNotification,
- true,
- handleUpdateCard
- )
- }
- disabled={selectedTonies.length === 0}
- >
- {t("tonies.selectMode.setNoCloud")}
-
- exportToCSV(tonieCards, selectedTonies, t)}
- disabled={selectedTonies.length === 0}
- >
-
- {t("tonies.selectMode.exportCsv")}
-
-
-
- )}
+ )}
+ {t("tonies.noData")}
+{t("tonies.noDataText")}
+ {!readOnly ? listActions : ""}
- {
icon: React.createElement(UserOutlined),
title: t("tonies.tonies.navigationTitle"),
},
+ {
+ key: "tonies-audio-player",
+ label: (
+ {
+ setNavOpen(false);
+ setSubNavOpen(false);
+ }}
+ >
+ {t("tonies.toniesaudioplayer.navigationTitle")}
+
+ ),
+ icon: React.createElement(PlayCircleOutlined),
+ title: t("tonies.toniesaudioplayer.navigationTitle"),
+ },
{
key: "encoder",
label: (
diff --git a/src/components/utils/TonieInformationModal.tsx b/src/components/utils/TonieInformationModal.tsx
index cd455a35..dcc4ccab 100644
--- a/src/components/utils/TonieInformationModal.tsx
+++ b/src/components/utils/TonieInformationModal.tsx
@@ -1,6 +1,6 @@
import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
-import { Modal, Typography, Button, Tooltip, Spin, theme } from "antd";
+import { Modal, Typography, Button, Tooltip, Spin, theme, List } from "antd";
import { DownloadOutlined, LoadingOutlined, PlayCircleOutlined } from "@ant-design/icons";
import { Record } from "../../types/fileBrowserTypes";
@@ -322,17 +322,19 @@ const TonieInformationModal: React.FC
-
- {"audioUrl" in tonieCardOrTAFRecord &&
- trackSecondsMatchSourceTracks(
- tonieCardOrTAFRecord,
- tonieCardOrTAFRecord.sourceInfo.tracks?.length
- ) ? (
- <>
+
- (
+
-
- {"audioUrl" in tonieCardOrTAFRecord &&
- trackSecondsMatchSourceTracks(
- tonieCardOrTAFRecord,
- tonieCardOrTAFRecord.tonieInfo.tracks?.length
- ) ? (
- <>
+
- (
+
+ + )} + /> ) : ( <> diff --git a/src/index.css b/src/index.css index fd34d574..2454a7e4 100644 --- a/src/index.css +++ b/src/index.css @@ -177,3 +177,12 @@ code { align-content: center; } /* end of workaround */ + +.pseudo-fullscreen { + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + z-index: 9999; +} diff --git a/src/pages/community/ChangelogPage.tsx b/src/pages/community/ChangelogPage.tsx index ee3e1f35..16f7c31a 100644 --- a/src/pages/community/ChangelogPage.tsx +++ b/src/pages/community/ChangelogPage.tsx @@ -48,6 +48,7 @@ export const ChangelogPage = () => { "gui: Stop auto scroll to top on page change when user manually scrolls", "gui: Show user entered model in tonies card header and information model if it's not found in tonies.(custom.)json", "gui: Added PluginTemplate download, thanks to b1u3n4z9u1 for preparing that template!", + "gui: Added Tonies Audio Player Page https://github.com/toniebox-reverse-engineering/teddycloud_web/issues/201", "gui: Some refactoring", ], commits: [ diff --git a/src/pages/tonies/ToniesAudioPlayerPage.tsx b/src/pages/tonies/ToniesAudioPlayerPage.tsx new file mode 100644 index 00000000..532025cd --- /dev/null +++ b/src/pages/tonies/ToniesAudioPlayerPage.tsx @@ -0,0 +1,216 @@ +import { useEffect, useState, useRef, useMemo } from "react"; +import { useLocation, useNavigate } from "react-router-dom"; +import { useTranslation } from "react-i18next"; +import { Tooltip, Button } from "antd"; +import { ExportOutlined, ImportOutlined } from "@ant-design/icons"; + +import { TonieCardProps } from "../../types/tonieTypes"; +import { defaultAPIConfig } from "../../config/defaultApiConfig"; +import { TeddyCloudApi } from "../../api"; + +import BreadcrumbWrapper, { StyledContent, StyledLayout, StyledSider } from "../../components/StyledComponents"; +import { ToniesSubNav } from "../../components/tonies/ToniesSubNav"; +import { useTeddyCloud } from "../../TeddyCloudContext"; +import { NotificationTypeEnum } from "../../types/teddyCloudNotificationTypes"; +import { useTonieboxContent } from "../../components/utils/OverlayContentDirectories"; +import { ToniesAudioPlayer } from "../../components/tonies/ToniesAudioPlayer"; +import LoadingSpinner from "../../components/utils/LoadingSpinner"; +import { useAudioContext } from "../../components/audio/AudioContext"; +const api = new TeddyCloudApi(defaultAPIConfig()); + +type ToniesAudioPlayerPageProps = { + standalone?: boolean; +}; + +export const ToniesAudioPlayerPage: React.FC+ {"audioUrl" in tonieCardOrTAFRecord && + trackSecondsMatchSourceTracks( + tonieCardOrTAFRecord, + tonieCardOrTAFRecord.tonieInfo?.tracks?.length + ) ? (+handlePlayPauseClick( import.meta.env.VITE_APP_TEDDYCLOUD_API_URL + @@ -374,15 +379,16 @@ const TonieInformationModal: React.FC = ({ getTrackStartTime(tonieCardOrTAFRecord, index) ) } - />{" "} - - ) : ( - "" - )}{" "} - {track} - - ))} - + /> + ) : null} + + + {index + 1}. {track} ++= ({ standalone = false }) => { + const location = useLocation(); + const navigate = useNavigate(); + const searchParams = new URLSearchParams(location.search); + const tonieRuid = searchParams.get("ruid"); + const startPosition = Number(searchParams.get("position")) || 0; + const linkOverlay = searchParams.get("overlay"); + + const { t } = useTranslation(); + const { addNotification } = useTeddyCloud(); + const { playAudio } = useAudioContext(); + const { overlay } = useTonieboxContent(linkOverlay); + + const contentRef = useRef (null); + + const [tonies, setTonies] = useState (0); + const [currentTonie, setCurrentTonie] = useState (); + const [playerKey, setPlayerKey] = useState(0); + + const openStandalone = () => { + if (currentTonie) { + const params = new URLSearchParams(); + params.set("ruid", currentTonie.ruid); + params.set("position", (currentPlayPosition ?? 0).toString()); + window.open(`../audioplayer?${params.toString()}`, "_blank"); + } else { + window.open("../audioplayer", "_blank"); + } + navigate("/"); + }; + useEffect(() => { + const fetchTonies = async () => { + setLoading(true); + try { + const tonieData = (await api.apiGetTagIndex(overlay ? overlay : "", true)).filter((item) => !item.hide); + setTonies( + tonieData.sort((a, b) => { + const seriesA = a.sourceInfo?.series || a.tonieInfo.series || "Unknown"; + const seriesB = b.sourceInfo?.series || b.tonieInfo.series || "Unknown"; + + if (seriesA < seriesB) return -1; + if (seriesA > seriesB) return 1; + + const episodeA = a.sourceInfo?.episode || a.tonieInfo.episode || ""; + const episodeB = b.sourceInfo?.episode || b.tonieInfo.episode || ""; + + if (episodeA < episodeB) return -1; + if (episodeA > episodeB) return 1; + + return 0; + }) + ); + } catch (error) { + addNotification( + NotificationTypeEnum.Error, + t("tonies.errorFetchingTonies"), + t("tonies.errorFetchingTonies") + ": " + error, + t("tonies.toniesaudioplayer.navigationTitle") + ); + console.log("error: fetching tonies failed: " + error); + } finally { + setLoading(false); + } + }; + + fetchTonies(); + }, [overlay]); + + const playableTonieCards = useMemo(() => { + return tonies + .filter((tonie) => tonie.type === "tag") + .filter((tonie) => tonie.hide === false) + .filter((tonie) => tonie.valid || tonie.source.startsWith("http")); + }, [tonies]); + + useEffect(() => { + if (tonieRuid && playableTonieCards) { + const tonie = playableTonieCards.find((t) => t.ruid === tonieRuid); + if (!tonie) { + return; + } + const newTonie = { + ...tonie, + tonieInfo: { + ...tonie.tonieInfo, + ...tonie.sourceInfo, + }, + }; + setCurrentTonie(newTonie); + setCurrentPlayPosition(startPosition); + setPlayerKey((prev) => prev + 1); + navigate(location.pathname, { replace: true }); + } + }, [location, playableTonieCards, tonieRuid, startPosition]); + + const toniesAudioPlayerContent = ( + + + ); + + return standalone ? ( + <> + +++ + {loading ? ( +{t("tonies.toniesaudioplayer.title")}
++ {currentTonie && !standalone && ( +++ + )} + {!standalone && ( +{ + const newTonie = { + ...currentTonie, + tonieInfo: { + ...currentTonie.tonieInfo, + ...currentTonie.sourceInfo, + }, + }; + playAudio( + import.meta.env.VITE_APP_TEDDYCLOUD_API_URL + newTonie.audioUrl, + newTonie.tonieInfo, + newTonie, + currentPlayPosition + ); + setCurrentTonie(undefined); + setCurrentPlayPosition(0); + setPlayerKey((prev) => prev + 1); + }} + /> + + } onClick={openStandalone} /> + + )} ++ ) : ( + setCurrentTonie(tonie)} + onPlayPositionChange={(pos) => setCurrentPlayPosition(pos)} + /> + )} + + {toniesAudioPlayerContent} + + ) : ( + <> + + ++ + + + ); +}; diff --git a/src/utils/browserUtils.tsx b/src/utils/browserUtils.tsx index 7477e0e2..180b1d22 100644 --- a/src/utils/browserUtils.tsx +++ b/src/utils/browserUtils.tsx @@ -1,3 +1,5 @@ +import { RefObject, useEffect, useState } from "react"; + export const isSafari = () => { const ua = navigator.userAgent.toLowerCase(); return ua.includes("safari") && !ua.includes("chrome"); @@ -21,6 +23,55 @@ export const isIOS = () => { ); }; +export function useFullscreen+ {toniesAudioPlayerContent} + (elementRef: RefObject ) { + const [isFullscreen, setIsFullscreen] = useState(false); + + useEffect(() => { + const handler = () => { + setIsFullscreen(!!document.fullscreenElement); + }; + + document.addEventListener("fullscreenchange", handler); + return () => document.removeEventListener("fullscreenchange", handler); + }, []); + + const enterFullscreen = () => { + const el = elementRef.current; + if (!el) return; + + if (isIOS()) { + setIsFullscreen(true); + } else if (el.requestFullscreen) { + try { + el.requestFullscreen(); + setIsFullscreen(true); + } catch (err) { + console.warn("Fullscreen request failed, using pseudo fullscreen fallback:", err); + setIsFullscreen(true); + } + } else { + setIsFullscreen(true); + } + }; + + const exitFullscreen = () => { + if (isIOS()) { + setIsFullscreen(false); + } else if (document.fullscreenElement) { + try { + document.exitFullscreen(); + } catch (err) { + console.warn("Exiting fullscreen failed, using pseudo fullscreen fallback:", err); + setIsFullscreen(false); + } + } else { + setIsFullscreen(false); + } + }; + + return { isFullscreen, enterFullscreen, exitFullscreen }; +} + export const isVolumeControlSupported = (): boolean => { const testAudio = document.createElement("audio"); try { diff --git a/vite.config.ts b/vite.config.ts index db599d4f..cfaa5645 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -47,7 +47,7 @@ export default defineConfig(({ command, mode }) => { "/custom_img": { target: proxyUrl, changeOrigin: true, - rewrite: (path) => path.replace(/^\/custom_img/, "/custom_img"), + secure: false, }, }, },
+ + )} + /> ) : ( <> @@ -356,17 +359,19 @@ const TonieInformationModal: React.FC+ {"audioUrl" in tonieCardOrTAFRecord && + trackSecondsMatchSourceTracks( + tonieCardOrTAFRecord, + tonieCardOrTAFRecord.sourceInfo.tracks?.length + ) ? (+handlePlayPauseClick( import.meta.env.VITE_APP_TEDDYCLOUD_API_URL + @@ -340,15 +342,16 @@ const TonieInformationModal: React.FC = ({ getTrackStartTime(tonieCardOrTAFRecord, index) ) } - />{" "} - - ) : ( - "" - )}{" "} - {track} - - ))} - + /> + ) : null} + + + {index + 1}. {track} ++= ({ ) : tonieCardOrTAFRecord.tonieInfo?.tracks && tonieCardOrTAFRecord.tonieInfo?.tracks.length > 0 ? ( <> {t("tonies.infoModal.tracklist")} - -
- {tonieCardOrTAFRecord.tonieInfo?.tracks.map((track, index) => (
-
-
- {"audioUrl" in tonieCardOrTAFRecord &&
- trackSecondsMatchSourceTracks(
- tonieCardOrTAFRecord,
- tonieCardOrTAFRecord.tonieInfo.tracks?.length
- ) ? (
- <>
+
-
- {sourceTracks.map((track, index) => (
-