feat: migrate to Vuetify

BREAKING CHANGE: browser versions older than Chrome 92, Edge 92,
and Firefox 91 are no longer supported

.browserslistrc

@@ -0,0 +1,11 @@
+[chrome]
+Chrome >= 92
+Edge >= 92
+Opera >= 78
+
+[edge]
+Edge >= 92
+
+[firefox]
+Firefox >= 91
+FirefoxAndroid >= 91

.github/workflows/ci.yml

@@ -5,52 +5,46 @@ on: push
 jobs:
   build:
     name: Build
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-22.04
     permissions:
       contents: read
     steps:
       - name: Clone repository
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
         with:
           persist-credentials: 'false'
       - name: Setup Node.js
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v3
         with:
           node-version-file: '.nvmrc'
           cache: 'npm'
       - name: Install dependencies
-        run: npm install
+        run: npm install --legacy-peer-deps
       - name: Build artifacts
         run: |
           npm run build:prod:zip:chrome
           npm run build:prod:zip:edge
           npm run build:prod:zip:firefox
-          npm run build:prod:zip:opera
       - name: Hash artifacts
         run: sha256sum artifacts/*/*
         if: startsWith(github.ref, 'refs/tags/v')
       - name: Upload artifacts
-        uses: actions/upload-artifact@v2
+        uses: actions/upload-artifact@v3
         if: startsWith(github.ref, 'refs/tags/v')
         with:
           name: artifacts
           path: artifacts/
           retention-days: 1
   release:
     name: Release on GitHub
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-22.04
     needs: [build]
     if: startsWith(github.ref, 'refs/tags/v')
     permissions:
       contents: write
     steps:
-      - name: Get release information
-        id: release_info
-        run: |
-          echo ::set-output name=TAG::${GITHUB_REF/refs\/tags\//}
-          echo ::set-output name=VERSION::${GITHUB_REF/refs\/tags\/v/}
       - name: Download artifacts
-        uses: actions/download-artifact@v2
+        uses: actions/download-artifact@v3
         with:
           name: artifacts
           path: artifacts/
@@ -59,12 +53,12 @@ jobs:
       - name: Create GitHub release
         uses: softprops/action-gh-release@v1
         with:
-          tag_name: ${{ steps.release_info.outputs.TAG }}
-          name: ${{ steps.release_info.outputs.TAG }}
+          tag_name: ${{ github.ref_name }}
+          name: ${{ github.ref_name }}
           body: |
             Download and install the extension from the [extension store](https://github.com/dessant/youtube-autoplay#readme) of your browser.
 
-            Learn more about this release from the [changelog](https://github.com/dessant/youtube-autoplay/blob/master/CHANGELOG.md#changelog).
+            Learn more about this release from the [changelog](https://github.com/dessant/youtube-autoplay/blob/main/CHANGELOG.md#changelog).
           files: artifacts/*/*
           fail_on_unmatched_files: true
           draft: true

.gitignore

@@ -1,5 +1,4 @@
 /.assets/
-/app/
 
 node_modules/
 /artifacts/
@@ -12,3 +11,4 @@ node_modules/
 /npm-debug.log
 
 /report.json
+/report.html

.nvmrc

@@ -1 +1 @@
-16.13.1
+18.15.0

.prettierignore

@@ -1,2 +1,2 @@
-package.json
+/package.json
 *.md

README.md

@@ -3,11 +3,11 @@
 
 <p align="center">
   </br></br>
-  <a href="https://chrome.google.com/webstore/detail/aogbgdnkcjgamgglpikcenliinchedel">
+  <a href="https://chrome.google.com/webstore/detail/autoplay-settings-for-you/aogbgdnkcjgamgglpikcenliinchedel">
     <img height="58" src="https://i.imgur.com/K9Yh8G9.png" alt="Chrome Web Store"></a>
   <a href="https://addons.mozilla.org/en-US/firefox/addon/youtube_autoplay/">
     <img height="58" src="https://i.imgur.com/2jJOtTI.png" alt="Firefox add-ons"></a>
-  <a href="https://microsoftedge.microsoft.com/addons/detail/jeojbmbfnebmodmblljdmmbbfliolkgd">
+  <a href="https://microsoftedge.microsoft.com/addons/detail/autoplay-settings-for-you/jeojbmbfnebmodmblljdmmbbfliolkgd">
     <img height="58" src="https://i.imgur.com/es2YFRA.png" alt="Microsoft Store"></a>
   </br></br>
 </p>
@@ -35,7 +35,7 @@ your autoplay settings between sessions.
 
 ## License
 
-Copyright (c) 2018-2021 Armin Sebastian
+Copyright (c) 2018-2023 Armin Sebastian
 
 This software is released under the terms of the GNU General Public License v3.0.
 See the [LICENSE](LICENSE) file for further information.

babel.config.js

@@ -0,0 +1,34 @@
+const path = require('node:path');
+
+const corejsVersion = require(path.join(
+  path.dirname(require.resolve('core-js')),
+  'package.json'
+)).version;
+
+module.exports = function (api) {
+  const presets = [
+    [
+      '@babel/env',
+      {
+        modules: false,
+        bugfixes: true,
+        useBuiltIns: 'usage',
+        corejs: {version: corejsVersion}
+      }
+    ]
+  ];
+
+  const plugins = [];
+
+  const ignore = [
+    new RegExp(`node_modules\\${path.sep}(?!(vueton|wesa)\\${path.sep}).*`)
+  ];
+
+  const parserOpts = {plugins: ['importAssertions']};
+
+  if (api.env('production')) {
+    plugins.push('lodash');
+  }
+
+  return {presets, plugins, ignore, parserOpts};
+};

gulpfile.js

@@ -1,6 +1,12 @@
-const path = require('path');
-const {exec} = require('child_process');
-const {lstatSync, readdirSync, readFileSync, writeFileSync} = require('fs');
+const path = require('node:path');
+const {exec} = require('node:child_process');
+const {
+  lstatSync,
+  readdirSync,
+  readFileSync,
+  writeFileSync,
+  rmSync
+} = require('node:fs');
 
 const {series, parallel, src, dest} = require('gulp');
 const postcss = require('gulp-postcss');
@@ -9,28 +15,42 @@ const jsonMerge = require('gulp-merge-json');
 const jsonmin = require('gulp-jsonmin');
 const htmlmin = require('gulp-htmlmin');
 const imagemin = require('gulp-imagemin');
-const del = require('del');
 const {ensureDirSync} = require('fs-extra');
 const sharp = require('sharp');
 
-const targetEnv = process.env.TARGET_ENV || 'firefox';
+const targetEnv = process.env.TARGET_ENV || 'chrome';
 const isProduction = process.env.NODE_ENV === 'production';
-const distDir = path.join('dist', targetEnv);
+const enableContributions =
+  (process.env.ENABLE_CONTRIBUTIONS || 'true') === 'true';
+const distDir = path.join(__dirname, 'dist', targetEnv);
 
-function clean() {
-  return del([distDir]);
+function initEnv() {
+  process.env.BROWSERSLIST_ENV = targetEnv;
+}
+
+function init(done) {
+  initEnv();
+
+  rmSync(distDir, {recursive: true, force: true});
+  ensureDirSync(distDir);
+  done();
 }
 
 function js(done) {
-  exec('webpack-cli build --color', function(err, stdout, stderr) {
+  exec('webpack-cli build --color', function (err, stdout, stderr) {
     console.log(stdout);
     console.log(stderr);
     done(err);
   });
 }
 
 function html() {
-  return src('src/**/*.html', {base: '.'})
+  return src(
+    enableContributions
+      ? 'src/**/*.html'
+      : ['src/**/*.html', '!src/contribute/*.html'],
+    {base: '.'}
+  )
     .pipe(gulpif(isProduction, htmlmin({collapseWhitespace: true})))
     .pipe(dest(distDir));
 }
@@ -39,6 +59,9 @@ async function images(done) {
   ensureDirSync(path.join(distDir, 'src/assets/icons/app'));
   const appIconSvg = readFileSync('src/assets/icons/app/icon.svg');
   const appIconSizes = [16, 19, 24, 32, 38, 48, 64, 96, 128];
+  if (targetEnv === 'safari') {
+    appIconSizes.push(256, 512, 1024);
+  }
   for (const size of appIconSizes) {
     await sharp(appIconSvg, {density: (72 * size) / 24})
       .resize(size)
@@ -54,6 +77,24 @@ async function images(done) {
         .on('finish', resolve);
     });
   }
+
+  await new Promise(resolve => {
+    src('src/assets/icons/@(app|misc)/*.@(png|svg)', {base: '.'})
+      .pipe(gulpif(isProduction, imagemin()))
+      .pipe(dest(distDir))
+      .on('error', done)
+      .on('finish', resolve);
+  });
+
+  if (enableContributions) {
+    await new Promise(resolve => {
+      src('node_modules/vueton/components/contribute/assets/*.@(png|svg)')
+        .pipe(gulpif(isProduction, imagemin()))
+        .pipe(dest(path.join(distDir, 'src/contribute/assets')))
+        .on('error', done)
+        .on('finish', resolve);
+    });
+  }
 }
 
 async function fonts(done) {
@@ -67,7 +108,7 @@ async function fonts(done) {
 
   await new Promise(resolve => {
     src(
-      'node_modules/@fontsource/roboto/files/roboto-latin-@(400|500)-normal.woff2'
+      'node_modules/@fontsource/roboto/files/roboto-latin-@(400|500|700)-normal.woff2'
     )
       .pipe(dest(path.join(distDir, 'src/assets/fonts/files')))
       .on('error', done)
@@ -77,7 +118,7 @@ async function fonts(done) {
 
 async function locale(done) {
   const localesRootDir = path.join(__dirname, 'src/assets/locales');
-  const localeDirs = readdirSync(localesRootDir).filter(function(file) {
+  const localeDirs = readdirSync(localesRootDir).filter(function (file) {
     return lstatSync(path.join(localesRootDir, file)).isDirectory();
   });
   for (const localeDir of localeDirs) {
@@ -128,7 +169,7 @@ function manifest() {
     .pipe(dest(distDir));
 }
 
-function license(done) {
+function license() {
   let year = '2018';
   const currentYear = new Date().getFullYear().toString();
   if (year !== currentYear) {
@@ -143,13 +184,13 @@ See the LICENSE file for further information.
 `;
 
   writeFileSync(path.join(distDir, 'NOTICE'), notice);
-  return src(['LICENSE']).pipe(dest(distDir));
+  return src('LICENSE').pipe(dest(distDir));
 }
 
 function zip(done) {
   exec(
-    `web-ext build -s dist/${targetEnv} -a artifacts/${targetEnv} -n '{name}-{version}-${targetEnv}.zip' --overwrite-dest`,
-    function(err, stdout, stderr) {
+    `web-ext build -s dist/${targetEnv} -a artifacts/${targetEnv} -n "{name}-{version}-${targetEnv}.zip" --overwrite-dest`,
+    function (err, stdout, stderr) {
       console.log(stdout);
       console.log(stderr);
       done(err);
@@ -158,9 +199,14 @@ function zip(done) {
 }
 
 function inspect(done) {
+  initEnv();
+
   exec(
-    `webpack --profile --json > report.json && webpack-bundle-analyzer report.json dist/firefox/src && sleep 10 && rm report.{json,html}`,
-    function(err, stdout, stderr) {
+    `npm run build:prod:chrome && \
+    webpack --profile --json > report.json && \
+    webpack-bundle-analyzer --mode static report.json dist/chrome/src && \
+    sleep 3 && rm report.{json,html}`,
+    function (err, stdout, stderr) {
       console.log(stdout);
       console.log(stderr);
       done(err);
@@ -169,7 +215,7 @@ function inspect(done) {
 }
 
 exports.build = series(
-  clean,
+  init,
   parallel(js, html, images, fonts, locale, manifest, license)
 );
 exports.zip = zip;