Prompt to accept youtube.com permission if video info fails to load

Should fix #698, #687, #611 and #635 (cherry picked from commit 3ff5fdb3a10d09de34d979f696133c17b5b58c31)
author: Ajay Ramachandran <[email protected]> 2021-03-24 20:13:33 -0400
committer: Ajay Ramachandran <[email protected]> 2021-05-10 16:22:46 -0400
commit: bf84139ea7530f2b03fecc5b8429a4f818d99e8b (patch)
tree: 8c720ee6c5686879e410736ebc7c07ba465b86a9 /public/permissions
parent: abe3f0532a52e5bbc7eabdd1a895ebc32e9b46fd (diff)
download: SponsorBlock-bf84139ea7530f2b03fecc5b8429a4f818d99e8b.tar.gz
SponsorBlock-bf84139ea7530f2b03fecc5b8429a4f818d99e8b.zip
2 files changed, 384 insertions, 0 deletions
diff --git a/public/permissions/index.html b/public/permissions/index.html
new file mode 100644
index 00000000..4475f039
--- /dev/null
+++ b/public/permissions/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+
+<head>
+  <title>Permissions - SponsorBlock</title>
+  <meta charset="utf-8">
+
+  <link href="styles.css" rel="stylesheet"/>
+
+  <script src="../js/vendor.js"></script>
+  <script src="../js/permissions.js"></script>
+</head>
+
+<body class="sponsorBlockPageBody">
+
+	<div id="title" class="titleBar">
+		<img src="../icons/LogoSponsorBlocker256px.png" height="80" class="profilepic"/>
+		SponsorBlock
+	</div>
+
+	<br/>
+
+	<div class="center">
+		<div id="acceptPermissionButton" class="option-button inline">
+			__MSG_acceptPermission__
+		</div>
+	</div>
+
+</body>
diff --git a/public/permissions/styles.css b/public/permissions/styles.css
new file mode 100644
index 00000000..971c6893
--- /dev/null
+++ b/public/permissions/styles.css
@@ -0,0 +1,356 @@
+/* Options page CSS */
+body {
+    font-family: sans-serif;
+}
+
+.center {
+    text-align: center;
+}
+
+.inline {
+    display: inline-block;
+}
+
+.bold {
+    font-weight: bold;
+}
+
+.hidden {
+    display: none !important;
+}
+
+.keybind-status {
+    display: inline;
+}
+
+.small-description {
+    color: white;
+    font-size: 13px;
+}
+
+.medium-description {
+    color: white;
+    font-size: 15px;
+}
+
+.option-text-box {
+    width: 300px;
+}
+
+.option-button {
+    cursor: pointer;
+
+    background-color: #c00000;
+    padding: 10px;
+    color: white;
+    border-radius: 5px;
+    font-size: 14px;
+
+    width: max-content;
+}
+
+.option-button:hover {
+    background-color: #fc0303;
+}
+
+.option-button.disabled {
+    cursor: default;
+
+    background-color: #520000;
+    color: grey;
+}
+
+#options {
+    max-width: 60%;
+    text-align: left;
+    display: inline-block;
+}
+
+.switch-container:after {
+	content: attr(label-name);
+    position: absolute;
+    padding: 4px;
+    width: max-content;
+
+    font-size: 14px;
+    color: white;
+}
+
+.text-label-container {
+    font-size: 14px;
+    color: white;
+}
+
+.switch {
+    position: relative;
+    display: inline-block;
+    width: 40px;
+    height: 24px;
+}
+
+.switch input { 
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+
+.slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #707070;
+}
+
+.animated * {
+    -webkit-transition: .4s;
+    transition: .4s;
+}
+
+.slider:before {
+    position: absolute;
+    content: "";
+    height: 16px;
+    width: 16px;
+    left: 4px;
+    bottom: 4px;
+    background-color: white;
+}
+
+.animated .slider:before {
+    -webkit-transition: .4s;
+    transition: .4s;
+}
+
+input:checked + .slider {
+    background-color: #fc0303;
+}
+
+input:checked + .slider:before {
+    -webkit-transform: translateX(16px);
+    -ms-transform: translateX(16px);
+    transform: translateX(16px);
+}
+
+/* Rounded sliders */
+.slider.round {
+    border-radius: 34px;
+}
+
+.slider.round:before {
+    border-radius: 50%;
+}
+
+
+/* Boilerplate CSS from https://ajay.app */
+
+body {
+    background-color: #333333;
+}
+
+.projectPreview {
+    position: relative;
+}
+
+.projectPreviewImage {
+    position: absolute;
+    left: -90px;
+    width: 80px;
+    top: 50%;
+    transform: translateY(-50%);
+}
+
+.projectPreviewImageLarge {
+    position: absolute;
+    left: -210px;
+    width: 200px;
+    top: 50%;
+    transform: translateY(-20%);
+}
+
+.projectPreviewImageLargeRight {
+    position: absolute;
+    right: -210px;
+    width: 200px;
+    top: 50%;
+    transform: translateY(-50%);
+}
+
+.createdBy {
+    font-size: 14px;
+    text-align: center;
+    padding-top: 0px;
+    padding-bottom: 0px;
+
+    display: inline-block;
+}
+
+#title {
+    background-color: #636363;
+  
+    text-align: center;
+    vertical-align: middle;
+  
+    font-size: 50px;
+    color: #212121;
+  
+    padding: 20px;
+  
+    text-decoration: none;
+  
+    transition: font-size 1s;
+}
+
+.subtitle {
+    font-size: 40px;
+    color: #dad8d8;
+  
+    padding-top: 10px;
+  
+    transition: font-size 0.4s;
+}
+
+.subtitle:hover {
+    font-size: 45px;
+  
+    transition: font-size 0.4s;
+}
+
+.profilepic {
+    background-color: #636363 !important;
+    vertical-align: middle;
+}
+
+.profilepiccircle {
+    vertical-align: middle;
+    overflow: hidden;
+    border-radius: 50%;
+}
+
+a {
+    text-decoration: underline;
+    color: inherit;
+}
+
+.link {
+    padding: 20px;
+  
+    height: 80px;
+  
+    transition: height 0.2s;
+}
+
+.link:hover {
+    height: 95px;
+  
+    transition: height 0.2s;
+}
+
+#contact,.smalllink {
+    font-size: 25px;
+    color: #e8e8e8;
+  
+    text-align: center;
+  
+    padding: 10px;
+}
+
+#contact {
+    text-decoration: none;
+}
+
+p,li {
+    font-size: 20px;
+    color: #c4c4c4;
+  
+    padding: 10px;
+}
+
+p,li,code,a {
+    max-width: 60%;
+    text-align: left;
+    overflow-wrap: break-word;
+}
+
+@media screen and (orientation:portrait) {
+    p,li,code,a {
+        max-width: 100%;
+    }
+  
+    .projectPreviewImage {
+        position: unset;
+        width: 130px;
+        display: block;
+        margin: auto;
+        transform: none;
+    }
+}
+
+.previewImage {
+    max-height: 200px;
+}
+
+img {
+    max-width: 100%;
+  
+    text-align: center;
+}
+
+#recentPostTitle {
+    font-size: 30px;
+    color: #dad8d8;
+}
+
+#recentPostDate {
+    font-size: 15px;
+    color: #dad8d8;
+}
+
+h1,h2,h3,h4,h5,h6 {
+    color: #dad8d8;
+}
+
+svg {
+    text-decoration: none; 
+}
+
+.number-container:before {
+    content: attr(label-name);
+    padding-right: 4px;
+    width: max-content;
+
+    font-size: 14px;
+    color: white;
+}
+
+/* React styles */
+
+.categoryTableElement {
+    font-size: 16px;
+
+    color: white;
+}
+
+.categoryTableElement > * {
+    padding-right: 15px;
+    padding-bottom: 15px;
+}
+
+.categoryOptionsSelector {
+    background-color: #c00000;
+    color: white;
+    
+    border: none;
+    font-size: 14px;
+    padding: 5px;
+    border-radius: 5px;
+}
+
+.categoryColorTextBox {
+    width: 60px;
+
+    background: none;
+    border: none;
+}
+\ No newline at end of file
author	Ajay Ramachandran <[email protected]>	2021-03-24 20:13:33 -0400
committer	Ajay Ramachandran <[email protected]>	2021-05-10 16:22:46 -0400
commit	bf84139ea7530f2b03fecc5b8429a4f818d99e8b (patch)
tree	8c720ee6c5686879e410736ebc7c07ba465b86a9 /public/permissions
parent	abe3f0532a52e5bbc7eabdd1a895ebc32e9b46fd (diff)
download	SponsorBlock-bf84139ea7530f2b03fecc5b8429a4f818d99e8b.tar.gz SponsorBlock-bf84139ea7530f2b03fecc5b8429a4f818d99e8b.zip