Add notice showing that copy happened

manifest/manifest.json

@@ -18,6 +18,7 @@
         ],
         "css": [
             "content.css",
+            "shared.css",
             "./libs/Source+Sans+Pro.css",
             "popup.css"
         ]

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"
     }
 }

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;

public/popup.css

@@ -155,6 +155,10 @@
   margin: 5px auto;
 }
 
+#issueReporterImportExport {
+  position: relative;
+}
+
 #refreshSegmentsButton, #issueReporterImportExport button {
   background: transparent;
   border-radius: 50%;

public/popup.html

@@ -6,6 +6,7 @@
     <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">

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;
+}

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<NoticeProps, NoticeState> {
                                 {/* Left column */}
                                 <td className="noticeLeftIcon">
                                     {/* Logo */}
-                                    <img id={"sponsorSkipLogo" + this.idSuffix} 
+                                    {!this.props.hideLogo &&
-                                        className="sponsorSkipLogo sponsorSkipObject"
+                                        <img id={"sponsorSkipLogo" + this.idSuffix} 
-                                        src={chrome.extension.getURL("icons/IconSponsorBlocker256px.png")}>
+                                            className="sponsorSkipLogo sponsorSkipObject"
-                                    </img>
+                                            src={chrome.extension.getURL("icons/IconSponsorBlocker256px.png")}>
+                                        </img>
+                                    }
 
                                     <span id={"sponsorSkipMessage" + this.idSuffix}
-                                        style={{float: "left"}}
+                                        style={{float: "left", marginRight: this.props.hideLogo ? "0px" : null}}
                                         className="sponsorSkipMessage sponsorSkipObject">
                                         
                                         {this.props.noticeTitle}
@@ -135,28 +140,30 @@ class NoticeComponent extends React.Component<NoticeProps, NoticeState> {
                                 {this.props.firstRow}
 
                                 {/* Right column */}
-                                <td className="sponsorSkipNoticeRightSection"
+                                {!this.props.hideRightInfo &&
-                                    style={{top: "9.32px"}}>
+                                    <td className="sponsorSkipNoticeRightSection"
+                                        style={{top: "9.32px"}}>
                                         
-                                    {/* Time left */}
+                                        {/* Time left */}
-                                    {this.props.timed ? ( 
+                                        {this.props.timed ? ( 
-                                        <span id={"sponsorSkipNoticeTimeLeft" + this.idSuffix}
+                                            <span id={"sponsorSkipNoticeTimeLeft" + this.idSuffix}
-                                            onClick={() => this.toggleManualPause()}
+                                                onClick={() => this.toggleManualPause()}
-                                            className="sponsorSkipObject sponsorSkipNoticeTimeLeft">
+                                                className="sponsorSkipObject sponsorSkipNoticeTimeLeft">
 
-                                            {this.getCountdownElements()}
+                                                {this.getCountdownElements()}
 
-                                        </span>
+                                            </span>
-                                    ) : ""}
+                                        ) : ""}
                                     
 
-                                    {/* Close button */}
+                                        {/* Close button */}
-                                    <img src={chrome.extension.getURL("icons/close.png")}
+                                        <img src={chrome.extension.getURL("icons/close.png")}
-                                        className={"sponsorSkipObject sponsorSkipNoticeButton sponsorSkipNoticeCloseButton sponsorSkipNoticeRightButton" 
+                                            className={"sponsorSkipObject sponsorSkipNoticeButton sponsorSkipNoticeCloseButton sponsorSkipNoticeRightButton" 
-                                                        + (this.props.biggerCloseButton ? " biggerCloseButton" : "")}
+                                                            + (this.props.biggerCloseButton ? " biggerCloseButton" : "")}
-                                        onClick={() => this.close()}>
+                                            onClick={() => this.close()}>
-                                    </img>
+                                        </img>
-                                </td>
+                                    </td>
+                                }
                             </tr> 
 
                             {this.props.children}
@@ -289,7 +296,7 @@ class NoticeComponent extends React.Component<NoticeProps, NoticeState> {
     }
 
     pauseCountdown(): void {
-        if (!this.props.timed) return;
+        if (!this.props.timed || this.props.dontPauseCountdown) return;
 
         //remove setInterval
         if (this.countdownInterval) clearInterval(this.countdownInterval);

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<void> {
 
         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
+        });
     }
 
     /**

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)}