let the refactoring commence

app/index.html

@@ -901,20 +901,8 @@
     </div>
   </template>
   <script src="https://cdn.jsdelivr.net/gh/halfmoonui/halfmoon@1.1.1/js/halfmoon.min.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/matroska-subtitles@latest/dist/matroska-subtitles.min.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/indexeddb-chunk-store@latest/idbchunkstore.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/anitomyscript@2.0.4/dist/anitomyscript.bundle.min.js"></script>
-  <script src="js/range-parser.js"></script>
-  <!-- <script src="https://cdn.jsdelivr.net/npm/webtorrent@0.113.0/webtorrent.min.js"></script> -->
-  <script src="js/fsstore.js"></script>
-  <script src="js/wt-ex.js"></script>
-  <script src="js/torrent-player.js"></script>
-  <script src="js/settingsHandler.js"></script>
-  <script src="js/subtitles-octopus.js"></script>
-  <script src="js/util.js"></script>
-  <script src="js/interface.js"></script>
-  <script src="js/animeHandler.js"></script>
-  <script src="js/player.js"></script>
+  <script src="js/bundle.js"></script>
 </body>
 
 </html>

app/js/anime.js

@@ -1,3 +1,8 @@
+/* eslint-env browser */
+/* global searchText, navNowPlaying, halfmoon, home, oauth, anitomyscript, torrent4list */
+import { settings, searchParams, userBrowser } from './settings.js'
+import { loadHomePage, cardCreator } from './interface.js'
+import { client } from './main.js'
 const torrentRx = /(magnet:){1}|(^[A-F\d]{8,40}$){1}|(.*\.torrent){1}/i
 const imageRx = /\.(jpeg|jpg|gif|png|webp)/
 window.addEventListener('paste', async e => { // WAIT image lookup on paste, or add torrent on paste
@@ -68,7 +73,7 @@ function traceAnime (image, type) { // WAIT lookup logic
 // events
 navNowPlaying.onclick = () => { viewAnime(client.nowPlaying?.media) }
 // AL lookup logic
-async function alRequest (opts) {
+export async function alRequest (opts) {
   let query
   const variables = {
     type: 'ANIME',
@@ -256,7 +261,7 @@ query ($page: Int, $perPage: Int, $sort: [MediaSort], $type: MediaType, $search:
   console.log(json)
   return json
 }
-async function alEntry () {
+export async function alEntry () {
   if (client.nowPlaying.media && localStorage.getItem('ALtoken')) {
     const res = await alRequest({ method: 'SearchIDStatus', id: client.nowPlaying.media.id })
     if ((res.errors && res.errors[0].status === 404) || res.data.MediaList.progress <= client.nowPlaying.episodeNumber) {
@@ -457,7 +462,7 @@ function countdown (s) {
   return tmp.join(' ')
 }
 
-const DOMPARSER = new DOMParser().parseFromString.bind(new DOMParser())
+export const DOMPARSER = new DOMParser().parseFromString.bind(new DOMParser())
 
 async function nyaaSearch (media, episode) {
   if (parseInt(episode) < 10) {
@@ -528,7 +533,7 @@ async function nyaaRss (media, episode) {
 }
 // resolve anime name based on file name and store it
 
-async function resolveFileMedia (opts) {
+export async function resolveFileMedia (opts) {
   // opts.fileName opts.method opts.isRelease
 
   async function resolveTitle (title) {
@@ -562,6 +567,7 @@ async function resolveFileMedia (opts) {
   for (const media of (await alRequest({ method: 'SearchIDS', id: [...new Set(parseObjs.map(obj => relations[obj.anime_title]))], perPage: 50 })).data.Page.media) assoc[media.id] = media
   const fileMedias = []
   for (const praseObj of parseObjs) {
+    let episode
     let media = assoc[relations[praseObj.anime_title]]
     async function resolveSeason (opts) {
       // opts.media, opts.episode, opts.increment, opts.offset
@@ -648,17 +654,17 @@ async function resolveFileMedia (opts) {
   return fileMedias.length === 1 ? fileMedias[0] : fileMedias
 }
 
-let relations = JSON.parse(localStorage.getItem('relations'))
+export let relations = JSON.parse(localStorage.getItem('relations')) || {}
 relations = relations || {}
 
-function getRSSurl () {
+export function getRSSurl () {
   if (Object.values(torrent4list.options).filter(item => item.value === settings.torrent4)[0]) {
     return settings.torrent4 === 'Erai-raws' ? new URL(Object.values(torrent4list.options).filter(item => item.value === settings.torrent4)[0].innerHTML + settings.torrent1 + '-magnet') : new URL(Object.values(torrent4list.options).filter(item => item.value === settings.torrent4)[0].innerHTML + settings.torrent1)
   } else {
     return settings.torrent4 + settings.torrent1 // add custom RSS
   }
 }
-async function releasesCards (items, limit) {
+export async function releasesCards (items, limit) {
   const cards = []
   await resolveFileMedia({ fileName: [...items].map(item => item.querySelector('title').textContent).slice(0, limit), method: 'SearchName', isRelease: true }).then(results => {
     results.forEach((mediaInformation, index) => {
@@ -670,7 +676,7 @@ async function releasesCards (items, limit) {
   localStorage.setItem('relations', JSON.stringify(relations))
   return cards
 }
-async function releasesRss (limit) {
+export async function releasesRss (limit) {
   let cards
   await fetch(getRSSurl()).then(res => res.text().then(async xmlTxt => {
     try {
@@ -681,7 +687,7 @@ async function releasesRss (limit) {
   }))
   return cards
 }
-let alID // login icon
+export let alID // login icon
 async function loadAnime () {
   if (localStorage.getItem('ALtoken')) {
     alRequest({ method: 'Viewer' }).then(result => {

app/js/interface.js

@@ -1,4 +1,9 @@
-async function loadHomePage () {
+/* eslint-env browser */
+/* global navHome, searchClear, searchWrapper, skeletonCardTemplate, bareCardTemplate, fullCardTemplate, home, searchText, searchGenre, searchYear, searchSeason, searchFormat, searchStatus, searchSort, navSchedule, homeContinueMore, homeReleasesMore, homePlanningMore, homeTrendingMore, homeRomanceMore, homeActionMore, homeContinue, homeReleases, homePlanning, homeTrending, homeRomance, homeAction */
+import { alRequest, alID, getRSSurl, DOMPARSER, releasesCards, releasesRss, resolveFileMedia, viewAnime, countdown } from './anime.js'
+import { settings, relations } from './settings.js'
+import { client } from './main.js'
+export async function loadHomePage () {
   const homeLoadElements = [navSchedule, homeContinueMore, homeReleasesMore, homePlanningMore, homeTrendingMore, homeRomanceMore, homeActionMore]
   const homePreviewElements = [homeContinue, homeReleases, homePlanning, homeTrending, homeRomance, homeAction]
   const homeSearchElements = [searchText, searchGenre, searchYear, searchSeason, searchFormat, searchStatus, searchSort]
@@ -223,7 +228,7 @@ async function loadHomePage () {
 const skeletonCard = skeletonCardTemplate.cloneNode(true).content
 const bareCard = bareCardTemplate.cloneNode(true).content
 const fullCard = fullCardTemplate.cloneNode(true).content
-function cardCreator (opts) {
+export function cardCreator (opts) {
   if (opts.media) {
     const card = fullCard.cloneNode(true)
     const nodes = card.querySelectorAll('*')

app/js/main.js

@@ -1,3 +1,11 @@
+/* globals video, player, halfmoon, pageWrapper, subtitle1list */
+
+import WebTorrentPlayer from 'webtorrent-player'
+import './util.js'
+import { resolveFileMedia, nyaaSearch, alEntry } from './anime.js'
+import { settings, searchParams } from './settings.js'
+import { cardCreator } from './interface.js'
+
 const announceList = [
   'wss://tracker.openwebtorrent.com',
   'wss://tracker.sloppyta.co:443/announce',
@@ -11,7 +19,7 @@ for (const item of document.getElementsByClassName('ctrl')) {
     playerControls[item.dataset.name] = [playerControls[item.dataset.name], item]
   }
 }
-const client = new WebTorrentPlayer({
+export const client = new WebTorrentPlayer({
   WebTorrentOpts: {
     maxConns: 127,
     downloadLimit: settings.torrent7 * 1048576,
@@ -20,7 +28,6 @@ const client = new WebTorrentPlayer({
       announce: announceList
     }
   },
-  scope: '/app/',
   controls: playerControls,
   video: video,
   player: player,
@@ -91,7 +98,7 @@ const client = new WebTorrentPlayer({
       document.querySelector('.downloads').appendChild(template)
     })
   },
-  onVideoFiles: async videoFiles => {
+  onVideoFiles: async (videoFiles, torrent) => {
     document.querySelector('.playlist').textContent = ''
     const cards = []
     for (const file of videoFiles) {
@@ -134,17 +141,3 @@ window.onbeforeunload = function () {
   return ''
 }
 if (searchParams.get('file')) client.playTorrent(searchParams.get('file'))
-
-function t (a) {
-  switch (a) {
-    case 1:
-      client.playTorrent('https://webtorrent.io/torrents/sintel.torrent')
-      break
-    case 2:
-      client.playTorrent('https://webtorrent.io/torrents/tears-of-steel.torrent')
-      break
-    case 3:
-      client.playTorrent('magnet:?xt=urn:btih:CE9156EB497762F8B7577B71C0647A4B0C3423E1&dn=Inception+%282010%29+720p+-+mkv+-+1.0GB+-+YIFY')
-      break
-  }
-}

app/js/settings.js

@@ -1,11 +1,14 @@
-const settingsElements = [
+/* eslint-env browser */
+/* global volume, player2, player3, player5, player6, player10, subtitle1, subtitle3, torrent1, torrent2, torrent3, torrent4, torrent5, torrent7, torrent8, torrent9, other1, other2, setRes, settingsTab, regProtButton, clearRelCache */
+import { relations } from './anime.js'
+export const settingsElements = [
   volume, player2, player3, player5, player6, player10, subtitle1, subtitle3, torrent1, torrent2, torrent3, torrent4, torrent5, torrent7, torrent8, torrent9, other1, other2
 ]
 setRes.addEventListener('click', restoreDefaults)
 settingsTab.addEventListener('click', applySettingsTimeout)
 volume.addEventListener('click', applySettingsTimeout)
 regProtButton.addEventListener('click', registerProtocol)
-const settings = JSON.parse(localStorage.getItem('settings')) || {}
+export const settings = JSON.parse(localStorage.getItem('settings')) || {}
 function restoreDefaults () {
   localStorage.removeItem('settings')
   location.reload()
@@ -50,12 +53,12 @@ renderSettings()
 
 other1.onclick = () => Notification.requestPermission().then(perm => { perm === 'denied' ? other1.checked = false : other1.checked = true })
 
-const searchParams = new URLSearchParams(location.href)
+export const searchParams = new URLSearchParams(location.href)
 if (searchParams.get('access_token')) {
   localStorage.setItem('ALtoken', searchParams.get('access_token'))
   window.location = '/app/#settingsTab'
 }
-const userBrowser = (() => {
+export const userBrowser = (() => {
   if (window.chrome) {
     if (navigator.userAgent.indexOf('Edg') !== -1) {
       return 'edge'

app/test.html

@@ -1,49 +0,0 @@
-<video src="https://openings.moe/video/Kobayashi-SanChiNoMaidDragon-OP01-NCBD.mp4" muted controls id="video"></video>
-<script src="js/subtitles-octopus.js"></script>
-<script>
-    video.addEventListener('timeupdate',(e)=>console.log(e.target.currentTime))
-    let ready = function () {
-        console.log("ready")
-        octopusInstance.createEvent({
-            Duration: 2960,
-            Effect: "",
-            Layer: 100,
-            MarginL: 0,
-            MarginR: 0,
-            MarginV: 0,
-            Name: "",
-            ReadOrder: 0,
-            Start: 180,
-            Style: 1,
-            Text: "Miss Kobayashi's Dragon Something!",
-        })
-        octopusInstance.createEvent({
-            Duration: 1750,
-            Effect: "",
-            Layer: 100,
-            MarginL: 0,
-            MarginR: 0,
-            MarginV: 0,
-            Name: "",
-            ReadOrder: 1,
-            Start: 1940,
-            Style: 1,
-            Text: "What's with the "
-        })
-    }
-    let header = `[V4+ Styles]
-Format: Name, Fontname, Fontsize, PrimaryColour, SecondaryColour, OutlineColour, BackColour, Bold, Italic, Underline, StrikeOut, ScaleX, ScaleY, Spacing, Angle, BorderStyle, Outline, Shadow, Alignment, MarginL, MarginR, MarginV, Encoding
-Style: Default,Roboto Medium,26,&H00FFFFFF,&H000000FF,&H00020713,&H00000000,0,0,0,0,100,100,0,0,1,1.3,0,2,20,20,23,1`
-    let options = {
-        video: video,
-        fonts: ["https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmEU9fBBc4.woff2"],
-        workerUrl: 'js/subtitles-octopus-worker.js',
-        subContent: header,
-        renderMode: "offscreenCanvas",
-        debug: true,
-        onError: console.log
-    };
-    let octopusInstance = new SubtitlesOctopus(options);
-
-    setTimeout(ready, 1000)
-</script>

package.json

@@ -4,7 +4,8 @@
   "description": "P2P anime streaming site!",
   "main": "index.html",
   "scripts": {
-    "test": "standard"
+    "test": "standard",
+    "build": "webpack"
   },
   "repository": {
     "type": "git",
@@ -25,5 +26,11 @@
   "homepage": "https://github.com/ThaUnknown/miru#readme",
   "dependencies": {
     "webtorrent-player": "github:ThaUnknown/webtorrent-player"
+  },
+  "devDependencies": {
+    "node-polyfill-webpack-plugin": "^1.1.4",
+    "standard": "^16.0.3",
+    "webpack": "^5.47.0",
+    "webpack-cli": "^4.7.2"
   }
 }

sw.js

@@ -1,3 +1,4 @@
+/* eslint-env serviceworker */
 'use strict'
 
 const staticCacheName = 'v1.0.0'
@@ -40,6 +41,7 @@ self.addEventListener('activate', event => {
           if (cacheWhitelist.indexOf(cacheName) === -1) {
             return caches.delete(cacheName)
           }
+          return null
         })
       )
     })
@@ -52,17 +54,17 @@ self.addEventListener('activate', event => {
 //     caches.match(event.request)
 //       .then(response => {
 //         if (response) {
-//           return response;
+//           return response
 //         }
 //         return fetch(event.request)
 //           .then(response => {
 //             if (response.status === 404) {
-//               return;
+//               return
 //             }
-//             return response;
-//           });
+//             return response
+//           })
 //       }).catch(error => {
-//         return caches.match('index.html');
+//         return caches.match('index.html')
 //       })
-//   );
-// });
+//   )
+// })

webpack.config.js

@@ -0,0 +1,15 @@
+const path = require('path')
+const NodePolyfillPlugin = require('node-polyfill-webpack-plugin')
+module.exports = {
+  entry: './app/js/main.js',
+  output: {
+    filename: 'bundle.js',
+    path: path.resolve(__dirname, 'app/js'),
+    sourceMapFilename: 'bundle.js.map'
+  },
+  mode: 'development',
+  devtool: 'source-map',
+  plugins: [
+    new NodePolyfillPlugin()
+  ]
+}