From 32052c17f1ac97048418015ca2e20515ca7827c8 Mon Sep 17 00:00:00 2001 From: Ajay Date: Mon, 6 Jun 2022 20:41:15 -0400 Subject: [PATCH] Add notice showing that copy happened --- manifest/manifest.json | 1 + public/_locales/en/messages.json | 10 ++ public/content.css | 220 ----------------------------- public/popup.css | 4 + public/popup.html | 1 + public/shared.css | 219 ++++++++++++++++++++++++++++ src/components/NoticeComponent.tsx | 59 ++++---- src/popup.ts | 18 +++ src/render/GenericNotice.tsx | 11 +- 9 files changed, 296 insertions(+), 247 deletions(-) create mode 100644 public/shared.css diff --git a/manifest/manifest.json b/manifest/manifest.json index aab3bba8..8a8e54bd 100644 --- a/manifest/manifest.json +++ b/manifest/manifest.json @@ -18,6 +18,7 @@ ], "css": [ "content.css", + "shared.css", "./libs/Source+Sans+Pro.css", "popup.css" ] diff --git a/public/_locales/en/messages.json b/public/_locales/en/messages.json index a9f04433..f475716b 100644 --- a/public/_locales/en/messages.json +++ b/public/_locales/en/messages.json @@ -555,6 +555,10 @@ "message": "to", "description": "Used between segments. Example: 1:20 to 1:30" }, + "CopiedExclamation": { + "message": "Copied!", + "description": "Used after something has been copied to the clipboard. Example: 'Copied!'" + }, "generic_guideline1": { "message": "Include segue transitions" }, @@ -1050,5 +1054,11 @@ }, "confirmResetToDefault": { "message": "Are you sure you want to reset all settings to their default values? This cannot be undone." + }, + "exportSegments": { + "message": "Export segments" + }, + "importSegments": { + "message": "Import segments" } } diff --git a/public/content.css b/public/content.css index 1ece0212..7f74b6cc 100644 --- a/public/content.css +++ b/public/content.css @@ -182,226 +182,6 @@ div:hover > .sponsorBlockChapterBar { right: var(--skip-notice-right); } -.sponsorSkipNoticeParent { - position: absolute; - - bottom: 100px; - right: var(--skip-notice-right); -} - -.sponsorSkipNoticeParent, .sponsorSkipNotice { - border-spacing: var(--skip-notice-border-horizontal) var(--skip-notice-border-vertical); - padding-left: var(--skip-notice-padding); - padding-right: var(--skip-notice-padding); - - border-collapse: unset; -} - -.sponsorSkipNoticeParent { - min-width: 350px; - max-width: 50%; -} - -.sponsorSkipNotice { - width: 100%; -} - -.sponsorSkipNoticeTableContainer { - background-color: rgba(28, 28, 28, 0.9); - border-radius: 5px; - min-width: 100%; -} - -.sponsorSkipNotice { - transition: all 0.1s ease-out; -} - -.sponsorSkipNoticeLimitWidth { - max-width: calc(100% - 50px); -} - -.sponsorSkipNotice .hidden { - display: none; -} - -/* For Cloudtube */ -.sponsorSkipNotice td, .sponsorSkipNotice table, .sponsorSkipNotice th { - border: none; -} - -.sponsorSkipNoticeFadeIn { - animation: fadeIn 0.5s ease-out; -} - -.sponsorSkipNoticeFaded { - opacity: 0.5; -} - -.sponsorSkipNoticeFadeOut { - transition: opacity 3s cubic-bezier(0.55, 0.055, 0.675, 0.19); - opacity: 0 !important; - animation: none !important; -} - -.sponsorSkipNotice .sponsorSkipNoticeTimeLeft { - color: #eeeeee; - - border-radius: 4px; - padding: 2px 5px; - font-size: 12px; - - display: flex; - align-items: center; - - border: 1px solid #eeeeee; -} - -.sponsorSkipNoticeTimeLeft img { - vertical-align: middle; - height: 13px; - - padding-top: 7.8%; - padding-bottom: 7.8%; -} - -/* if two are very close to eachother */ -.secondSkipNotice { - bottom: 290px; -} - -.noticeLeftIcon { - display: flex; - align-items: center; -} - -.sponsorSkipNotice .sponsorSkipNoticeUnskipSection { - float: left; - - border-left: 1px solid rgb(150, 150, 150); -} - -.sponsorSkipNoticeButton { - background: none; - color: rgb(235, 235, 235); - border: none; - display: inline-block; - font-size: 13.3333px !important; - - cursor: pointer; - - margin-right: 10px; - - padding: 2px 5px; -} - -.sponsorSkipNoticeButton:hover { - background-color: rgba(235, 235, 235,0.2); - border-radius: 4px; - - transition: background-color 0.4s; -} - -.sponsorSkipNoticeFirstRow .sponsorSkipNoticeButton.sponsorSkipSmallButton { - height: 1.3em; - padding: 0; -} - -.sponsorTimesVoteButtonsContainer { - float: left; - vertical-align:middle; - padding: 2px 5px; - - margin-right: 4px; -} - -.sponsorTimesVoteButtonsContainer div{ - display: inline-block; -} - -.sponsorSkipNoticeRightSection { - right: 0; - position: absolute; - - float: right; - - margin-right: 10px; - display: flex; - align-items: center; -} - -.sponsorSkipNoticeRightButton { - margin-right: 0; -} - -.sponsorSkipNoticeCloseButton { - height: 10px; - width: 10px; - box-sizing: unset; - - padding: 2px 5px; - - margin-left: 2px; - float: right; -} - -.sponsorSkipNoticeCloseButton.biggerCloseButton { - padding: 20px; -} - -.sponsorSkipMessage { - font-size: 14px; - font-weight: bold; - color: rgb(235, 235, 235); - - margin-top: auto; - display: inline-block; - margin-right: 10px; - margin-bottom: auto; -} - -.sponsorSkipInfo { - font-size: 10px; - color: #000000; - text-align: center; - margin-top: 0px; -} - -#sponsorTimesThanksForVotingText { - font-size: 20px; - font-weight: bold; - color: #000000; - text-align: center; - margin-top: 0px; - margin-bottom: 0px; -} - -#sponsorTimesThanksForVotingInfoText { - font-size: 12px; - font-weight: bold; - color: #000000; - text-align: center; - margin-top: 0px; -} - -.sponsorTimesVoteButtonMessage { - float: left; -} - -.sponsorTimesInfoMessage { - font-size: 13.3333px; - color: rgb(235, 235, 235); -} - -.sb-guidelines-notice .sponsorTimesInfoMessage td { - padding-left: 5px; - padding-top: 2px; - padding-bottom: 2px; - font-size: 15px; - - display: flex; - align-items: center; -} - .sponsorTimesInfoIcon { width: 30px; padding-right: 10px; diff --git a/public/popup.css b/public/popup.css index c6c78064..5dd0ec5b 100644 --- a/public/popup.css +++ b/public/popup.css @@ -155,6 +155,10 @@ margin: 5px auto; } +#issueReporterImportExport { + position: relative; +} + #refreshSegmentsButton, #issueReporterImportExport button { background: transparent; border-radius: 50%; diff --git a/public/popup.html b/public/popup.html index f8f076ad..91b0e0bb 100644 --- a/public/popup.html +++ b/public/popup.html @@ -6,6 +6,7 @@ + diff --git a/public/shared.css b/public/shared.css new file mode 100644 index 00000000..5cb53f88 --- /dev/null +++ b/public/shared.css @@ -0,0 +1,219 @@ +.sponsorSkipNoticeParent { + position: absolute; + + bottom: 100px; + right: var(--skip-notice-right); +} + +.sponsorSkipNoticeParent, .sponsorSkipNotice { + border-spacing: var(--skip-notice-border-horizontal) var(--skip-notice-border-vertical); + padding-left: var(--skip-notice-padding); + padding-right: var(--skip-notice-padding); + + border-collapse: unset; +} + +.sponsorSkipNoticeParent { + min-width: 350px; + max-width: 50%; +} + +.sponsorSkipNotice { + width: 100%; +} + +.sponsorSkipNoticeTableContainer { + background-color: rgba(28, 28, 28, 0.9); + border-radius: 5px; + min-width: 100%; +} + +.sponsorSkipNotice { + transition: all 0.1s ease-out; +} + +.sponsorSkipNoticeLimitWidth { + max-width: calc(100% - 50px); +} + +.sponsorSkipNotice .hidden { + display: none; +} + +/* For Cloudtube */ +.sponsorSkipNotice td, .sponsorSkipNotice table, .sponsorSkipNotice th { + border: none; +} + +.sponsorSkipNoticeFadeIn { + animation: fadeIn 0.5s ease-out; +} + +.sponsorSkipNoticeFaded { + opacity: 0.5; +} + +.sponsorSkipNoticeFadeOut { + transition: opacity 3s cubic-bezier(0.55, 0.055, 0.675, 0.19); + opacity: 0 !important; + animation: none !important; +} + +.sponsorSkipNotice .sponsorSkipNoticeTimeLeft { + color: #eeeeee; + + border-radius: 4px; + padding: 2px 5px; + font-size: 12px; + + display: flex; + align-items: center; + + border: 1px solid #eeeeee; +} + +.sponsorSkipNoticeTimeLeft img { + vertical-align: middle; + height: 13px; + + padding-top: 7.8%; + padding-bottom: 7.8%; +} + +/* if two are very close to eachother */ +.secondSkipNotice { + bottom: 290px; +} + +.noticeLeftIcon { + display: flex; + align-items: center; +} + +.sponsorSkipNotice .sponsorSkipNoticeUnskipSection { + float: left; + + border-left: 1px solid rgb(150, 150, 150); +} + +.sponsorSkipNoticeButton { + background: none; + color: rgb(235, 235, 235); + border: none; + display: inline-block; + font-size: 13.3333px !important; + + cursor: pointer; + + margin-right: 10px; + + padding: 2px 5px; +} + +.sponsorSkipNoticeButton:hover { + background-color: rgba(235, 235, 235,0.2); + border-radius: 4px; + + transition: background-color 0.4s; +} + +.sponsorSkipNoticeFirstRow .sponsorSkipNoticeButton.sponsorSkipSmallButton { + height: 1.3em; + padding: 0; +} + +.sponsorTimesVoteButtonsContainer { + float: left; + vertical-align:middle; + padding: 2px 5px; + + margin-right: 4px; +} + +.sponsorTimesVoteButtonsContainer div{ + display: inline-block; +} + +.sponsorSkipNoticeRightSection { + right: 0; + position: absolute; + + float: right; + + margin-right: 10px; + display: flex; + align-items: center; +} + +.sponsorSkipNoticeRightButton { + margin-right: 0; +} + +.sponsorSkipNoticeCloseButton { + height: 10px; + width: 10px; + box-sizing: unset; + + padding: 2px 5px; + + margin-left: 2px; + float: right; +} + +.sponsorSkipNoticeCloseButton.biggerCloseButton { + padding: 20px; +} + +.sponsorSkipMessage { + font-size: 14px; + font-weight: bold; + color: rgb(235, 235, 235); + + margin-top: auto; + display: inline-block; + margin-right: 10px; + margin-bottom: auto; +} + +.sponsorSkipInfo { + font-size: 10px; + color: #000000; + text-align: center; + margin-top: 0px; +} + +#sponsorTimesThanksForVotingText { + font-size: 20px; + font-weight: bold; + color: #000000; + text-align: center; + margin-top: 0px; + margin-bottom: 0px; +} + +#sponsorTimesThanksForVotingInfoText { + font-size: 12px; + font-weight: bold; + color: #000000; + text-align: center; + margin-top: 0px; +} + +.sponsorTimesVoteButtonMessage { + float: left; +} + +.sponsorTimesInfoMessage { + font-size: 13.3333px; + color: rgb(235, 235, 235); +} + +.sb-guidelines-notice .sponsorTimesInfoMessage td { + padding-left: 5px; + padding-top: 2px; + padding-bottom: 2px; + font-size: 15px; + + display: flex; + align-items: center; +} \ No newline at end of file diff --git a/src/components/NoticeComponent.tsx b/src/components/NoticeComponent.tsx index 83540875..cf108671 100644 --- a/src/components/NoticeComponent.tsx +++ b/src/components/NoticeComponent.tsx @@ -11,6 +11,7 @@ export interface NoticeProps { noticeTitle: string, maxCountdownTime?: () => number, + dontPauseCountdown?: boolean, amountOfPreviousNotices?: number, showInSecondSlot?: boolean, timed?: boolean, @@ -25,6 +26,8 @@ export interface NoticeProps { smaller?: boolean, limitWidth?: boolean, extraClass?: string, + hideLogo?: boolean, + hideRightInfo?: boolean, // Callback for when this is closed closeListener: () => void, @@ -117,13 +120,15 @@ class NoticeComponent extends React.Component { {/* Left column */} {/* Logo */} - - + {!this.props.hideLogo && + + + } {this.props.noticeTitle} @@ -135,28 +140,30 @@ class NoticeComponent extends React.Component { {this.props.firstRow} {/* Right column */} - + {!this.props.hideRightInfo && + + + {/* Time left */} + {this.props.timed ? ( + this.toggleManualPause()} + className="sponsorSkipObject sponsorSkipNoticeTimeLeft"> + + {this.getCountdownElements()} + + + ) : ""} - {/* Time left */} - {this.props.timed ? ( - this.toggleManualPause()} - className="sponsorSkipObject sponsorSkipNoticeTimeLeft"> - {this.getCountdownElements()} - - - ) : ""} - - - {/* Close button */} - this.close()}> - - + {/* Close button */} + this.close()}> + + + } {this.props.children} @@ -289,7 +296,7 @@ class NoticeComponent extends React.Component { } pauseCountdown(): void { - if (!this.props.timed) return; + if (!this.props.timed || this.props.dontPauseCountdown) return; //remove setInterval if (this.countdownInterval) clearInterval(this.countdownInterval); diff --git a/src/popup.ts b/src/popup.ts index 7a598281..9c5cafec 100644 --- a/src/popup.ts +++ b/src/popup.ts @@ -9,6 +9,7 @@ import { GenericUtils } from "./utils/genericUtils"; import { shortCategoryName } from "./utils/categoryUtils"; import { localizeHtmlPage } from "./utils/pageUtils"; import { exportTimes } from "./utils/exporter"; +import GenericNotice from "./render/GenericNotice"; const utils = new Utils(); interface MessageListener { @@ -966,6 +967,23 @@ async function runThePopup(messageListener?: MessageListener): Promise { const stopAnimation = AnimationUtils.applyLoadingAnimation(PageElements.exportSegmentsButton, 0.3); stopAnimation(); + new GenericNotice(null, "exportCopied", { + title: chrome.i18n.getMessage(`CopiedExclamation`), + timed: true, + maxCountdownTime: () => 0.6, + referenceNode: PageElements.exportSegmentsButton.parentElement, + dontPauseCountdown: true, + style: { + top: 0, + bottom: 0, + minWidth: 0, + right: "30px", + margin: "auto", + height: "max-content" + }, + hideLogo: true, + hideRightInfo: true + }); } /** diff --git a/src/render/GenericNotice.tsx b/src/render/GenericNotice.tsx index d00799fb..32f0ad50 100644 --- a/src/render/GenericNotice.tsx +++ b/src/render/GenericNotice.tsx @@ -20,12 +20,17 @@ export interface TextBox { export interface NoticeOptions { title: string, + referenceNode?: HTMLElement, textBoxes?: TextBox[], buttons?: ButtonListener[], fadeIn?: boolean, timed?: boolean style?: React.CSSProperties; extraClass?: string; + maxCountdownTime?: () => number; + dontPauseCountdown?: boolean; + hideLogo?: boolean; + hideRightInfo?: boolean; } export default class GenericNotice { @@ -42,7 +47,7 @@ export default class GenericNotice { this.contentContainer = contentContainer; - const referenceNode = utils.findReferenceNode(); + const referenceNode = options.referenceNode ?? utils.findReferenceNode(); this.noticeElement = document.createElement("div"); this.noticeElement.id = "sponsorSkipNoticeContainer" + idSuffix; @@ -62,6 +67,10 @@ export default class GenericNotice { ref={this.noticeRef} style={options.style} extraClass={options.extraClass} + maxCountdownTime={options.maxCountdownTime} + dontPauseCountdown={options.dontPauseCountdown} + hideLogo={options.hideLogo} + hideRightInfo={options.hideRightInfo} closeListener={() => this.close()} > {this.getMessageBox(this.idSuffix, options.textBoxes)}