mirror of
https://github.com/ajayyy/SponsorBlock.git
synced 2025-12-06 19:47:04 +03:00
Rewrite popup in react
This commit is contained in:
Ajay
209
public/popup-old.html
Normal file
209
public/popup-old.html
Normal file
@@ -0,0 +1,209 @@
|
||||
<!DOCTYPE html>
|
||||
<html id="sponsorBlockPopupHTML">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>__MSG_openPopup__</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link id="sponsorBlockPopupFont" href="/libs/Source+Sans+Pro.css" rel="stylesheet">
|
||||
<link id="sponsorBlockStyleSheet" href="popup.css" rel="stylesheet">
|
||||
<link id="sponsorBlockStyleSheet" href="shared.css" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body id="sponsorBlockPopupBody" style="visibility: hidden">
|
||||
<div id="sponsorblockPopup" class="sponsorBlockPageBody sb-preload">
|
||||
|
||||
<button id="sbCloseButton" title="__MSG_closePopup__" class="sbCloseButton hidden">
|
||||
<img src="icons/close.png" width="15" height="15" alt="Close icon">
|
||||
</button>
|
||||
|
||||
<div id="sbBetaServerWarning" class="hidden" title="__MSG_openOptionsPage__">
|
||||
__MSG_betaServerWarning__
|
||||
</div>
|
||||
|
||||
<header id="sbPopupLogo" class="sbPopupLogo">
|
||||
<img src="icons/IconSponsorBlocker256px.png" alt="SponsorBlock" width="40" height="40" id="sponsorBlockPopupLogo">
|
||||
<p class="u-mZ">SponsorBlock</p>
|
||||
</header>
|
||||
|
||||
<div id="videoInfo">
|
||||
<!-- Loading text -->
|
||||
<p id="loadingIndicator" class="u-mZ grey-text">__MSG_noVideoID__</p>
|
||||
<!-- If the video was found in the database -->
|
||||
<p id="videoFound" class="u-mZ grey-text"></p>
|
||||
<button id="refreshSegmentsButton" title="__MSG_refreshSegments__">
|
||||
<img src="/icons/refresh.svg" alt="Refresh icon" id="refreshSegments" />
|
||||
</button>
|
||||
<!-- Video Segments -->
|
||||
<div id="issueReporterContainer">
|
||||
<div id="issueReporterTabs" class="hidden">
|
||||
<span id="issueReporterTabSegments" class="sbSelected">
|
||||
<span>__MSG_SegmentsCap__</span>
|
||||
</span>
|
||||
<span id="issueReporterTabChapters">
|
||||
<span>__MSG_Chapters__</span>
|
||||
</span>
|
||||
</div>
|
||||
<div id="issueReporterTimeButtons"></div>
|
||||
<div id="issueReporterImportExport" class="hidden">
|
||||
<div id="importExportButtons">
|
||||
<button id="importSegmentsButton" title="__MSG_importSegments__">
|
||||
<img src="/icons/import.svg" alt="Import icon" id="importSegments" />
|
||||
</button>
|
||||
<button id="exportSegmentsButton" class="hidden" title="__MSG_exportSegments__">
|
||||
<img src="/icons/export.svg" alt="Export icon" id="exportSegments" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<span id="importSegmentsMenu" class="hidden">
|
||||
<textarea id="importSegmentsText" rows="5" style="width:80%"></textarea>
|
||||
|
||||
<button id="importSegmentsSubmit" title="__MSG_importSegments__">
|
||||
__MSG_Import__
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Toggle Box -->
|
||||
<div class="sbControlsMenu">
|
||||
<label id="whitelistButton" for="whitelistToggle" class="hidden sbControlsMenu-item" role="button" tabIndex="0">
|
||||
<input type="checkbox" style="display: none" id="whitelistToggle">
|
||||
<svg viewBox="0 0 24 24" width="23" height="23" class="SBWhitelistIcon sbControlsMenu-itemIcon">
|
||||
<path d="M24 10H14V0h-4v10H0v4h10v10h4V14h10z" />
|
||||
</svg>
|
||||
<span id="whitelistChannel">__MSG_whitelistChannel__</span>
|
||||
<span id="unwhitelistChannel" style="display: none">__MSG_removeFromWhitelist__</span>
|
||||
</label>
|
||||
<!--github: mbledkowski/toggle-switch-->
|
||||
<label id="disableExtension" for="toggleSwitch" class="toggleSwitchContainer sbControlsMenu-item" role="button" tabIndex="0">
|
||||
<span class="toggleSwitchContainer-switch">
|
||||
<input type="checkbox" style="display: none" id="toggleSwitch" checked>
|
||||
<span class="switchBg shadow"></span>
|
||||
<span class="switchBg white"></span>
|
||||
<span class="switchBg green"></span>
|
||||
<span class="switchDot"></span>
|
||||
</span>
|
||||
<span id="disableSkipping">__MSG_disableSkipping__</span>
|
||||
<span id="enableSkipping" style="display: none">__MSG_enableSkipping__</span>
|
||||
</label>
|
||||
<button id="optionsButton" class="sbControlsMenu-item" title="__MSG_optionsInfo__">
|
||||
<img src="/icons/settings.svg" alt="Settings icon" width="23" height="23" class="sbControlsMenu-itemIcon" id="sbPopupIconSettings" />
|
||||
__MSG_Options__
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<a id="whitelistForceCheck" class="hidden">
|
||||
__MSG_forceChannelCheckPopup__
|
||||
</a>
|
||||
|
||||
<!-- Submit box -->
|
||||
<div id="mainControls" style="display: none">
|
||||
<h1 class="sbHeader">
|
||||
__MSG_recordTimesDescription__
|
||||
</h1>
|
||||
<sub class="sponsorStartHint grey-text">__MSG_popupHint__</sub>
|
||||
<div style="text-align: center; margin: 8px 0;">
|
||||
<button id="sponsorStart" class="sbMediumButton" style="margin-right: 8px">__MSG_sponsorStart__</button>
|
||||
<button id="submitTimes" class="sbMediumButton" style="display: none">__MSG_OpenSubmissionMenu__</button>
|
||||
</div>
|
||||
<span id="submissionHint" style="display: none">__MSG_submissionEditHint__</span>
|
||||
</div>
|
||||
|
||||
<!-- Your Work box -->
|
||||
<div id="sbYourWorkBox" class="sbYourWorkBox">
|
||||
<h1 class="sbHeader" style="padding: 8px 15px;">
|
||||
__MSG_yourWork__
|
||||
</h1>
|
||||
<div class="sbYourWorkCols">
|
||||
<!-- Username -->
|
||||
<div id="usernameElement">
|
||||
<p class="u-mZ grey-text">__MSG_Username__:
|
||||
<!-- loading/errors -->
|
||||
<span id="setUsernameStatus" class="u-mZ white-text" style="display: none"></span>
|
||||
</p>
|
||||
<div id="setUsernameContainer">
|
||||
<p id="usernameValue"></p>
|
||||
<button id="setUsernameButton" title="__MSG_setUsername__">
|
||||
<img src="/icons/pencil.svg" alt="__MSG_setUsername__" width="16" height="16" id="sbPopupIconEdit">
|
||||
</button>
|
||||
<button id="copyUserID" title="__MSG_copyPublicID__">
|
||||
<img src="/icons/clipboard.svg" alt="__MSG_copyPublicID__" width="16" height="16" id="sbPopupIconCopyUserID">
|
||||
</button>
|
||||
</div>
|
||||
<div id="setUsername" style="display: none">
|
||||
<input id="usernameInput" placeholder="Username">
|
||||
<button id="submitUsername">
|
||||
<img src="/icons/check.svg" alt="__MSG_setUsername__" width="16" height="16" id="sbPopupIconCheck">
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Submissions -->
|
||||
<div id="sponsorTimesContributionsContainer" class="hidden">
|
||||
<p class="u-mZ grey-text">__MSG_Submissions__:</p>
|
||||
<p id="sponsorTimesContributionsDisplay" class="u-mZ">0</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p id="sponsorTimesViewsContainer" style="display: none" class="u-mZ sbStatsSentence">
|
||||
__MSG_savedPeopleFrom__
|
||||
<b>
|
||||
<span id="sponsorTimesViewsDisplay">0</span>
|
||||
</b>
|
||||
<span id="sponsorTimesViewsDisplayEndWord">__MSG_Segments__</span>
|
||||
<br />
|
||||
<span class="sbExtraInfo">
|
||||
(
|
||||
<b>
|
||||
<span id="sponsorTimesOthersTimeSavedDisplay">0</span>
|
||||
<span id="sponsorTimesOthersTimeSavedEndWord">__MSG_minsLower__</span>
|
||||
</b>
|
||||
<span>__MSG_youHaveSavedTimeEnd__</span>
|
||||
)
|
||||
</span>
|
||||
</p>
|
||||
<p id="sponsorTimesSkipsDoneContainer" style="display: none" class="u-mZ sbStatsSentence">
|
||||
__MSG_youHaveSkipped__
|
||||
<b>
|
||||
<span id="sponsorTimesSkipsDoneDisplay">0</span>
|
||||
</b>
|
||||
<span id="sponsorTimesSkipsDoneEndWord">__MSG_Segments__</span>
|
||||
<span class="sbExtraInfo">
|
||||
(
|
||||
<b>
|
||||
<span id="sponsorTimeSavedDisplay">0</span>
|
||||
<span id="sponsorTimeSavedEndWord">__MSG_minsLower__</span>
|
||||
</b>
|
||||
)
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div id="sponsorTimesDonateContainer" style="display: none; align-items: center; justify-content: center;">
|
||||
<img class="sbHeart" src="/icons/heart.svg" alt="Heart icon" />
|
||||
<a id="sbConsiderDonateLink" href="https://sponsor.ajay.app/donate" target="_blank" rel="noopener">
|
||||
__MSG_considerDonating__
|
||||
</a>
|
||||
<img id="sbCloseDonate" src="/icons/close.png" alt="__MSG_closeIcon__" height="8" style="padding-left: 5px; cursor: pointer;" />
|
||||
</div>
|
||||
|
||||
<footer id="sbFooter">
|
||||
<a id="helpButton">__MSG_help__</a>
|
||||
<a href="https://sponsor.ajay.app" target="_blank" rel="noopener">__MSG_website__</a>
|
||||
<a href="https://sponsor.ajay.app/stats" target="_blank" rel="noopener">__MSG_viewLeaderboard__</a>
|
||||
<br />
|
||||
<a href="https://github.com/ajayyy/SponsorBlock" target="_blank" rel="noopener">GitHub</a>
|
||||
<a href="https://discord.gg/SponsorBlock" target="_blank" rel="noopener">Discord</a>
|
||||
<a href="https://matrix.to/#/#sponsor:ajay.app?via=ajay.app&via=matrix.org&via=mozilla.org" target="_blank" rel="noopener">Matrix</a>
|
||||
<a href="https://sponsor.ajay.app/donate" target="_blank" rel="noopener" id="sbDonate">__MSG_Donate__</a>
|
||||
<br />
|
||||
<a id="debugLogs">__MSG_copyDebugLogs__</a>
|
||||
</footer>
|
||||
|
||||
<button id="showNoticeAgain" style="display: none">__MSG_showNotice__</button>
|
||||
|
||||
</div>
|
||||
<!-- Scripts that need to load after the html -->
|
||||
<script src="./js/popup.js" async></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -582,6 +582,10 @@
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
#sponsorBlockPopupBody .u-mZ.cleanPopupMargin {
|
||||
margin-top: 10px !important;
|
||||
}
|
||||
|
||||
#sponsorBlockPopupBody .hidden {
|
||||
display: none !important;
|
||||
}
|
||||
@@ -618,4 +622,9 @@
|
||||
|
||||
#issueReporterTabs > span.sbSelected > span::after {
|
||||
transform: scaleX(0.8);
|
||||
}
|
||||
|
||||
.sbPopupButton {
|
||||
width: 16px;
|
||||
fill: var(--sb-main-fg-color);
|
||||
}
|
||||
@@ -1,209 +1,13 @@
|
||||
<!DOCTYPE html>
|
||||
<html id="sponsorBlockPopupHTML">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>__MSG_openPopup__</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link id="sponsorBlockPopupFont" href="/libs/Source+Sans+Pro.css" rel="stylesheet">
|
||||
<link id="sponsorBlockStyleSheet" href="popup.css" rel="stylesheet">
|
||||
<link id="sponsorBlockStyleSheet" href="shared.css" rel="stylesheet">
|
||||
</head>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
|
||||
<body id="sponsorBlockPopupBody" style="visibility: hidden">
|
||||
<div id="sponsorblockPopup" class="sponsorBlockPageBody sb-preload">
|
||||
<link href="popup.css" rel="stylesheet">
|
||||
<link href="shared.css" rel="stylesheet">
|
||||
<script src="./js/popup2.js"></script>
|
||||
</head>
|
||||
|
||||
<button id="sbCloseButton" title="__MSG_closePopup__" class="sbCloseButton hidden">
|
||||
<img src="icons/close.png" width="15" height="15" alt="Close icon">
|
||||
</button>
|
||||
<body id="sponsorBlockPopupBody">
|
||||
|
||||
<div id="sbBetaServerWarning" class="hidden" title="__MSG_openOptionsPage__">
|
||||
__MSG_betaServerWarning__
|
||||
</div>
|
||||
|
||||
<header id="sbPopupLogo" class="sbPopupLogo">
|
||||
<img src="icons/IconSponsorBlocker256px.png" alt="SponsorBlock" width="40" height="40" id="sponsorBlockPopupLogo">
|
||||
<p class="u-mZ">SponsorBlock</p>
|
||||
</header>
|
||||
|
||||
<div id="videoInfo">
|
||||
<!-- Loading text -->
|
||||
<p id="loadingIndicator" class="u-mZ grey-text">__MSG_noVideoID__</p>
|
||||
<!-- If the video was found in the database -->
|
||||
<p id="videoFound" class="u-mZ grey-text"></p>
|
||||
<button id="refreshSegmentsButton" title="__MSG_refreshSegments__">
|
||||
<img src="/icons/refresh.svg" alt="Refresh icon" id="refreshSegments" />
|
||||
</button>
|
||||
<!-- Video Segments -->
|
||||
<div id="issueReporterContainer">
|
||||
<div id="issueReporterTabs" class="hidden">
|
||||
<span id="issueReporterTabSegments" class="sbSelected">
|
||||
<span>__MSG_SegmentsCap__</span>
|
||||
</span>
|
||||
<span id="issueReporterTabChapters">
|
||||
<span>__MSG_Chapters__</span>
|
||||
</span>
|
||||
</div>
|
||||
<div id="issueReporterTimeButtons"></div>
|
||||
<div id="issueReporterImportExport" class="hidden">
|
||||
<div id="importExportButtons">
|
||||
<button id="importSegmentsButton" title="__MSG_importSegments__">
|
||||
<img src="/icons/import.svg" alt="Import icon" id="importSegments" />
|
||||
</button>
|
||||
<button id="exportSegmentsButton" class="hidden" title="__MSG_exportSegments__">
|
||||
<img src="/icons/export.svg" alt="Export icon" id="exportSegments" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<span id="importSegmentsMenu" class="hidden">
|
||||
<textarea id="importSegmentsText" rows="5" style="width:80%"></textarea>
|
||||
|
||||
<button id="importSegmentsSubmit" title="__MSG_importSegments__">
|
||||
__MSG_Import__
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Toggle Box -->
|
||||
<div class="sbControlsMenu">
|
||||
<label id="whitelistButton" for="whitelistToggle" class="hidden sbControlsMenu-item" role="button" tabIndex="0">
|
||||
<input type="checkbox" style="display: none" id="whitelistToggle">
|
||||
<svg viewBox="0 0 24 24" width="23" height="23" class="SBWhitelistIcon sbControlsMenu-itemIcon">
|
||||
<path d="M24 10H14V0h-4v10H0v4h10v10h4V14h10z" />
|
||||
</svg>
|
||||
<span id="whitelistChannel">__MSG_whitelistChannel__</span>
|
||||
<span id="unwhitelistChannel" style="display: none">__MSG_removeFromWhitelist__</span>
|
||||
</label>
|
||||
<!--github: mbledkowski/toggle-switch-->
|
||||
<label id="disableExtension" for="toggleSwitch" class="toggleSwitchContainer sbControlsMenu-item" role="button" tabIndex="0">
|
||||
<span class="toggleSwitchContainer-switch">
|
||||
<input type="checkbox" style="display: none" id="toggleSwitch" checked>
|
||||
<span class="switchBg shadow"></span>
|
||||
<span class="switchBg white"></span>
|
||||
<span class="switchBg green"></span>
|
||||
<span class="switchDot"></span>
|
||||
</span>
|
||||
<span id="disableSkipping">__MSG_disableSkipping__</span>
|
||||
<span id="enableSkipping" style="display: none">__MSG_enableSkipping__</span>
|
||||
</label>
|
||||
<button id="optionsButton" class="sbControlsMenu-item" title="__MSG_optionsInfo__">
|
||||
<img src="/icons/settings.svg" alt="Settings icon" width="23" height="23" class="sbControlsMenu-itemIcon" id="sbPopupIconSettings" />
|
||||
__MSG_Options__
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<a id="whitelistForceCheck" class="hidden">
|
||||
__MSG_forceChannelCheckPopup__
|
||||
</a>
|
||||
|
||||
<!-- Submit box -->
|
||||
<div id="mainControls" style="display: none">
|
||||
<h1 class="sbHeader">
|
||||
__MSG_recordTimesDescription__
|
||||
</h1>
|
||||
<sub class="sponsorStartHint grey-text">__MSG_popupHint__</sub>
|
||||
<div style="text-align: center; margin: 8px 0;">
|
||||
<button id="sponsorStart" class="sbMediumButton" style="margin-right: 8px">__MSG_sponsorStart__</button>
|
||||
<button id="submitTimes" class="sbMediumButton" style="display: none">__MSG_OpenSubmissionMenu__</button>
|
||||
</div>
|
||||
<span id="submissionHint" style="display: none">__MSG_submissionEditHint__</span>
|
||||
</div>
|
||||
|
||||
<!-- Your Work box -->
|
||||
<div id="sbYourWorkBox" class="sbYourWorkBox">
|
||||
<h1 class="sbHeader" style="padding: 8px 15px;">
|
||||
__MSG_yourWork__
|
||||
</h1>
|
||||
<div class="sbYourWorkCols">
|
||||
<!-- Username -->
|
||||
<div id="usernameElement">
|
||||
<p class="u-mZ grey-text">__MSG_Username__:
|
||||
<!-- loading/errors -->
|
||||
<span id="setUsernameStatus" class="u-mZ white-text" style="display: none"></span>
|
||||
</p>
|
||||
<div id="setUsernameContainer">
|
||||
<p id="usernameValue"></p>
|
||||
<button id="setUsernameButton" title="__MSG_setUsername__">
|
||||
<img src="/icons/pencil.svg" alt="__MSG_setUsername__" width="16" height="16" id="sbPopupIconEdit">
|
||||
</button>
|
||||
<button id="copyUserID" title="__MSG_copyPublicID__">
|
||||
<img src="/icons/clipboard.svg" alt="__MSG_copyPublicID__" width="16" height="16" id="sbPopupIconCopyUserID">
|
||||
</button>
|
||||
</div>
|
||||
<div id="setUsername" style="display: none">
|
||||
<input id="usernameInput" placeholder="Username">
|
||||
<button id="submitUsername">
|
||||
<img src="/icons/check.svg" alt="__MSG_setUsername__" width="16" height="16" id="sbPopupIconCheck">
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Submissions -->
|
||||
<div id="sponsorTimesContributionsContainer" class="hidden">
|
||||
<p class="u-mZ grey-text">__MSG_Submissions__:</p>
|
||||
<p id="sponsorTimesContributionsDisplay" class="u-mZ">0</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p id="sponsorTimesViewsContainer" style="display: none" class="u-mZ sbStatsSentence">
|
||||
__MSG_savedPeopleFrom__
|
||||
<b>
|
||||
<span id="sponsorTimesViewsDisplay">0</span>
|
||||
</b>
|
||||
<span id="sponsorTimesViewsDisplayEndWord">__MSG_Segments__</span>
|
||||
<br />
|
||||
<span class="sbExtraInfo">
|
||||
(
|
||||
<b>
|
||||
<span id="sponsorTimesOthersTimeSavedDisplay">0</span>
|
||||
<span id="sponsorTimesOthersTimeSavedEndWord">__MSG_minsLower__</span>
|
||||
</b>
|
||||
<span>__MSG_youHaveSavedTimeEnd__</span>
|
||||
)
|
||||
</span>
|
||||
</p>
|
||||
<p id="sponsorTimesSkipsDoneContainer" style="display: none" class="u-mZ sbStatsSentence">
|
||||
__MSG_youHaveSkipped__
|
||||
<b>
|
||||
<span id="sponsorTimesSkipsDoneDisplay">0</span>
|
||||
</b>
|
||||
<span id="sponsorTimesSkipsDoneEndWord">__MSG_Segments__</span>
|
||||
<span class="sbExtraInfo">
|
||||
(
|
||||
<b>
|
||||
<span id="sponsorTimeSavedDisplay">0</span>
|
||||
<span id="sponsorTimeSavedEndWord">__MSG_minsLower__</span>
|
||||
</b>
|
||||
)
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div id="sponsorTimesDonateContainer" style="display: none; align-items: center; justify-content: center;">
|
||||
<img class="sbHeart" src="/icons/heart.svg" alt="Heart icon" />
|
||||
<a id="sbConsiderDonateLink" href="https://sponsor.ajay.app/donate" target="_blank" rel="noopener">
|
||||
__MSG_considerDonating__
|
||||
</a>
|
||||
<img id="sbCloseDonate" src="/icons/close.png" alt="__MSG_closeIcon__" height="8" style="padding-left: 5px; cursor: pointer;" />
|
||||
</div>
|
||||
|
||||
<footer id="sbFooter">
|
||||
<a id="helpButton">__MSG_help__</a>
|
||||
<a href="https://sponsor.ajay.app" target="_blank" rel="noopener">__MSG_website__</a>
|
||||
<a href="https://sponsor.ajay.app/stats" target="_blank" rel="noopener">__MSG_viewLeaderboard__</a>
|
||||
<br />
|
||||
<a href="https://github.com/ajayyy/SponsorBlock" target="_blank" rel="noopener">GitHub</a>
|
||||
<a href="https://discord.gg/SponsorBlock" target="_blank" rel="noopener">Discord</a>
|
||||
<a href="https://matrix.to/#/#sponsor:ajay.app?via=ajay.app&via=matrix.org&via=mozilla.org" target="_blank" rel="noopener">Matrix</a>
|
||||
<a href="https://sponsor.ajay.app/donate" target="_blank" rel="noopener" id="sbDonate">__MSG_Donate__</a>
|
||||
<br />
|
||||
<a id="debugLogs">__MSG_copyDebugLogs__</a>
|
||||
</footer>
|
||||
|
||||
<button id="showNoticeAgain" style="display: none">__MSG_showNotice__</button>
|
||||
|
||||
</div>
|
||||
<!-- Scripts that need to load after the html -->
|
||||
<script src="./js/popup.js" async></script>
|
||||
</body>
|
||||
</html>
|
||||
</body>
|
||||
</html>
|
||||
@@ -223,7 +223,10 @@ function messageListener(request: Message, sender: unknown, sendResponse: (respo
|
||||
status: lastResponseStatus,
|
||||
sponsorTimes: sponsorTimes,
|
||||
time: getCurrentTime() ?? 0,
|
||||
onMobileYouTube: isOnMobileYouTube()
|
||||
onMobileYouTube: isOnMobileYouTube(),
|
||||
videoID: getVideoID(),
|
||||
loopedChapter: loopedChapter?.UUID,
|
||||
channelWhitelisted
|
||||
});
|
||||
|
||||
if (!request.updating && popupInitialised && document.getElementById("sponsorBlockPopupContainer") != null) {
|
||||
@@ -1275,7 +1278,10 @@ async function sponsorsLookup(keepOldSubmissions = true, ignoreCache = false) {
|
||||
status: lastResponseStatus,
|
||||
sponsorTimes: sponsorTimes,
|
||||
time: getCurrentTime() ?? 0,
|
||||
onMobileYouTube: isOnMobileYouTube()
|
||||
onMobileYouTube: isOnMobileYouTube(),
|
||||
videoID: getVideoID(),
|
||||
loopedChapter: loopedChapter?.UUID,
|
||||
channelWhitelisted
|
||||
});
|
||||
|
||||
if (Config.config.isVip) {
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
// Message and Response Types
|
||||
//
|
||||
|
||||
import { SegmentUUID, SponsorHideType, SponsorTime } from "./types";
|
||||
import { SegmentUUID, SponsorHideType, SponsorTime, VideoID } from "./types";
|
||||
|
||||
interface BaseMessage {
|
||||
from?: string;
|
||||
@@ -84,6 +84,9 @@ export interface IsInfoFoundMessageResponse {
|
||||
sponsorTimes: SponsorTime[];
|
||||
time: number;
|
||||
onMobileYouTube: boolean;
|
||||
videoID: VideoID;
|
||||
loopedChapter: SegmentUUID | null;
|
||||
channelWhitelisted: boolean;
|
||||
}
|
||||
|
||||
interface GetVideoIdResponse {
|
||||
|
||||
393
src/popup/PopupComponent.tsx
Normal file
393
src/popup/PopupComponent.tsx
Normal file
@@ -0,0 +1,393 @@
|
||||
import * as React from "react";
|
||||
import { YourWorkComponent } from "./YourWorkComponent";
|
||||
// import { ToggleOptionComponent } from "./ToggleOptionComponent";
|
||||
// import { FormattingOptionsComponent } from "./FormattingOptionsComponent";
|
||||
import { isSafari } from "../../maze-utils/src/config";
|
||||
import { showDonationLink } from "../utils/configUtils";
|
||||
import Config from "../config";
|
||||
import { GetChannelIDResponse, IsInfoFoundMessageResponse, Message, MessageResponse, PopupMessage } from "../messageTypes";
|
||||
import { AnimationUtils } from "../../maze-utils/src/animationUtils";
|
||||
import { SegmentListComponent } from "./SegmentListComponent";
|
||||
import { ActionType, SegmentUUID, SponsorSourceType, SponsorTime } from "../types";
|
||||
import { SegmentSubmissionComponent } from "./SegmentSubmissionComponent";
|
||||
|
||||
export enum LoadingStatus {
|
||||
Loading,
|
||||
SegmentsFound,
|
||||
NoSegmentsFound
|
||||
}
|
||||
|
||||
let loadRetryCount = 0;
|
||||
|
||||
export const PopupComponent = () => {
|
||||
const [status, setStatus] = React.useState<LoadingStatus>(LoadingStatus.Loading);
|
||||
const [extensionEnabled, setExtensionEnabled] = React.useState(!Config.config!.disableSkipping);
|
||||
const [channelWhitelisted, setChannelWhitelisted] = React.useState<boolean | null>(null);
|
||||
const [showForceChannelCheckWarning, setShowForceChannelCheckWarning] = React.useState(false);
|
||||
const [showNoticeButton, setShowNoticeButton] = React.useState(Config.config!.dontShowNotice);
|
||||
|
||||
const [currentTime, setCurrentTime] = React.useState<number>(0);
|
||||
const [segments, setSegments] = React.useState<SponsorTime[]>([]);
|
||||
const [loopedChapter, setLoopedChapter] = React.useState<SegmentUUID | null>(null);
|
||||
|
||||
const [videoID, setVideoID] = React.useState<string | null>(null);
|
||||
|
||||
React.useEffect(() => {
|
||||
loadSegments({
|
||||
updating: false,
|
||||
setStatus,
|
||||
setChannelWhitelisted,
|
||||
setVideoID,
|
||||
setCurrentTime,
|
||||
setSegments,
|
||||
setLoopedChapter
|
||||
});
|
||||
|
||||
setupComPort({
|
||||
setStatus,
|
||||
setChannelWhitelisted,
|
||||
setVideoID,
|
||||
setCurrentTime,
|
||||
setSegments,
|
||||
setLoopedChapter
|
||||
});
|
||||
|
||||
forwardClickEvents(sendMessage);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div id="sponsorblockPopup">
|
||||
{
|
||||
window !== window.top &&
|
||||
<button id="sbCloseButton" title="__MSG_closePopup__" className="sbCloseButton" onClick={() => {
|
||||
sendMessage({ message: "closePopup" });
|
||||
}}>
|
||||
<img src="icons/close.png" width="15" height="15" alt="Close icon"/>
|
||||
</button>
|
||||
}
|
||||
|
||||
{
|
||||
Config.config!.testingServer &&
|
||||
<div id="sbBetaServerWarning"
|
||||
title={chrome.i18n.getMessage("openOptionsPage")}
|
||||
onClick={() => {
|
||||
chrome.runtime.sendMessage({ "message": "openConfig", "hash": "advanced" });
|
||||
}}>
|
||||
{chrome.i18n.getMessage("betaServerWarning")}
|
||||
</div>
|
||||
}
|
||||
|
||||
<header className={"sbPopupLogo " + (Config.config.cleanPopup ? "hidden" : "")}>
|
||||
<img src="icons/IconSponsorBlocker256px.png" alt="SponsorBlock Logo" width="40" height="40" id="sponsorBlockPopupLogo"/>
|
||||
<p className="u-mZ">
|
||||
SponsorBlock
|
||||
</p>
|
||||
</header>
|
||||
|
||||
{/* Loading text */}
|
||||
{status === LoadingStatus.Loading && (
|
||||
<p id="loadingIndicator"
|
||||
className={"u-mZ grey-text " + (Config.config.cleanPopup ? "cleanPopupMargin" : "")}>
|
||||
{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) => {
|
||||
const stopAnimation = AnimationUtils.applyLoadingAnimation(e.currentTarget, 0.3);
|
||||
|
||||
loadSegments({
|
||||
updating: true,
|
||||
setStatus,
|
||||
setChannelWhitelisted,
|
||||
setVideoID,
|
||||
setCurrentTime,
|
||||
setSegments,
|
||||
setLoopedChapter
|
||||
}).then(() => stopAnimation());
|
||||
}}>
|
||||
<img src="/icons/refresh.svg" alt="Refresh icon" id="refreshSegments" />
|
||||
</button>
|
||||
|
||||
<SegmentListComponent
|
||||
videoID={videoID}
|
||||
currentTime={currentTime}
|
||||
status={status}
|
||||
segments={segments}
|
||||
loopedChapter={loopedChapter}
|
||||
sendMessage={sendMessage} />
|
||||
|
||||
{/* Toggle Box */}
|
||||
<div className="sbControlsMenu">
|
||||
{/* github: mbledkowski/toggle-switch */}
|
||||
{channelWhitelisted !== null && (
|
||||
<label id="whitelistButton" htmlFor="whitelistToggle" className="toggleSwitchContainer sbControlsMenu-item" role="button" tabIndex={0}>
|
||||
<input type="checkbox"
|
||||
style={{ "display": "none" }}
|
||||
id="whitelistToggle"
|
||||
checked={channelWhitelisted}
|
||||
onChange={async (e) => {
|
||||
const response = await sendMessage({ message: 'getChannelID' }) as GetChannelIDResponse;
|
||||
if (!response.channelID) {
|
||||
if (response.isYTTV) {
|
||||
alert(chrome.i18n.getMessage("yttvNoChannelWhitelist"));
|
||||
} else {
|
||||
alert(chrome.i18n.getMessage("channelDataNotFound") + " https://github.com/ajayyy/SponsorBlock/issues/753");
|
||||
}
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
const whitelistedChannels = Config.config.whitelistedChannels ?? [];
|
||||
if (e.target.checked) {
|
||||
whitelistedChannels.splice(whitelistedChannels.indexOf(response.channelID), 1);
|
||||
} else {
|
||||
whitelistedChannels.push(response.channelID);
|
||||
}
|
||||
Config.config.whitelistedChannels = whitelistedChannels;
|
||||
|
||||
setChannelWhitelisted(!e.target.checked);
|
||||
if (!Config.config.forceChannelCheck) setShowForceChannelCheckWarning(true);
|
||||
|
||||
// Send a message to the client
|
||||
sendMessage({
|
||||
message: 'whitelistChange',
|
||||
value: !e.target.checked
|
||||
});
|
||||
|
||||
}}/>
|
||||
<svg viewBox="0 0 24 24" width="23" height="23" className={"SBWhitelistIcon sbControlsMenu-itemIcon " + (channelWhitelisted ? " rotated" : "")}>
|
||||
<path d="M24 10H14V0h-4v10H0v4h10v10h4V14h10z" />
|
||||
</svg>
|
||||
<span id="whitelistChannel" className={channelWhitelisted ? " hidden" : ""}>
|
||||
{chrome.i18n.getMessage("whitelistChannel")}
|
||||
</span>
|
||||
<span id="unwhitelistChannel" className={!channelWhitelisted ? " hidden" : ""}>
|
||||
{chrome.i18n.getMessage("removeFromWhitelist")}
|
||||
</span>
|
||||
</label>
|
||||
)}
|
||||
<label id="disableExtension" htmlFor="toggleSwitch" className="toggleSwitchContainer sbControlsMenu-item" role="button" tabIndex={0}>
|
||||
<span className="toggleSwitchContainer-switch">
|
||||
<input type="checkbox"
|
||||
style={{ "display": "none" }}
|
||||
id="toggleSwitch"
|
||||
checked={extensionEnabled}
|
||||
onChange={(e) => {
|
||||
Config.config!.disableSkipping = !e.target.checked;
|
||||
setExtensionEnabled(e.target.checked)
|
||||
}}/>
|
||||
<span className="switchBg shadow"></span>
|
||||
<span className="switchBg white"></span>
|
||||
<span className="switchBg green"></span>
|
||||
<span className="switchDot"></span>
|
||||
</span>
|
||||
<span id="disableSkipping" className={extensionEnabled ? " hidden" : ""}>
|
||||
{chrome.i18n.getMessage("enableSkipping")}
|
||||
</span>
|
||||
<span id="enableSkipping" className={!extensionEnabled ? " hidden" : ""}>
|
||||
{chrome.i18n.getMessage("disableSkipping")}
|
||||
</span>
|
||||
</label>
|
||||
<button id="optionsButton"
|
||||
className="sbControlsMenu-item"
|
||||
title={chrome.i18n.getMessage("Options")}
|
||||
onClick={() => {
|
||||
chrome.runtime.sendMessage({ "message": "openConfig" });
|
||||
}}>
|
||||
<img src="/icons/settings.svg" alt="Settings icon" width="23" height="23" className="sbControlsMenu-itemIcon" id="sbPopupIconSettings" />
|
||||
{chrome.i18n.getMessage("Options")}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{
|
||||
showForceChannelCheckWarning &&
|
||||
<a id="whitelistForceCheck" onClick={() => {
|
||||
chrome.runtime.sendMessage({ "message": "openConfig", "hash": "behavior" });
|
||||
}}>
|
||||
{chrome.i18n.getMessage("forceChannelCheckPopup")}
|
||||
</a>
|
||||
}
|
||||
|
||||
{
|
||||
!Config.config.cleanPopup &&
|
||||
<SegmentSubmissionComponent
|
||||
videoID={videoID || ""}
|
||||
status={status}
|
||||
sendMessage={sendMessage} />
|
||||
}
|
||||
|
||||
|
||||
{/* Your Work box */}
|
||||
{
|
||||
!Config.config.cleanPopup &&
|
||||
<YourWorkComponent/>
|
||||
}
|
||||
|
||||
{/* Footer */}
|
||||
{
|
||||
!Config.config.cleanPopup &&
|
||||
<footer id="sbFooter">
|
||||
<a id="helpButton"
|
||||
onClick={() => {
|
||||
chrome.runtime.sendMessage({ "message": "openHelp" });
|
||||
}}>
|
||||
{chrome.i18n.getMessage("help")}
|
||||
</a>
|
||||
<a href="https://sponsor.ajay.app" target="_blank" rel="noreferrer">
|
||||
{chrome.i18n.getMessage("website")}
|
||||
</a>
|
||||
<a href="https://sponsor.ajay.app/stats" target="_blank" rel="noreferrer" className={isSafari() ? " hidden" : ""}>
|
||||
{chrome.i18n.getMessage("viewLeaderboard")}
|
||||
</a>
|
||||
<a href="https://sponsor.ajay.app/donate" target="_blank" rel="noreferrer" className={!showDonationLink() ? " hidden" : ""} onClick={() => {
|
||||
Config.config!.donateClicked = Config.config!.donateClicked + 1;
|
||||
}}>
|
||||
{chrome.i18n.getMessage("Donate")}
|
||||
</a>
|
||||
<br />
|
||||
<a href="https://github.com/ajayyy/SponsorBlock" target="_blank" rel="noreferrer">
|
||||
GitHub
|
||||
</a>
|
||||
<a href="https://discord.gg/SponsorBlock" target="_blank" rel="noreferrer">
|
||||
Discord
|
||||
</a>
|
||||
<a href="https://matrix.to/#/#sponsor:ajay.app?via=ajay.app&via=matrix.org&via=mozilla.org" target="_blank" rel="noreferrer">
|
||||
Matrix
|
||||
</a>
|
||||
</footer>
|
||||
}
|
||||
|
||||
{
|
||||
showNoticeButton &&
|
||||
<button id="showNoticeAgain" onClick={() => {
|
||||
Config.config!.dontShowNotice = false;
|
||||
setShowNoticeButton(false);
|
||||
}}>
|
||||
{ chrome.i18n.getMessage("showNotice") }
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
interface SegmentsLoadedProps {
|
||||
setStatus: (status: LoadingStatus) => void;
|
||||
setChannelWhitelisted: (whitelisted: boolean | null) => void;
|
||||
setVideoID: (videoID: string | null) => void;
|
||||
setCurrentTime: (time: number) => void;
|
||||
setSegments: (segments: SponsorTime[]) => void;
|
||||
setLoopedChapter: (loopedChapter: SegmentUUID | null) => void;
|
||||
}
|
||||
|
||||
interface LoadSegmentsProps extends SegmentsLoadedProps {
|
||||
updating: boolean;
|
||||
}
|
||||
|
||||
async function loadSegments(props: LoadSegmentsProps): Promise<void> {
|
||||
const response = await sendMessage({ message: "isInfoFound", updating: props.updating }) as IsInfoFoundMessageResponse;
|
||||
|
||||
if (response && response.videoID) {
|
||||
segmentsLoaded(response, props);
|
||||
} else {
|
||||
// Handle error if it exists
|
||||
chrome.runtime.lastError;
|
||||
|
||||
props.setStatus(LoadingStatus.NoSegmentsFound);
|
||||
|
||||
if (!props.updating) {
|
||||
loadRetryCount++;
|
||||
if (loadRetryCount < 6) {
|
||||
setTimeout(() => loadSegments(props), 100 * loadRetryCount);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function segmentsLoaded(response: IsInfoFoundMessageResponse, props: SegmentsLoadedProps): void {
|
||||
props.setStatus(response.sponsorTimes?.length > 0 ? LoadingStatus.SegmentsFound : LoadingStatus.NoSegmentsFound);
|
||||
props.setVideoID(response.videoID);
|
||||
props.setCurrentTime(response.time);
|
||||
props.setChannelWhitelisted(response.channelWhitelisted);
|
||||
props.setSegments((response.sponsorTimes || [])
|
||||
.filter((segment) => segment.source === SponsorSourceType.Server)
|
||||
.sort((a, b) => b.segment[1] - a.segment[1])
|
||||
.sort((a, b) => a.segment[0] - b.segment[0])
|
||||
.sort((a, b) => a.actionType === ActionType.Full ? -1 : b.actionType === ActionType.Full ? 1 : 0));
|
||||
props.setLoopedChapter(response.loopedChapter);
|
||||
}
|
||||
|
||||
function sendMessage(request: Message): Promise<MessageResponse> {
|
||||
return new Promise((resolve) => {
|
||||
if (chrome.tabs) {
|
||||
chrome.tabs.query({
|
||||
active: true,
|
||||
currentWindow: true
|
||||
}, (tabs) => chrome.tabs.sendMessage(tabs[0].id, request, resolve));
|
||||
} else {
|
||||
chrome.runtime.sendMessage({ message: "tabs", data: request }, resolve);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
interface ComPortProps extends SegmentsLoadedProps {
|
||||
}
|
||||
|
||||
function setupComPort(props: ComPortProps): void {
|
||||
const port = chrome.runtime.connect({ name: "popup" });
|
||||
port.onDisconnect.addListener(() => setupComPort(props));
|
||||
port.onMessage.addListener((msg) => onMessage(props, msg));
|
||||
}
|
||||
|
||||
function onMessage(props: ComPortProps, msg: PopupMessage) {
|
||||
switch (msg.message) {
|
||||
case "time":
|
||||
props.setCurrentTime(msg.time);
|
||||
break;
|
||||
case "infoUpdated":
|
||||
segmentsLoaded(msg, props);
|
||||
break;
|
||||
case "videoChanged":
|
||||
props.setStatus(LoadingStatus.SegmentsFound);
|
||||
props.setVideoID(msg.videoID);
|
||||
props.setChannelWhitelisted(msg.whitelisted);
|
||||
props.setSegments([]);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
function forwardClickEvents(sendMessage: (request: Message) => Promise<MessageResponse>): void {
|
||||
if (window !== window.top) {
|
||||
document.addEventListener("keydown", (e) => {
|
||||
const target = e.target as HTMLElement;
|
||||
if (target.tagName === "INPUT"
|
||||
|| target.tagName === "TEXTAREA"
|
||||
|| e.key === "ArrowUp"
|
||||
|| e.key === "ArrowDown") {
|
||||
return;
|
||||
}
|
||||
|
||||
if (e.key === " ") {
|
||||
// No scrolling
|
||||
e.preventDefault();
|
||||
}
|
||||
|
||||
sendMessage({
|
||||
message: "keydown",
|
||||
key: e.key,
|
||||
keyCode: e.keyCode,
|
||||
code: e.code,
|
||||
which: e.which,
|
||||
shiftKey: e.shiftKey,
|
||||
ctrlKey: e.ctrlKey,
|
||||
altKey: e.altKey,
|
||||
metaKey: e.metaKey
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
445
src/popup/SegmentListComponent.tsx
Normal file
445
src/popup/SegmentListComponent.tsx
Normal file
@@ -0,0 +1,445 @@
|
||||
import * as React from "react";
|
||||
import { ActionType, SegmentUUID, SponsorHideType, SponsorTime, VideoID } from "../types";
|
||||
import Config from "../config";
|
||||
import { waitFor } from "../../maze-utils/src";
|
||||
import { shortCategoryName } from "../utils/categoryUtils";
|
||||
import { getErrorMessage, getFormattedTime } from "../../maze-utils/src/formating";
|
||||
import { AnimationUtils } from "../../maze-utils/src/animationUtils";
|
||||
import { asyncRequestToServer } from "../utils/requests";
|
||||
import { Message, MessageResponse, VoteResponse } from "../messageTypes";
|
||||
import { LoadingStatus } from "./PopupComponent";
|
||||
import GenericNotice from "../render/GenericNotice";
|
||||
import { exportTimes } from "../utils/exporter";
|
||||
|
||||
interface SegmentListComponentProps {
|
||||
videoID: VideoID;
|
||||
currentTime: number;
|
||||
status: LoadingStatus;
|
||||
segments: SponsorTime[];
|
||||
loopedChapter: SegmentUUID | null;
|
||||
|
||||
sendMessage: (request: Message) => Promise<MessageResponse>;
|
||||
}
|
||||
|
||||
enum SegmentListTab {
|
||||
Segments,
|
||||
Chapter
|
||||
}
|
||||
|
||||
export const SegmentListComponent = (props: SegmentListComponentProps) => {
|
||||
const [tab, setTab] = React.useState(SegmentListTab.Segments);
|
||||
const [isVip, setIsVip] = React.useState(Config.config?.isVip ?? false);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (!Config.isReady()) {
|
||||
waitFor(() => Config.isReady()).then(() => {
|
||||
setIsVip(Config.config.isVip);
|
||||
});
|
||||
} else {
|
||||
setIsVip(Config.config.isVip);
|
||||
}
|
||||
}, []);
|
||||
|
||||
React.useEffect(() => {
|
||||
setTab(SegmentListTab.Segments);
|
||||
}, [props.videoID]);
|
||||
|
||||
const tabFilter = (segment: SponsorTime) => {
|
||||
if (tab === SegmentListTab.Chapter) {
|
||||
return segment.actionType === ActionType.Chapter;
|
||||
} else {
|
||||
return segment.actionType !== ActionType.Chapter;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div id="issueReporterContainer">
|
||||
<div id="issueReporterTabs" className={props.segments && props.segments.find(s => s.actionType === ActionType.Chapter) ? "" : "hidden"}>
|
||||
<span id="issueReporterTabSegments" className={tab === SegmentListTab.Segments ? "sbSelected" : ""} onClick={() => {
|
||||
setTab(SegmentListTab.Segments);
|
||||
}}>
|
||||
<span>{chrome.i18n.getMessage("SegmentsCap")}</span>
|
||||
</span>
|
||||
<span id="issueReporterTabChapters" className={tab === SegmentListTab.Chapter ? "sbSelected" : ""} onClick={() => {
|
||||
setTab(SegmentListTab.Chapter);
|
||||
}}>
|
||||
<span>{chrome.i18n.getMessage("Chapters")}</span>
|
||||
</span>
|
||||
</div>
|
||||
<div id="issueReporterTimeButtons"
|
||||
onMouseLeave={() => selectSegment({
|
||||
segment: null,
|
||||
sendMessage: props.sendMessage
|
||||
})}>
|
||||
{
|
||||
props.segments.map((segment) => (
|
||||
<SegmentListItem
|
||||
key={segment.UUID}
|
||||
videoID={props.videoID}
|
||||
segment={segment}
|
||||
currentTime={props.currentTime}
|
||||
isVip={isVip}
|
||||
startingLooped={props.loopedChapter === segment.UUID}
|
||||
|
||||
tabFilter={tabFilter}
|
||||
sendMessage={props.sendMessage}
|
||||
/>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
|
||||
<ImportSegments
|
||||
status={props.status}
|
||||
segments={props.segments}
|
||||
sendMessage={props.sendMessage}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
function SegmentListItem({ segment, videoID, currentTime, isVip, startingLooped, tabFilter, sendMessage }: {
|
||||
segment: SponsorTime;
|
||||
videoID: VideoID;
|
||||
currentTime: number;
|
||||
isVip: boolean;
|
||||
startingLooped: boolean;
|
||||
|
||||
tabFilter: (segment: SponsorTime) => boolean;
|
||||
sendMessage: (request: Message) => Promise<MessageResponse>;
|
||||
}) {
|
||||
const [voteMessage, setVoteMessage] = React.useState<string | null>(null);
|
||||
const [hidden, setHidden] = React.useState(segment.hidden || SponsorHideType.Visible);
|
||||
const [isLooped, setIsLooped] = React.useState(startingLooped);
|
||||
|
||||
let extraInfo = "";
|
||||
if (segment.hidden === SponsorHideType.Downvoted) {
|
||||
// This one is downvoted
|
||||
extraInfo = " (" + chrome.i18n.getMessage("hiddenDueToDownvote") + ")";
|
||||
} else if (segment.hidden === SponsorHideType.MinimumDuration) {
|
||||
// This one is too short
|
||||
extraInfo = " (" + chrome.i18n.getMessage("hiddenDueToDuration") + ")";
|
||||
} else if (segment.hidden === SponsorHideType.Hidden) {
|
||||
extraInfo = " (" + chrome.i18n.getMessage("manuallyHidden") + ")";
|
||||
}
|
||||
|
||||
return (
|
||||
<details data-uuid={segment.UUID}
|
||||
onDoubleClick={() => skipSegment({
|
||||
segment,
|
||||
sendMessage
|
||||
})}
|
||||
onMouseEnter={() => {
|
||||
selectSegment({
|
||||
segment,
|
||||
sendMessage
|
||||
});
|
||||
}}
|
||||
className={"votingButtons " + (!tabFilter(segment) ? "hidden" : "")}>
|
||||
<summary className={"segmentSummary " + (
|
||||
currentTime >= segment.segment[0] ? (
|
||||
currentTime < segment.segment[1] ? "segmentActive" : "segmentPassed"
|
||||
) : ""
|
||||
)}>
|
||||
<div>
|
||||
{
|
||||
segment.actionType !== ActionType.Chapter &&
|
||||
<span className="sponsorTimesCategoryColorCircle dot" style={{ backgroundColor: Config.config.barTypes[segment.category]?.color }}></span>
|
||||
}
|
||||
<span className="summaryLabel">{(segment.description || shortCategoryName(segment.category)) + extraInfo}</span>
|
||||
</div>
|
||||
|
||||
<div style={{ margin: "5px" }}>
|
||||
{
|
||||
segment.actionType === ActionType.Full ? chrome.i18n.getMessage("full") :
|
||||
(getFormattedTime(segment.segment[0], true) +
|
||||
(segment.actionType !== ActionType.Poi
|
||||
? " " + chrome.i18n.getMessage("to") + " " + getFormattedTime(segment.segment[1], true)
|
||||
: ""))
|
||||
}
|
||||
</div>
|
||||
</summary>
|
||||
|
||||
<div className={"sbVoteButtonsContainer " + (voteMessage ? "hidden" : "")}>
|
||||
<img
|
||||
className="voteButton"
|
||||
title="Upvote"
|
||||
src={chrome.runtime.getURL("icons/thumbs_up.svg")}
|
||||
onClick={() => {
|
||||
vote({
|
||||
type: 1,
|
||||
UUID: segment.UUID,
|
||||
setVoteMessage: setVoteMessage,
|
||||
sendMessage
|
||||
});
|
||||
}}/>
|
||||
<img
|
||||
className="voteButton"
|
||||
title="Downvote"
|
||||
src={segment.locked && isVip ? chrome.runtime.getURL("icons/thumbs_down_locked.svg") : chrome.runtime.getURL("icons/thumbs_down.svg")}
|
||||
onClick={() => {
|
||||
vote({
|
||||
type: 0,
|
||||
UUID: segment.UUID,
|
||||
setVoteMessage: setVoteMessage,
|
||||
sendMessage
|
||||
});
|
||||
}}/>
|
||||
<img
|
||||
className="voteButton"
|
||||
title="Copy Segment ID"
|
||||
src={chrome.runtime.getURL("icons/clipboard.svg")}
|
||||
onClick={async (e) => {
|
||||
const stopAnimation = AnimationUtils.applyLoadingAnimation(e.currentTarget, 0.3);
|
||||
|
||||
if (segment.UUID.length > 60) {
|
||||
copyToClipboard(segment.UUID, sendMessage);
|
||||
} else {
|
||||
const segmentIDData = await asyncRequestToServer("GET", "/api/segmentID", {
|
||||
UUID: segment.UUID,
|
||||
videoID: videoID
|
||||
});
|
||||
|
||||
if (segmentIDData.ok && segmentIDData.responseText) {
|
||||
copyToClipboard(segmentIDData.responseText, sendMessage);
|
||||
}
|
||||
}
|
||||
|
||||
stopAnimation();
|
||||
}}/>
|
||||
{
|
||||
segment.actionType === ActionType.Chapter &&
|
||||
<img
|
||||
className="voteButton"
|
||||
title={isLooped ? chrome.i18n.getMessage("unloopChapter") : chrome.i18n.getMessage("loopChapter")}
|
||||
src={isLooped ? chrome.runtime.getURL("icons/looped.svg") : chrome.runtime.getURL("icons/loop.svg")}
|
||||
onClick={(e) => {
|
||||
if (isLooped) {
|
||||
loopChapter({
|
||||
segment: null,
|
||||
element: e.currentTarget,
|
||||
sendMessage
|
||||
});
|
||||
} else {
|
||||
loopChapter({
|
||||
segment,
|
||||
element: e.currentTarget,
|
||||
sendMessage
|
||||
});
|
||||
}
|
||||
|
||||
setIsLooped(!isLooped);
|
||||
}}/>
|
||||
}
|
||||
{
|
||||
(segment.actionType === ActionType.Skip || segment.actionType === ActionType.Mute
|
||||
|| segment.actionType === ActionType.Poi
|
||||
&& [SponsorHideType.Visible, SponsorHideType.Hidden].includes(segment.hidden)) &&
|
||||
<img
|
||||
className="voteButton"
|
||||
title="Hide Segment"
|
||||
src={hidden === SponsorHideType.Hidden ? chrome.runtime.getURL("icons/not_visible.svg") : chrome.runtime.getURL("icons/visible.svg")}
|
||||
onClick={(e) => {
|
||||
const stopAnimation = AnimationUtils.applyLoadingAnimation(e.currentTarget, 0.4);
|
||||
stopAnimation();
|
||||
|
||||
if (segment.hidden === SponsorHideType.Hidden) {
|
||||
segment.hidden = SponsorHideType.Visible;
|
||||
setHidden(SponsorHideType.Visible);
|
||||
} else {
|
||||
segment.hidden = SponsorHideType.Hidden;
|
||||
setHidden(SponsorHideType.Hidden);
|
||||
}
|
||||
|
||||
sendMessage({
|
||||
message: "hideSegment",
|
||||
type: segment.hidden,
|
||||
UUID: segment.UUID
|
||||
});
|
||||
}}/>
|
||||
}
|
||||
{
|
||||
segment.actionType !== ActionType.Full &&
|
||||
<img
|
||||
className="voteButton"
|
||||
title={segment.actionType === ActionType.Chapter ? chrome.i18n.getMessage("playChapter") : chrome.i18n.getMessage("skipSegment")}
|
||||
src={chrome.runtime.getURL("icons/skip.svg")}
|
||||
onClick={(e) => {
|
||||
skipSegment({
|
||||
segment,
|
||||
element: e.currentTarget,
|
||||
sendMessage
|
||||
});
|
||||
}}/>
|
||||
}
|
||||
</div>
|
||||
|
||||
<div className={"sponsorTimesVoteStatusContainer " + (voteMessage ? "" : "hidden")}>
|
||||
<div className="sponsorTimesThanksForVotingText">
|
||||
{voteMessage}
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
);
|
||||
}
|
||||
|
||||
async function vote(props: {
|
||||
type: number;
|
||||
UUID: SegmentUUID;
|
||||
setVoteMessage: (message: string | null) => void;
|
||||
sendMessage: (request: Message) => Promise<MessageResponse>;
|
||||
}): Promise<void> {
|
||||
props.setVoteMessage(chrome.i18n.getMessage("Loading"));
|
||||
|
||||
const response = await props.sendMessage({
|
||||
message: "submitVote",
|
||||
type: props.type,
|
||||
UUID: props.UUID
|
||||
}) as VoteResponse;
|
||||
|
||||
if (response != undefined) {
|
||||
// See if it was a success or failure
|
||||
if (response.successType == 1 || (response.successType == -1 && response.statusCode == 429)) {
|
||||
// Success (treat rate limits as a success)
|
||||
props.setVoteMessage(chrome.i18n.getMessage("voted"));
|
||||
} else if (response.successType == -1) {
|
||||
props.setVoteMessage(getErrorMessage(response.statusCode, response.responseText));
|
||||
}
|
||||
setTimeout(() => props.setVoteMessage(null), 1500);
|
||||
}
|
||||
}
|
||||
|
||||
function skipSegment({ segment, element, sendMessage }: {
|
||||
segment: SponsorTime;
|
||||
element?: HTMLElement;
|
||||
|
||||
sendMessage: (request: Message) => Promise<MessageResponse>;
|
||||
}): void {
|
||||
if (segment.actionType === ActionType.Chapter) {
|
||||
sendMessage({
|
||||
message: "unskip",
|
||||
UUID: segment.UUID
|
||||
});
|
||||
} else {
|
||||
sendMessage({
|
||||
message: "reskip",
|
||||
UUID: segment.UUID
|
||||
});
|
||||
}
|
||||
|
||||
if (element) {
|
||||
const stopAnimation = AnimationUtils.applyLoadingAnimation(element, 0.3);
|
||||
stopAnimation();
|
||||
}
|
||||
}
|
||||
|
||||
function selectSegment({ segment, sendMessage }: {
|
||||
segment: SponsorTime | null;
|
||||
|
||||
sendMessage: (request: Message) => Promise<MessageResponse>;
|
||||
}): void {
|
||||
sendMessage({
|
||||
message: "selectSegment",
|
||||
UUID: segment?.UUID
|
||||
});
|
||||
}
|
||||
|
||||
function loopChapter({ segment, element, sendMessage }: {
|
||||
segment: SponsorTime;
|
||||
element: HTMLElement;
|
||||
|
||||
sendMessage: (request: Message) => Promise<MessageResponse>;
|
||||
}): void {
|
||||
sendMessage({
|
||||
message: "loopChapter",
|
||||
UUID: segment?.UUID
|
||||
});
|
||||
|
||||
if (element) {
|
||||
const stopAnimation = AnimationUtils.applyLoadingAnimation(element, 0.3);
|
||||
stopAnimation();
|
||||
}
|
||||
}
|
||||
|
||||
function copyToClipboard(text: string, sendMessage: (request: Message) => Promise<MessageResponse>): void {
|
||||
if (window === window.top) {
|
||||
window.navigator.clipboard.writeText(text);
|
||||
} else {
|
||||
sendMessage({
|
||||
message: "copyToClipboard",
|
||||
text
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
interface ImportSegmentsProps {
|
||||
status: LoadingStatus;
|
||||
segments: SponsorTime[];
|
||||
|
||||
sendMessage: (request: Message) => Promise<MessageResponse>;
|
||||
}
|
||||
|
||||
function ImportSegments(props: ImportSegmentsProps) {
|
||||
const [importMenuVisible, setImportMenuVisible] = React.useState(false);
|
||||
const textArea = React.useRef<HTMLTextAreaElement>(null);
|
||||
|
||||
return (
|
||||
<div id="issueReporterImportExport" className={props.status === LoadingStatus.Loading ? "hidden" : ""}>
|
||||
<div id="importExportButtons">
|
||||
<button id="importSegmentsButton"
|
||||
title={chrome.i18n.getMessage("importSegments")}
|
||||
onClick={() => {
|
||||
setImportMenuVisible(!importMenuVisible);
|
||||
}}>
|
||||
<img src="/icons/import.svg" alt="Import icon" id="importSegments" />
|
||||
</button>
|
||||
<button id="exportSegmentsButton"
|
||||
className={props.segments.length === 0 ? "hidden" : ""}
|
||||
title={chrome.i18n.getMessage("exportSegments")}
|
||||
onClick={(e) => {
|
||||
copyToClipboard(exportTimes(props.segments), props.sendMessage);
|
||||
|
||||
const stopAnimation = AnimationUtils.applyLoadingAnimation(e.currentTarget, 0.3);
|
||||
stopAnimation();
|
||||
new GenericNotice(null, "exportCopied", {
|
||||
title: chrome.i18n.getMessage(`CopiedExclamation`),
|
||||
timed: true,
|
||||
maxCountdownTime: () => 0.6,
|
||||
referenceNode: e.currentTarget.parentElement,
|
||||
dontPauseCountdown: true,
|
||||
style: {
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
minWidth: 0,
|
||||
right: "30px",
|
||||
margin: "auto",
|
||||
height: "max-content"
|
||||
},
|
||||
hideLogo: true,
|
||||
hideRightInfo: true
|
||||
});
|
||||
}}>
|
||||
<img src="/icons/export.svg" alt="Export icon" id="exportSegments" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<span id="importSegmentsMenu" className={importMenuVisible ? "" : "hidden"}>
|
||||
<textarea id="importSegmentsText" rows={5} style={{ width: "80%" }} ref={textArea}></textarea>
|
||||
|
||||
<button id="importSegmentsSubmit"
|
||||
title={chrome.i18n.getMessage("importSegments")}
|
||||
onClick={() => {
|
||||
const text = textArea.current.value;
|
||||
|
||||
props.sendMessage({
|
||||
message: "importSegments",
|
||||
data: text
|
||||
});
|
||||
|
||||
setImportMenuVisible(false);
|
||||
}}>
|
||||
{chrome.i18n.getMessage("Import")}
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
66
src/popup/SegmentSubmissionComponent.tsx
Normal file
66
src/popup/SegmentSubmissionComponent.tsx
Normal file
@@ -0,0 +1,66 @@
|
||||
import * as React from "react";
|
||||
import { VideoID } from "../types";
|
||||
import Config from "../config";
|
||||
import { Message, MessageResponse } from "../messageTypes";
|
||||
import { LoadingStatus } from "./PopupComponent";
|
||||
|
||||
interface SegmentSubmissionComponentProps {
|
||||
videoID: VideoID;
|
||||
status: LoadingStatus;
|
||||
|
||||
sendMessage: (request: Message) => Promise<MessageResponse>;
|
||||
}
|
||||
|
||||
export const SegmentSubmissionComponent = (props: SegmentSubmissionComponentProps) => {
|
||||
const segments = Config.local.unsubmittedSegments[props.videoID];
|
||||
|
||||
const [showSubmitButton, setShowSubmitButton] = React.useState(segments && segments.length > 0);
|
||||
const [showStartSegment, setShowStartSegment] = React.useState(!segments || segments[segments.length - 1].segment.length === 2);
|
||||
|
||||
return (
|
||||
<div id="mainControls" className={props.status === LoadingStatus.Loading ? "hidden" : ""}>
|
||||
<h1 className="sbHeader">
|
||||
{chrome.i18n.getMessage("recordTimesDescription")}
|
||||
</h1>
|
||||
<sub className="sponsorStartHint grey-text">
|
||||
{chrome.i18n.getMessage("popupHint")}
|
||||
</sub>
|
||||
<div style={{ textAlign: "center", margin: "8px 0" }}>
|
||||
<button id="sponsorStart"
|
||||
className="sbMediumButton"
|
||||
style={{ marginRight: "8px" }}
|
||||
onClick={() => {
|
||||
props.sendMessage({
|
||||
from: "popup",
|
||||
message: "sponsorStart"
|
||||
});
|
||||
|
||||
setShowStartSegment(!showStartSegment);
|
||||
setShowSubmitButton(true);
|
||||
|
||||
// Once data is saved, make sure it is correct
|
||||
setTimeout(() => {
|
||||
const segments = Config.local.unsubmittedSegments[props.videoID];
|
||||
setShowStartSegment(!segments || segments[segments.length - 1].segment.length === 2);
|
||||
|
||||
setShowSubmitButton(segments && segments.length > 0);
|
||||
}, 200);
|
||||
}}>
|
||||
{showStartSegment ? chrome.i18n.getMessage("sponsorStart") : chrome.i18n.getMessage("sponsorEnd")}
|
||||
</button>
|
||||
<button id="submitTimes"
|
||||
className={"sbMediumButton " + (showSubmitButton ? "" : "hidden")}
|
||||
onClick={() => {
|
||||
props.sendMessage({
|
||||
message: "submitTimes"
|
||||
});
|
||||
}}>
|
||||
{chrome.i18n.getMessage("OpenSubmissionMenu")}
|
||||
</button>
|
||||
</div>
|
||||
<span id="submissionHint" className={showSubmitButton ? "" : "hidden"}>
|
||||
{chrome.i18n.getMessage("submissionEditHint")}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
207
src/popup/YourWorkComponent.tsx
Normal file
207
src/popup/YourWorkComponent.tsx
Normal file
@@ -0,0 +1,207 @@
|
||||
import * as React from "react";
|
||||
import { getHash } from "../../maze-utils/src/hash";
|
||||
import { getErrorMessage } from "../../maze-utils/src/formating";
|
||||
import Config from "../config";
|
||||
import { asyncRequestToServer } from "../utils/requests";
|
||||
import PencilIcon from "../svg-icons/pencilIcon";
|
||||
import ClipboardIcon from "../svg-icons/clipboardIcon";
|
||||
import CheckIcon from "../svg-icons/checkIcon";
|
||||
|
||||
export const YourWorkComponent = () => {
|
||||
const [isSettingUsername, setIsSettingUsername] = React.useState(false);
|
||||
const [username, setUsername] = React.useState("");
|
||||
const [newUsername, setNewUsername] = React.useState("");
|
||||
const [usernameSubmissionStatus, setUsernameSubmissionStatus] = React.useState("");
|
||||
const [submissionCount, setSubmissionCount] = React.useState("");
|
||||
const [viewCount, setViewCount] = React.useState(0);
|
||||
const [minutesSaved, setMinutesSaved] = React.useState(0);
|
||||
const [showDonateMessage, setShowDonateMessage] = React.useState(false);
|
||||
|
||||
React.useEffect(() => {
|
||||
(async () => {
|
||||
const values = ["userName", "viewCount", "minutesSaved", "vip", "permissions", "segmentCount"];
|
||||
const result = await asyncRequestToServer("GET", "/api/userInfo", {
|
||||
publicUserID: await getHash(Config.config!.userID!),
|
||||
values
|
||||
});
|
||||
|
||||
if (result.ok) {
|
||||
const userInfo = JSON.parse(result.responseText);
|
||||
setUsername(userInfo.userName);
|
||||
setSubmissionCount(Math.max(Config.config.sponsorTimesContributed ?? 0, userInfo.segmentCount).toLocaleString());
|
||||
setViewCount(userInfo.viewCount);
|
||||
setMinutesSaved(userInfo.minutesSaved);
|
||||
|
||||
Config.config!.isVip = userInfo.vip;
|
||||
Config.config!.permissions = userInfo.permissions;
|
||||
|
||||
setShowDonateMessage(Config.config.showDonationLink && Config.config.donateClicked <= 0 && Config.config.showPopupDonationCount < 5
|
||||
&& viewCount < 50000 && !Config.config.isVip && Config.config.skipCount > 10);
|
||||
}
|
||||
})();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="sbYourWorkBox">
|
||||
<h2 className="sbHeader" style={{ "padding": "8px 15px" }}>
|
||||
{chrome.i18n.getMessage("yourWork")}
|
||||
</h2>
|
||||
<div className="sbYourWorkCols">
|
||||
{/* Username */}
|
||||
<div id="usernameElement">
|
||||
<p className="u-mZ grey-text">
|
||||
{chrome.i18n.getMessage("Username")}:
|
||||
{/* loading/errors */}
|
||||
<span id="setUsernameStatus"
|
||||
className={`u-mZ white-text${!usernameSubmissionStatus ? " hidden" : ""}`}>
|
||||
{usernameSubmissionStatus}
|
||||
</span>
|
||||
</p>
|
||||
<div id="setUsernameContainer" className={isSettingUsername ? " hidden" : ""}>
|
||||
<p id="usernameValue">{username}</p>
|
||||
<button id="setUsernameButton"
|
||||
title={chrome.i18n.getMessage("setUsername")}
|
||||
onClick={() => {
|
||||
setNewUsername(username);
|
||||
setIsSettingUsername(!isSettingUsername);
|
||||
}}>
|
||||
<PencilIcon id="sbPopupIconEdit" className="sbPopupButton" />
|
||||
</button>
|
||||
<button id="copyUserID"
|
||||
title={chrome.i18n.getMessage("copyPublicID")}
|
||||
onClick={async () => {
|
||||
window.navigator.clipboard.writeText(await getHash(Config.config!.userID!));
|
||||
}}>
|
||||
<ClipboardIcon id="sbPopupIconCopyUserID" className="sbPopupButton" />
|
||||
</button>
|
||||
</div>
|
||||
<div id="setUsername" className={!isSettingUsername ? " hidden" : " SBExpanded"}>
|
||||
<input id="usernameInput"
|
||||
placeholder={chrome.i18n.getMessage("Username")}
|
||||
value={newUsername}
|
||||
onChange={(e) => {
|
||||
setNewUsername(e.target.value);
|
||||
}}/>
|
||||
<button id="submitUsername"
|
||||
onClick={() => {
|
||||
if (newUsername.length > 0) {
|
||||
setUsernameSubmissionStatus(chrome.i18n.getMessage("Loading"));
|
||||
asyncRequestToServer("POST", `/api/setUsername?userID=${Config.config!.userID}&username=${newUsername}`)
|
||||
.then((result) => {
|
||||
if (result.ok) {
|
||||
setUsernameSubmissionStatus("");
|
||||
setUsername(newUsername);
|
||||
setIsSettingUsername(!isSettingUsername);
|
||||
} else {
|
||||
setUsernameSubmissionStatus(getErrorMessage(result.status, result.responseText));
|
||||
}
|
||||
}).catch((e) => {
|
||||
setUsernameSubmissionStatus(`${chrome.i18n.getMessage("Error")}: ${e}`);
|
||||
});
|
||||
}
|
||||
}}>
|
||||
<CheckIcon id="sbPopupIconCheck" className="sbPopupButton" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<SubmissionCounts
|
||||
isSettingUsername={isSettingUsername}
|
||||
submissionCount={submissionCount}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<TimeSavedMessage
|
||||
viewCount={viewCount}
|
||||
minutesSaved={minutesSaved}
|
||||
/>
|
||||
|
||||
{showDonateMessage && <DonateMessage onClose={() => {
|
||||
setShowDonateMessage(false);
|
||||
Config.config.showPopupDonationCount = 100;
|
||||
}} />}
|
||||
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
function SubmissionCounts(props: { isSettingUsername: boolean; submissionCount: string }): JSX.Element {
|
||||
return <>
|
||||
<div id="sponsorTimesContributionsContainer" className={props.isSettingUsername ? " hidden" : ""}>
|
||||
<p className="u-mZ grey-text">
|
||||
{chrome.i18n.getMessage("Submissions")}:
|
||||
</p>
|
||||
<p id="sponsorTimesContributionsDisplay" className="u-mZ">{props.submissionCount}</p>
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
|
||||
function TimeSavedMessage({ viewCount, minutesSaved }: { viewCount: number; minutesSaved: number }): JSX.Element {
|
||||
return (
|
||||
<>
|
||||
{
|
||||
viewCount > 0 &&
|
||||
<p id="sponsorTimesViewsContainer" className="u-mZ sbStatsSentence">
|
||||
{chrome.i18n.getMessage("savedPeopleFrom")}
|
||||
<b>
|
||||
<span id="sponsorTimesViewsDisplay">{viewCount.toLocaleString()}</span>{" "}
|
||||
</b>
|
||||
<span id="sponsorTimesViewsDisplayEndWord">{viewCount !== 1 ? chrome.i18n.getMessage("Segments") : chrome.i18n.getMessage("Segment")}</span>
|
||||
<br />
|
||||
<span className="sbExtraInfo">
|
||||
{"("}{" "}
|
||||
<b>
|
||||
<span id="sponsorTimesOthersTimeSavedDisplay">{getFormattedHours(minutesSaved)}</span>{" "}
|
||||
<span id="sponsorTimesOthersTimeSavedEndWord">{minutesSaved !== 1 ? chrome.i18n.getMessage("minsLower") : chrome.i18n.getMessage("minLower")}</span>{" "}
|
||||
</b>
|
||||
<span>{chrome.i18n.getMessage("youHaveSavedTimeEnd")}</span>{" "}
|
||||
{" )"}
|
||||
</span>
|
||||
</p>
|
||||
}
|
||||
<p id="sponsorTimesSkipsDoneContainer" className="u-mZ sbStatsSentence">
|
||||
{chrome.i18n.getMessage("youHaveSkipped")}
|
||||
<b>
|
||||
<span id="sponsorTimesSkipsDoneDisplay">{Config.config.skipCount}</span>{" "}
|
||||
</b>
|
||||
<span id="sponsorTimesSkipsDoneEndWord">{Config.config.skipCount > 1 ? chrome.i18n.getMessage("Segments") : chrome.i18n.getMessage("Segment")}</span>{" "}
|
||||
<span className="sbExtraInfo">
|
||||
{"("}{" "}
|
||||
<b>
|
||||
<span id="sponsorTimeSavedDisplay">{Config.config.minutesSaved}</span>{" "}
|
||||
<span id="sponsorTimeSavedEndWord">{Config.config.minutesSaved !== 1 ? chrome.i18n.getMessage("minsLower") : chrome.i18n.getMessage("minLower")}</span>{" "}
|
||||
</b>
|
||||
{")"}
|
||||
</span>
|
||||
</p>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function DonateMessage(props: { onClose: () => void }): JSX.Element {
|
||||
return (
|
||||
<div id="sponsorTimesDonateContainer" style={{ alignItems: "center", justifyContent: "center" }}>
|
||||
<img className="sbHeart" src="/icons/heart.svg" alt="Heart icon" />
|
||||
<a id="sbConsiderDonateLink" href="https://sponsor.ajay.app/donate" target="_blank" rel="noreferrer" onClick={() => {
|
||||
Config.config.donateClicked = Config.config.donateClicked + 1;
|
||||
}}>
|
||||
{chrome.i18n.getMessage("considerDonating")}
|
||||
</a>
|
||||
<img id="sbCloseDonate" src="/icons/close.png" alt={chrome.i18n.getMessage("closeIcon")} height="8" style={{ paddingLeft: "5px", cursor: "pointer" }} onClick={props.onClose} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Converts time in minutes to 2d 5h 25.1
|
||||
* If less than 1 hour, just returns minutes
|
||||
*
|
||||
* @param {float} minutes
|
||||
* @returns {string}
|
||||
*/
|
||||
function getFormattedHours(minutes) {
|
||||
minutes = Math.round(minutes * 10) / 10;
|
||||
const years = Math.floor(minutes / 525600); // Assumes 365.0 days in a year
|
||||
const days = Math.floor(minutes / 1440) % 365;
|
||||
const hours = Math.floor(minutes / 60) % 24;
|
||||
return (years > 0 ? years + chrome.i18n.getMessage("yearAbbreviation") + " " : "") + (days > 0 ? days + chrome.i18n.getMessage("dayAbbreviation") + " " : "") + (hours > 0 ? hours + chrome.i18n.getMessage("hourAbbreviation") + " " : "") + (minutes % 60).toFixed(1);
|
||||
}
|
||||
13
src/popup/popup.tsx
Normal file
13
src/popup/popup.tsx
Normal file
@@ -0,0 +1,13 @@
|
||||
import * as React from "react";
|
||||
import { createRoot } from "react-dom/client";
|
||||
import { PopupComponent } from "./PopupComponent";
|
||||
import { waitFor } from "../../maze-utils/src";
|
||||
import Config from "../config";
|
||||
|
||||
|
||||
document.addEventListener("DOMContentLoaded", async () => {
|
||||
await waitFor(() => Config.isReady());
|
||||
|
||||
const root = createRoot(document.body);
|
||||
root.render(<PopupComponent/>);
|
||||
})
|
||||
27
src/svg-icons/checkIcon.tsx
Normal file
27
src/svg-icons/checkIcon.tsx
Normal file
@@ -0,0 +1,27 @@
|
||||
import * as React from "react";
|
||||
|
||||
export interface CheckIconProps {
|
||||
id?: string;
|
||||
style?: React.CSSProperties;
|
||||
className?: string;
|
||||
onClick?: () => void;
|
||||
}
|
||||
|
||||
const CheckIcon = ({
|
||||
id = "",
|
||||
className = "",
|
||||
style = {},
|
||||
onClick
|
||||
}: CheckIconProps): JSX.Element => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
className={className}
|
||||
style={style}
|
||||
id={id}
|
||||
onClick={onClick} >
|
||||
<path d="M20.3 2L9 13.6l-5.3-5L0 12.3 9 21 24 5.7z"/>
|
||||
</svg>
|
||||
);
|
||||
|
||||
export default CheckIcon;
|
||||
28
src/svg-icons/clipboardIcon.tsx
Normal file
28
src/svg-icons/clipboardIcon.tsx
Normal file
@@ -0,0 +1,28 @@
|
||||
import * as React from "react";
|
||||
|
||||
export interface ClipboardIconProps {
|
||||
id?: string;
|
||||
style?: React.CSSProperties;
|
||||
className?: string;
|
||||
onClick?: () => void;
|
||||
}
|
||||
|
||||
const ClipboardIcon = ({
|
||||
id = "",
|
||||
className = "",
|
||||
style = {},
|
||||
onClick
|
||||
}: ClipboardIconProps): JSX.Element => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
className={className}
|
||||
style={style}
|
||||
id={id}
|
||||
onClick={onClick} >
|
||||
<path d="M0 0h24v24H0z" fill="none" />
|
||||
<path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4l6 6v10c0 1.1-.9 2-2 2H7.99C6.89 23 6 22.1 6 21l.01-14c0-1.1.89-2 1.99-2h7zm-1 7h5.5L14 6.5V12z" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
export default ClipboardIcon;
|
||||
27
src/svg-icons/pencilIcon.tsx
Normal file
27
src/svg-icons/pencilIcon.tsx
Normal file
@@ -0,0 +1,27 @@
|
||||
import * as React from "react";
|
||||
|
||||
export interface PencilIconProps {
|
||||
id?: string;
|
||||
style?: React.CSSProperties;
|
||||
className?: string;
|
||||
onClick?: () => void;
|
||||
}
|
||||
|
||||
const PencilIcon = ({
|
||||
id = "",
|
||||
className = "",
|
||||
style = {},
|
||||
onClick
|
||||
}: PencilIconProps): JSX.Element => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
className={className}
|
||||
style={style}
|
||||
id={id}
|
||||
onClick={onClick} >
|
||||
<path d="M14.1 7.1l2.9 2.9L6.1 20.7l-3.6.7.7-3.6L14.1 7.1zm0-2.8L1.4 16.9 0 24l7.1-1.4L19.8 9.9l-5.7-5.7zm7.1 4.3L24 5.7 18.3 0l-2.8 2.8 5.7 5.7z"/>
|
||||
</svg>
|
||||
);
|
||||
|
||||
export default PencilIcon;
|
||||
@@ -94,6 +94,7 @@ module.exports = env => {
|
||||
return {
|
||||
entry: {
|
||||
popup: path.join(__dirname, srcDir + 'popup.ts'),
|
||||
popup2: path.join(__dirname, srcDir + 'popup/popup.tsx'),
|
||||
background: path.join(__dirname, srcDir + 'background.ts'),
|
||||
content: path.join(__dirname, srcDir + 'content.ts'),
|
||||
options: path.join(__dirname, srcDir + 'options.ts'),
|
||||
|
||||
Reference in New Issue
Block a user