Mirror/SponsorBlock
1
0
Fork 0
mirror of https://github.com/ajayyy/SponsorBlock.git synced 2025-12-11 22:17:21 +03:00
Code Issues Packages Projects Releases Wiki Activity

Fix loading indicator in popup

Browse Source
This commit is contained in:
Ajay
2025-06-02 04:29:59 -04:00
parent e4a050f905
commit 550608cdb5
1 changed files with 58 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
src/popup/PopupComponent.tsx
View File

@@ -14,13 +14,23 @@ import { SegmentSubmissionComponent } from "./SegmentSubmissionComponent";
export enum LoadingStatus { export enum LoadingStatus {
Loading, Loading,
SegmentsFound, SegmentsFound,
NoSegmentsFound NoSegmentsFound,
ConnectionError,
StillLoading,
NoVideo
}
export interface LoadingData {
status: LoadingStatus;
code?: number;
} }
let loadRetryCount = 0; let loadRetryCount = 0;
export const PopupComponent = () => { export const PopupComponent = () => {
const [status, setStatus] = React.useState<LoadingStatus>(LoadingStatus.Loading); const [status, setStatus] = React.useState<LoadingData>({
status: LoadingStatus.Loading
});
const [extensionEnabled, setExtensionEnabled] = React.useState(!Config.config!.disableSkipping); const [extensionEnabled, setExtensionEnabled] = React.useState(!Config.config!.disableSkipping);
const [channelWhitelisted, setChannelWhitelisted] = React.useState<boolean | null>(null); const [channelWhitelisted, setChannelWhitelisted] = React.useState<boolean | null>(null);
const [showForceChannelCheckWarning, setShowForceChannelCheckWarning] = React.useState(false); const [showForceChannelCheckWarning, setShowForceChannelCheckWarning] = React.useState(false);
@@ -84,20 +94,11 @@ export const PopupComponent = () => {
</p> </p>
</header> </header>
{/* Loading text */} <p id="videoFound"
{status === LoadingStatus.Loading && ( className={"u-mZ grey-text " + (Config.config.cleanPopup ? "cleanPopupMargin" : "")}>
<p id="loadingIndicator" {getVideoStatusText(status)}
className={"u-mZ grey-text " + (Config.config.cleanPopup ? "cleanPopupMargin" : "")}> </p>
{chrome.i18n.getMessage("noVideoID")}
</p>
)}
{/* If the video was found in the database */}
{status !== LoadingStatus.Loading && (
<p id="videoFound"
className={"u-mZ grey-text " + (Config.config.cleanPopup ? "cleanPopupMargin" : "")}>
{status === LoadingStatus.SegmentsFound ? chrome.i18n.getMessage("sponsorFound") : chrome.i18n.getMessage("sponsor404")}
</p>
)}
<button id="refreshSegmentsButton" title={chrome.i18n.getMessage("refreshSegments")} onClick={(e) => { <button id="refreshSegmentsButton" title={chrome.i18n.getMessage("refreshSegments")} onClick={(e) => {
const stopAnimation = AnimationUtils.applyLoadingAnimation(e.currentTarget, 0.3); const stopAnimation = AnimationUtils.applyLoadingAnimation(e.currentTarget, 0.3);
@@ -276,8 +277,25 @@ export const PopupComponent = () => {
); );
}; };
function getVideoStatusText(status: LoadingData): string {
switch (status.status) {
case LoadingStatus.Loading:
return chrome.i18n.getMessage("Loading");
case LoadingStatus.SegmentsFound:
return chrome.i18n.getMessage("sponsorFound");
case LoadingStatus.NoSegmentsFound:
return chrome.i18n.getMessage("sponsor404");
case LoadingStatus.ConnectionError:
return chrome.i18n.getMessage("connectionError") + status.code;
case LoadingStatus.StillLoading:
return chrome.i18n.getMessage("segmentsStillLoading");
case LoadingStatus.NoVideo:
return chrome.i18n.getMessage("noVideoID");
}
}
interface SegmentsLoadedProps { interface SegmentsLoadedProps {
setStatus: (status: LoadingStatus) => void; setStatus: (status: LoadingData) => void;
setChannelWhitelisted: (whitelisted: boolean | null) => void; setChannelWhitelisted: (whitelisted: boolean | null) => void;
setVideoID: (videoID: string | null) => void; setVideoID: (videoID: string | null) => void;
setCurrentTime: (time: number) => void; setCurrentTime: (time: number) => void;
@@ -298,7 +316,9 @@ async function loadSegments(props: LoadSegmentsProps): Promise<void> {
// Handle error if it exists // Handle error if it exists
chrome.runtime.lastError; chrome.runtime.lastError;
props.setStatus(LoadingStatus.NoSegmentsFound); props.setStatus({
status: LoadingStatus.NoVideo,
});
if (!props.updating) { if (!props.updating) {
loadRetryCount++; loadRetryCount++;
@@ -310,7 +330,26 @@ async function loadSegments(props: LoadSegmentsProps): Promise<void> {
} }
function segmentsLoaded(response: IsInfoFoundMessageResponse, props: SegmentsLoadedProps): void { function segmentsLoaded(response: IsInfoFoundMessageResponse, props: SegmentsLoadedProps): void {
props.setStatus(response.sponsorTimes?.length > 0 ? LoadingStatus.SegmentsFound : LoadingStatus.NoSegmentsFound); if (response.found) {
props.setStatus({
status: LoadingStatus.SegmentsFound
});
} else if (response.status === 404 || response.status === 200) {
props.setStatus({
status: LoadingStatus.NoSegmentsFound
});
} else if (response.status) {
props.setStatus({
status: LoadingStatus.ConnectionError,
code: response.status
});
} else {
props.setStatus({
status: LoadingStatus.StillLoading
});
}
props.setVideoID(response.videoID); props.setVideoID(response.videoID);
props.setCurrentTime(response.time); props.setCurrentTime(response.time);
props.setChannelWhitelisted(response.channelWhitelisted); props.setChannelWhitelisted(response.channelWhitelisted);