Initial commit

.gitignore

@@ -0,0 +1 @@
+node_modules/

LICENSE

@@ -0,0 +1,7 @@
+Copyright 2019 Dylan Baker
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

README.md

@@ -0,0 +1,21 @@
+# Refined YouTube
+
+This is a browser extension that lets you view YouTube videos in a plain,
+distraction-free page. Upon visiting a YouTube video, the extension will add a
+button to the page that, when clicked, will remove everything but the video and
+display it against a plain, dark background.
+
+## Installation
+
+Clone or download this repository and then load it as an unpacked extension.
+This is accomplished in different ways in different browsers.
+
+Chrome: visit `chrome://extensions`, enable `Developer mode`, and click `Load
+unpacked`. Select this repository's `ext` directory.
+
+Firefox: visit `about:debugging` and click `Load Temporary Add-On`. Select
+`ext/manifest.json` in this repository.
+
+## License
+
+This extension is open source software under the terms of the MIT License.

ext/_locales/en/messages.json

@@ -0,0 +1,66 @@
+{
+  "l10nTabName": {
+    "message":"Localization"
+    ,"description":"name of the localization tab"
+  }
+  ,"l10nHeader": {
+    "message":"It does localization too! (this whole tab is, actually)"
+    ,"description":"Header text for the localization section"
+  }
+  ,"l10nIntro": {
+    "message":"'L10n' refers to 'Localization' - 'L' an 'n' are obvious, and 10 comes from the number of letters between those two.  It is the process/whatever of displaying something in the language of choice.  It uses 'I18n', 'Internationalization', which refers to the tools / framework supporting L10n.  I.e., something is internationalized if it has I18n support, and can be localized.  Something is localized for you if it is in your language / dialect."
+    ,"description":"introduce the basic idea."
+  }
+  ,"l10nProd": {
+    "message":"You <strong>are</strong> planning to allow localization, right?  You have <em>no idea</em> who will be using your extension!  You have no idea who will be translating it!  At least support the basics, it's not hard, and having the framework in place will let you transition much more easily later on."
+    ,"description":"drive the point home.  It's good for you."
+  }
+  ,"l10nFirstParagraph": {
+    "message":"When the options page loads, elements decorated with <strong>data-l10n</strong> will automatically be localized!"
+    ,"description":"inform that <el data-l10n='' /> elements will be localized on load"
+  }
+  ,"l10nSecondParagraph": {
+    "message":"If you need more complex localization, you can also define <strong>data-l10n-args</strong>.  This should contain <span class='code'>$containerType$</span> filled with <span class='code'>$dataType$</span>, which will be passed into Chrome's i18n API as <span class='code'>$functionArgs$</span>.  In fact, this paragraph does just that, and wraps the args in mono-space font.  Easy!"
+    ,"description":"introduce the data-l10n-args attribute.  End on a lame note."
+    ,"placeholders": {
+      "containerType": {
+        "content":"$1"
+        ,"example":"'array', 'list', or something similar"
+        ,"description":"type of the args container"
+      }
+      ,"dataType": {
+        "content":"$2"
+        ,"example":"string"
+        ,"description":"type of data in each array index"
+      }
+      ,"functionArgs": {
+        "content":"$3"
+        ,"example":"arguments"
+        ,"description":"whatever you call what you pass into a function/method.  args, params, etc."
+      }
+    }
+  }
+  ,"l10nThirdParagraph": {
+    "message":"Message contents are passed right into innerHTML without processing - include any tags (or even scripts) that you feel like.  If you have an input field, the placeholder will be set instead, and buttons will have the value attribute set."
+    ,"description":"inform that we handle placeholders, buttons, and direct HTML input"
+  }
+  ,"l10nButtonsBefore": {
+    "message":"Different types of buttons are handled as well.  &lt;button&gt; elements have their html set:"
+  }
+  ,"l10nButton": {
+    "message":"in a <strong>button</strong>"
+  }
+  ,"l10nButtonsBetween": {
+    "message":"while &lt;input type='submit'&gt; and &lt;input type='button'&gt; get their 'value' set (note: no HTML):"
+  }
+  ,"l10nSubmit": {
+    "message":"a <strong>submit</strong> value"
+  }
+  ,"l10nButtonsAfter": {
+    "message":"Awesome, no?"
+  }
+  ,"l10nExtras": {
+    "message":"You can even set <span class='code'>data-l10n</span> on things like the &lt;title&gt; tag, which lets you have translatable page titles, or fieldset &lt;legend&gt; tags, or anywhere else - the default <span class='code'>Boil.localize()</span> behavior will check every tag in the document, not just the body."
+    ,"description":"inform about places which may not be obvious, like <title>, etc"
+  }
+}

ext/index.js

@@ -0,0 +1 @@
+!function(e){var n={};function t(o){if(n[o])return n[o].exports;var r=n[o]={i:o,l:!1,exports:{}};return e[o].call(r.exports,r,r.exports,t),r.l=!0,r.exports}t.m=e,t.c=n,t.d=function(e,n,o){t.o(e,n)||Object.defineProperty(e,n,{enumerable:!0,get:o})},t.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},t.t=function(e,n){if(1&n&&(e=t(e)),8&n)return e;if(4&n&&"object"==typeof e&&e&&e.__esModule)return e;var o=Object.create(null);if(t.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:e}),2&n&&"string"!=typeof e)for(var r in e)t.d(o,r,function(n){return e[n]}.bind(null,r));return o},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},t.p="",t(t.s=1)}([function(e,n,t){},function(e,n,t){"use strict";t.r(n);const o=e=>`\n  <head>\n    <title>Refined YouTube</title>\n    <meta charset="utf8">\n  </head>\n  <body class="refined-youtube">\n    <div id="refined-youtube-container">\n      <iframe\n        width="1280"\n        height="720"\n        src="https://www.youtube.com/embed/${e}"\n        frameborder="0"\n        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"\n        allowfullscreen\n      ></iframe>\n    </div>\n    <a id="refined-youtube-close-button" href="https://www.youtube.com/watch?v=${e}">\n      x\n    </a>\n  </body>\n`;t(0);window.onload=async()=>{const e=e=>document.querySelector(e),n=e=>{const n=window.location.search.substr(1).split("&").map(e=>e.split("=")).find(n=>n[0]===e);return n?n[1]:void 0},t=n=>e("html").innerHTML=n,r=n("v"),u=!!n("refined");if(void 0!==r)if(u)t(o(r));else{const n=document.createElement("div");n.innerHTML='\n  <div id="refined-youtube-launch-container">\n    <button id="refined-youtube-launch-button">\n      View on Refined YouTube\n    </button>\n    <span id="refined-youtube-launch-close-button">\n      x\n    </span>\n  </div>\n',document.body.append(n);const u=e("#refined-youtube-launch-button"),i=e("#refined-youtube-launch-close-button");u.addEventListener("click",()=>t(o(r))),i.addEventListener("click",()=>{const n=e("#refined-youtube-launch-container");n.style.opacity=0,setTimeout(()=>{n.remove()},1e3)})}}}]);

ext/manifest.json

@@ -0,0 +1,26 @@
+{
+  "name": "Refined YouTube",
+  "version": "0.0.1",
+  "manifest_version": 2,
+  "description": "A more refined YouTube experience",
+  "homepage_url": "https://git.sr.ht/~simulacrumparty/refined-youtube",
+  "icons": {
+    "16": "icons/icon16.png",
+    "48": "icons/icon48.png",
+    "128": "icons/icon128.png"
+  },
+  "default_locale": "en",
+  "content_scripts": [
+    {
+      "matches": [
+        "https://www.youtube.com/*"
+      ],
+      "css": [
+        "style.css"
+      ],
+      "js": [
+        "index.js"
+      ]
+    }
+  ]
+}

ext/style.css

@@ -0,0 +1,63 @@
+#refined-youtube-launch-container {
+  align-items: center;
+  background: white;
+  border-top: 2px solid #000000;
+  bottom: 0;
+  box-sizing: border-box;
+  display: flex;
+  height: 100px;
+  justify-content: center;
+  position: fixed;
+  transition: opacity 1s;
+  width: 100vw;
+  z-index: 999;
+}
+
+#refined-youtube-launch-button {
+  background-color: #CC0000;
+  border-radius: 5px;
+  color: #FFFFFF;
+  cursor: pointer;
+  font-family: Roboto;
+  font-size: 14px;
+  font-weight: 500;
+  padding: 12px 20px;
+  text-decoration: none;
+  text-transform: uppercase;
+}
+
+#refined-youtube-launch-close-button {
+  cursor: pointer;
+  font-size: 20px;
+  position: absolute;
+  right: 20px;
+  top: 5px;
+}
+
+#refined-youtube-close-button {
+  color: #f5f5f5;
+  cursor: pointer;
+  font-size: 36px;
+  position: fixed;
+  right: 20px;
+  text-decoration: none;
+  top: 10px;
+}
+
+#refined-youtube-close-button:hover,
+#refined-youtube-launch-close-button:hover {
+  transform: scale(1.1);
+  transition: transform .2s ease-in-out;
+}
+
+body.refined-youtube {
+  background: #1f1f1f;
+}
+
+#refined-youtube-container {
+  align-items: center;
+  display: flex;
+  height: 100vh;
+  justify-content: center;
+}
+

package.json

@@ -0,0 +1,19 @@
+{
+  "name": "ext",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "build": "webpack",
+    "watch": "webpack --watch"
+  },
+  "keywords": [],
+  "author": "Dylan Baker <dylan@simulacrum.party>",
+  "license": "MIT",
+  "devDependencies": {
+    "css-loader": "^3.0.0",
+    "mini-css-extract-plugin": "^0.7.0",
+    "webpack": "^4.35.3",
+    "webpack-cli": "^3.3.5"
+  }
+}

src/index.js

@@ -0,0 +1,45 @@
+import { buildLaunchContainer, buildRefinedPage } from './templates';
+import './style.css';
+
+const run = async () => {
+  const $ = (selector) => document.querySelector(selector);
+  const fetchParam = (name) => {
+    const param = window.location.search
+      .substr(1)
+      .split('&')
+      .map((param) => param.split('='))
+      .find((param) => param[0] === name);
+    return param ? param[1] : undefined;
+  };
+
+  const refinePage = (page) => ($('html').innerHTML = page);
+
+  const videoId = fetchParam('v');
+  const refineImmediately = fetchParam('refined') ? true : false;
+
+  if (videoId !== undefined) {
+    if (refineImmediately) {
+      refinePage(buildRefinedPage(videoId));
+    } else {
+      const launchContainer = document.createElement('div');
+      launchContainer.innerHTML = buildLaunchContainer(videoId);
+      document.body.append(launchContainer);
+
+      const launchButton = $('#refined-youtube-launch-button');
+      const launchCloseButton = $('#refined-youtube-launch-close-button');
+
+      launchButton.addEventListener('click', () =>
+        refinePage(buildRefinedPage(videoId))
+      );
+      launchCloseButton.addEventListener('click', () => {
+        const launchContainer = $('#refined-youtube-launch-container');
+        launchContainer.style.opacity = 0;
+        setTimeout(() => {
+          launchContainer.remove();
+        }, 1000);
+      });
+    }
+  }
+};
+
+run();

src/style.css

@@ -0,0 +1,62 @@
+#refined-youtube-launch-container {
+  align-items: center;
+  background: white;
+  border-top: 2px solid #000000;
+  bottom: 0;
+  box-sizing: border-box;
+  display: flex;
+  height: 100px;
+  justify-content: center;
+  position: fixed;
+  transition: opacity 1s;
+  width: 100vw;
+  z-index: 999;
+}
+
+#refined-youtube-launch-button {
+  background-color: #CC0000;
+  border-radius: 5px;
+  color: #FFFFFF;
+  cursor: pointer;
+  font-family: Roboto;
+  font-size: 14px;
+  font-weight: 500;
+  padding: 12px 20px;
+  text-decoration: none;
+  text-transform: uppercase;
+}
+
+#refined-youtube-launch-close-button {
+  cursor: pointer;
+  font-size: 20px;
+  position: absolute;
+  right: 20px;
+  top: 5px;
+}
+
+#refined-youtube-close-button {
+  color: #f5f5f5;
+  cursor: pointer;
+  font-size: 36px;
+  position: fixed;
+  right: 20px;
+  text-decoration: none;
+  top: 10px;
+}
+
+#refined-youtube-close-button:hover,
+#refined-youtube-launch-close-button:hover {
+  transform: scale(1.1);
+  transition: transform .2s ease-in-out;
+}
+
+body.refined-youtube {
+  background: #1f1f1f;
+}
+
+#refined-youtube-container {
+  align-items: center;
+  display: flex;
+  height: 100vh;
+  justify-content: center;
+}

src/templates.js

@@ -0,0 +1,32 @@
+export const buildLaunchContainer = (videoId) => `
+  <div id="refined-youtube-launch-container">
+    <button id="refined-youtube-launch-button">
+      View on Refined YouTube
+    </button>
+    <span id="refined-youtube-launch-close-button">
+      x
+    </span>
+  </div>
+`;
+
+export const buildRefinedPage = (videoId) => `
+  <head>
+    <title>Refined YouTube</title>
+    <meta charset="utf8">
+  </head>
+  <body class="refined-youtube">
+    <div id="refined-youtube-container">
+      <iframe
+        width="1280"
+        height="720"
+        src="https://www.youtube.com/embed/${videoId}"
+        frameborder="0"
+        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+        allowfullscreen
+      ></iframe>
+    </div>
+    <a id="refined-youtube-close-button" href="https://www.youtube.com/watch?v=${videoId}">
+      x
+    </a>
+  </body>
+`;

webpack.config.js

@@ -0,0 +1,32 @@
+const path = require('path');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
+module.exports = {
+  entry: "./src/index.js",
+  output: {
+    path: path.resolve(__dirname, "ext"),
+    filename: "index.js",
+  },
+  mode: "production",
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: [
+          {
+            loader: MiniCssExtractPlugin.loader,
+            options: {
+              publicPath: (resourcePath, context) => {
+                return path.relative(path.dirname(resourcePath), context) + '/';
+              },
+            },
+          },
+          'css-loader',
+        ],
+      },
+    ]
+  },
+  plugins: [
+    new MiniCssExtractPlugin({ filename: 'style.css' }),
+  ],
+};