- Help us test out Version 3!
-
- ×
-
-
-
-
-
\ No newline at end of file
diff --git a/popup.js b/popup.js
deleted file mode 100644
index 60fe994..0000000
--- a/popup.js
+++ /dev/null
@@ -1,326 +0,0 @@
-const browserObj = (typeof browser === 'undefined') ? chrome : browser;
-const version = browserObj.runtime.getManifest().version;
-document.getElementById('version').textContent = version;
-
-const modal = document.getElementById("edit-modal");
-const resetBtn = document.querySelector(".reset-btn");
-const editBtnList = document.querySelectorAll(".edit-btn");
-const closeBtn = document.querySelector(".close-btn");
-const keybindInput = document.getElementById("keybind-input");
-const keybindTable = document.getElementById( "keybind-table" )
-
-let modalTitleSpan = document.getElementById("modal-title-span");
-let invalidKeybinds = [
- 'Backspace',
- 'Enter',
- 'NumpadEnter',
- 'Escape',
- 'Tab',
- 'Space',
- 'PageUp',
- 'PageDown',
- 'ArrowUp',
- 'ArrowDown',
- 'F13', // printscreen
- 'MetaLeft', // windows/command
- 'MetaRight',
-
- 'ControlLeft',
- 'ControlRight',
- 'ShiftLeft',
- 'ShiftRight',
- 'AltLeft',
- 'AltRight',
-];
-
-const defaultKeybinds = {
- 'Seek Backward': 'ArrowLeft',
- 'Seek Forward': 'ArrowRight',
- 'Decrease Speed': 'KeyU',
- 'Reset Speed': 'KeyI',
- 'Increase Speed': 'KeyO',
- 'Decrease Volume': 'Minus',
- 'Increase Volume': 'Equal',
- 'Toggle Mute': 'KeyM',
- 'Next Frame': 'Comma',
- 'Previous Frame': 'Period',
- 'Next Short': 'KeyS',
- 'Previous Short': 'KeyW',
-};
-const defaultExtraOptions = {
- skip_enabled: false,
- skip_threshold: 500,
- automatically_open_comments: false,
- seek_amount: 5,
-}
-
-// this is so that the bindings are always generated in the right order
-const bindsOrder = [
- 'Seek Backward',
- 'Seek Forward',
- 'Decrease Speed',
- 'Reset Speed',
- 'Increase Speed',
- 'Decrease Volume',
- 'Increase Volume',
- 'Toggle Mute',
- 'Next Frame',
- 'Previous Frame',
- 'Next Short',
- 'Previous Short',
-]
-
-let currentKeybinds = Object.assign({}, defaultKeybinds);
-let currentExtraOpts = Object.assign({}, defaultExtraOptions);
-let currentKeybindArray = [];
-let keybindState = '';
-
-// Set user's prefers-color-scheme
-if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
- document.documentElement.setAttribute('data-theme', "dark");
-}
-window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
- const newColorScheme = event.matches ? "dark" : "light";
- document.documentElement.setAttribute('data-theme', newColorScheme);
-});
-
-// Get keybinds from storage
-browserObj.storage.local.get(['keybinds'])
-.then((result) => {
- let updatedkeybinds = result['keybinds'];
- if (updatedkeybinds) {
- // Set default keybinds if not exists
- for (const [cmd, keybind] of Object.entries(defaultKeybinds)) {
- if (!result.keybinds[cmd]) result.keybinds[cmd] = keybind;
- }
-
- populateKeybindsTable( updatedkeybinds )
- currentKeybinds = updatedkeybinds;
- } else {
- resetKeybinds();
- }
- // Keybind array for easier checking if keybind is already in use
- currentKeybindArray = Object.values(currentKeybinds);
-});
-
-// Get extra options from storage
-browserObj.storage.local.get(['extraopts'])
- .then((result) => {
- let updatedExtraOpts = result['extraopts'];
- if ( updatedExtraOpts ) {
- // Set default extraopts if not exists
- for (const [ option, value ] of Object.entries( defaultExtraOptions )) {
- if (result.extraopts[ option ]) continue
-
- result.extraopts[ option ] = value;
- }
- }
-
- if (result.extraopts) {
- // set skip toggle
- document.getElementById( "extra_options_skip_enabled" ).checked = result.extraopts.skip_enabled;
-
- // set skip threshold
- document.getElementById( "extra_options_skip_threshold" ).value = result.extraopts.skip_threshold;
-
- // set automatically close comments
- document.getElementById( "extra_options_auto_open_comments" ).checked = result.extraopts.automatically_open_comments;
-
- // set seek amount
- document.getElementById( "extra_options_seek_amount" ).value = result.extraopts.seek_amount;
- }
-
- })
-
-// Open modal
-for (let i = 0; i < editBtnList.length; i++) {
- editBtnList[i].onclick = function() {
- modal.style.display = "block";
- keybindInput.focus();
- keybindInput.select();
- modalTitleSpan.textContent = this.id;
- keybindState = this.id;
- }
-}
-
-function resetKeybinds() {
- currentKeybinds = Object.assign( {}, defaultKeybinds );
- currentKeybindArray = Object.values(currentKeybinds);
-
- populateKeybindsTable( defaultKeybinds )
-
- browserObj.storage.local.set({ 'keybinds' : defaultKeybinds });
-}
-
-resetBtn.onclick = () => resetKeybinds();
-
-// Close modal (x)
-closeBtn.onclick = () => {
- modal.style.display = "none";
-}
-// Close modal (click outside)
-window.onclick = (event) => {
- if (event.target == modal) modal.style.display = "none";
-}
-
-keybindInput.addEventListener('keydown', (event) => {
- event.preventDefault();
- var keybind = event.code;
- var keybindAlt = event.key; // for legacy, will become obsolete
-
- console.log( `[BYS] :: Attempting to set key: ${keybind}` )
-
- if ( invalidKeybinds.includes(keybind) ) {
- keybindInput.value = "";
- closeBtn.click();
- alert("Invalid keybind: <<" + keybind + ">> is not allowed.");
- return;
- }
- if ( currentKeybindArray.includes( keybind ) || currentKeybindArray.includes( keybindAlt ) ) {
- keybindInput.value = "";
- closeBtn.click();
- alert("Invalid keybind: <<" + keybind + ">> is already in use.");
- return;
- }
-
- // document.getElementById(keybindState+'-span').textContent = keybind;
- currentKeybinds[keybindState] = keybind;
- currentKeybindArray = Object.values(currentKeybinds);
-
- browserObj.storage.local.set({ 'keybinds' : currentKeybinds })
- .then(() => {
- keybindInput.value = "";
- closeBtn.click();
- });
-
- populateKeybindsTable( currentKeybinds )
-});
-
-document.getElementById( "extra_options_skip_enabled" ).addEventListener( "change", e => {
- browserObj.storage.local.get(['extraopts']).then( result => {
- if (result !== null && Object.keys(result).length !== 0) currentExtraOpts = result.extraopts;
- currentExtraOpts.skip_enabled = e.target.checked;
- browserObj.storage.local.set({ 'extraopts' : currentExtraOpts });
- });
-});
-
-document.getElementById( "extra_options_skip_threshold" ).addEventListener( "input", e => {
- browserObj.storage.local.get(['extraopts']).then( result => {
- if (result !== null && Object.keys(result).length !== 0) currentExtraOpts = result.extraopts
- currentExtraOpts.skip_threshold = e.target.valueAsNumber;
- browserObj.storage.local.set({ 'extraopts' : currentExtraOpts });
- });
-});
-
-document.getElementById( "extra_options_auto_open_comments" ).addEventListener( "change", e => {
- browserObj.storage.local.get(['extraopts']).then( result => {
- if (result !== null && Object.keys(result).length !== 0) currentExtraOpts = result.extraopts;
- currentExtraOpts.automatically_open_comments = e.target.checked;
- browserObj.storage.local.set({ 'extraopts' : currentExtraOpts });
- });
-});
-
-document.getElementById( "extra_options_seek_amount" ).addEventListener( "input", e => {
- browserObj.storage.local.get(['extraopts']).then( result => {
- if (result !== null && Object.keys(result).length !== 0) currentExtraOpts = result.extraopts
- currentExtraOpts.seek_amount = e.target.valueAsNumber;
- browserObj.storage.local.set({ 'extraopts' : currentExtraOpts });
- });
-});
-
-const EDIT_BUTTON_SVG_STRING = `
-
-`
-
-function populateKeybindsTable( keybinds )
-{
- keybindTable.innerHTML = `
-
- 
-
-
-
-
-
- Better Youtube Shorts
- v
-
- Keybinds
-Extra Options
-
-
-
-
-
-
-
-
- Reset keybindsGitHub
-
-
-
-
-
-
-
- ${bind}
-
- `
-
- // the rebind icon
- const td3 = document.createElement( "td" )
- td3.innerHTML = `
-
- `
- td3.querySelector( `[id="${command}"]` ).addEventListener( "click", e => {
- modal.style.display = "block";
-
- keybindInput.focus();
- keybindInput.select();
-
- modalTitleSpan.innerText = command;
- keybindState = command;
-
- } )
-
- tr.appendChild( td1 )
- tr.appendChild( td2 )
- tr.appendChild( td3 )
-
- return tr
-}
-
-browserObj.storage.local.get(['bys-announcement'])
-.then((result) => {
- let announcement = result['bys-announcement'];
- if (announcement) {
- if (parseInt(announcement) >= parseInt(document.getElementById("announcement").dataset.no)) {
- document.getElementById("announcement").style.display = "none";
- }
- } else {
- browserObj.storage.local.set({ 'bys-announcement' : 0 });
- }
-});
-
-document.getElementById("close-btn").onclick = () => {
- browserObj.storage.local.set({ 'bys-announcement' : parseInt(document.getElementById("announcement").dataset.no) });
- document.getElementById("announcement").style.display = "none";
-}
-
diff --git a/icons/byts128.png b/src/assets/icons/bys-128.png
similarity index 100%
rename from icons/byts128.png
rename to src/assets/icons/bys-128.png
diff --git a/icons/byts16.png b/src/assets/icons/bys-16.png
similarity index 100%
rename from icons/byts16.png
rename to src/assets/icons/bys-16.png
diff --git a/icons/byts32.png b/src/assets/icons/bys-32.png
similarity index 100%
rename from icons/byts32.png
rename to src/assets/icons/bys-32.png
diff --git a/icons/byts48.png b/src/assets/icons/bys-48.png
similarity index 100%
rename from icons/byts48.png
rename to src/assets/icons/bys-48.png
diff --git a/src/background.ts b/src/background.ts
new file mode 100644
index 0000000..953c594
--- /dev/null
+++ b/src/background.ts
@@ -0,0 +1,3 @@
+import BROWSER from "./background/browser";
+
+BROWSER.runtime.setUninstallURL( "https://github.com/ynshung/better-yt-shorts/blob/master/UNINSTALL.md" );
diff --git a/src/background/browser.ts b/src/background/browser.ts
new file mode 100644
index 0000000..6ece709
--- /dev/null
+++ b/src/background/browser.ts
@@ -0,0 +1,2 @@
+const BROWSER = ( typeof browser === 'undefined' ) ? chrome : browser
+export default BROWSER
\ No newline at end of file
diff --git a/src/background/i18n.ts b/src/background/i18n.ts
new file mode 100644
index 0000000..316cf09
--- /dev/null
+++ b/src/background/i18n.ts
@@ -0,0 +1,3 @@
+import BROWSER from "./browser";
+const local = BROWSER.i18n.getMessage;
+export default local;
\ No newline at end of file
diff --git a/src/components/Announcement.tsx b/src/components/Announcement.tsx
new file mode 100644
index 0000000..756126f
--- /dev/null
+++ b/src/components/Announcement.tsx
@@ -0,0 +1,34 @@
+import React, { useState } from "react";
+import local from '../background/i18n'
+
+export default function Announcement() {
+ const currAnnouncement = 1;
+
+ const [showAnnouncement, setShowAnnouncement] = useState(true);
+
+ const handleDismiss = (no: Number) => {
+ setShowAnnouncement(false);
+ localStorage.setItem("byt-announcement", no.toString());
+ };
+
+ const announcementDismissed =
+ localStorage.getItem("byt-announcement");
+
+ if (!showAnnouncement || (announcementDismissed !== null && parseInt(announcementDismissed) >= currAnnouncement)) {
+ return null;
+ }
+
+ return (
+
+ );
+}
diff --git a/src/components/EditButton.tsx b/src/components/EditButton.tsx
new file mode 100644
index 0000000..f8eae38
--- /dev/null
+++ b/src/components/EditButton.tsx
@@ -0,0 +1,27 @@
+import React from 'react'
+import { setKeybind, storage } from '../lib/declarations'
+import { StringDictionary } from '../lib/definitions'
+
+import { MdCreate } from "react-icons/md"
+
+interface Props {
+ keybindsState: StringDictionary,
+ setKeybindsState: any, // ! give specific type
+ command: string,
+ setSelectedCommand: ( newState: string ) => void,
+ setIsModalOpen: ( newState: boolean ) => void
+}
+export default function EditButton( { keybindsState, setKeybindsState, command, setSelectedCommand, setIsModalOpen }: Props ) {
+
+ function handleEditButtonClick( command: string ): void
+ {
+ setIsModalOpen( true )
+ setSelectedCommand( command )
+ }
+
+ return (
+
+ )
+}
diff --git a/src/components/EditModal.tsx b/src/components/EditModal.tsx
new file mode 100644
index 0000000..80cbf5c
--- /dev/null
+++ b/src/components/EditModal.tsx
@@ -0,0 +1,181 @@
+import { useEffect, useRef, useState } from 'react'
+import Separator from './Separator'
+import { DEFAULT_PRESSED_KEY, DISABLED_BIND_STRING, EXCLUDED_KEY_BINDS } from '../lib/declarations'
+import { StringDictionary } from '../lib/definitions'
+import { saveKeybindsToStorage } from '../lib/SaveToStorage'
+import local from '../background/i18n'
+
+
+interface Props
+{
+ selectedCommand: string,
+ isModalOpen: boolean,
+ setIsModalOpen: ( newState: boolean ) => void,
+ keybindsState: StringDictionary,
+ setKeybindsState: any, // ! - use proper type
+}
+
+export default function EditModal( { selectedCommand, isModalOpen, setIsModalOpen, keybindsState, setKeybindsState }: Props ) {
+
+ const [ inputSuccessString, setInputSuccessString ] = useState{`👍 ${inputSuccessString}`}
+ if ( inputErrorString ) return {`❌ ${inputErrorString}`}
+
+ return {"\u00A0"}
+ }
+
+ function handleDisableBind()
+ {
+ setKeybindsState( () => {
+ const newState = {...keybindsState}
+ newState[ selectedCommand ] = DISABLED_BIND_STRING
+
+ saveKeybindsToStorage( newState )
+ console.log( `[BYS] :: Disabled binding "${pressedKey}" that was bound to ${selectedCommand}` )
+
+ setInputSuccessString( `${local("disableKeybind", local(selectedCommand))}` )
+ return newState
+ } )
+
+ setPressedKey( DISABLED_BIND_STRING )
+
+ }
+
+ function getCurrentKeybindString()
+ {
+ if ( currentKey === DISABLED_BIND_STRING )
+ return <>{local("keybindDisabled")}
+
+ return <>{local("currentKeybind", currentKey)}
+ }
+
+ function showConfirmButton()
+ {
+ if ( !inputSuccessString || inputSuccessString.includes("disabled") ) return <>
+
+ return (
+
+ )
+ }
+
+ return (
+
+ )
+}
diff --git a/src/components/FeaturesPage.tsx b/src/components/FeaturesPage.tsx
new file mode 100644
index 0000000..b0ae197
--- /dev/null
+++ b/src/components/FeaturesPage.tsx
@@ -0,0 +1,95 @@
+import { DEFAULT_FEATURES, FEATURES_ORDER, setFeature } from '../lib/declarations'
+import { determineInputType } from '../lib/utils'
+import { PolyDictionary } from '../lib/definitions'
+import { disableAllFeatures, enableAllFeatures } from '../lib/ResetDefaults'
+import { saveFeaturesToStorage } from '../lib/SaveToStorage'
+import { useEffect, useState } from 'react'
+import local from '../background/i18n'
+
+interface Props
+{
+ featuresState: PolyDictionary
+ setFeaturesState: ( features: ( previousState: PolyDictionary ) => PolyDictionary ) => void
+}
+
+export default function FeaturesPage( { featuresState, setFeaturesState }: Props ) {
+ // this only exists to rerender on change
+
+ const [ buttonEnablesAll, setButtonEnablesAll ] = useState(true) // ! - change
+
+ useEffect( () => {
+ setButtonEnablesAll( () => {
+ if ( featuresState === null ) return true
+ const featuresStateLength = Object.keys( featuresState ).length
+ return Object.values( featuresState ).filter( ( feature: boolean ) => feature ).length !== featuresStateLength
+ } )
+ }, [ featuresState ] )
+
+ function handleResetFeaturesClick()
+ {
+ setFeaturesState( () => {
+ let newState
+
+ if ( buttonEnablesAll ) newState = enableAllFeatures()
+ else newState = disableAllFeatures()
+
+ return newState
+ } )
+ }
+
+ function handleFeatureChange( e: any, feature: string )
+ {
+ const value = e.target.checked
+
+ setFeaturesState( () => {
+ const newState = setFeature( featuresState, feature, value )
+
+ saveFeaturesToStorage( newState )
+ console.log( `[BYS] :: Set Feature "${feature}" to ${value}` )
+
+ return newState
+ } )
+ }
+
+ function populateFeaturesPage()
+ {
+ if ( featuresState === null ) return <>
+
+ return FEATURES_ORDER.map( ( feature: string, i: number ) => {
+ const value = featuresState[ feature ]
+
+ if ( featuresState === null ) return
+
+ return (
+
+
+ handleFeatureChange( e, feature ) }
+ checked = { value }
+ />
+
+ )
+ } )
+ }
+
+ return (
+ <>
+ {local("toggleFeatures")}
+ +
+ { populateFeaturesPage() }
+
+
+ {local("changesAffectNewShorts")}
+ + + + ) +} diff --git a/src/components/Header.tsx b/src/components/Header.tsx new file mode 100644 index 0000000..80bc240 --- /dev/null +++ b/src/components/Header.tsx @@ -0,0 +1,16 @@ +import React from 'react' +import { VERSION } from '../lib/declarations' +import bys_logo from "../assets/icons/bys-48.png" +import local from '../background/i18n' + +export default function Header() { + return ( +
+
+ {local("extName")}
+ v{VERSION}
+
+ {bind}
+
+ {local("keybinds")}
+ +| {local("command")} | +{local("key")} | ++ |
|---|
+
+ handleOptionChange( e, option ) }
+ />
+
+ )
+ } )
+ }
+
+ return (
+ <>
+ { local("extraOptions") }
+ +
+ { populateOptionsPage() }
+
+
+
+
+ )
+}
diff --git a/src/components/PageIndicator.tsx b/src/components/PageIndicator.tsx
new file mode 100644
index 0000000..2e8aaaa
--- /dev/null
+++ b/src/components/PageIndicator.tsx
@@ -0,0 +1,65 @@
+import React from 'react'
+import { PolyDictionary, PopupPageNameEnum, StrictPolyDictionary } from '../lib/definitions'
+import { capitalise, getEnumWithString } from '../lib/utils'
+
+import { MdVideoSettings } from "react-icons/md";
+import { MdOutlineVideoSettings } from "react-icons/md";
+
+import { MdKeyboard } from "react-icons/md";
+import { MdOutlineKeyboard } from "react-icons/md";
+
+import { MdVisibilityOff } from "react-icons/md";
+import { MdOutlineVisibilityOff } from "react-icons/md";
+
+import { saveSettingsToStorage } from '../lib/SaveToStorage';
+import local from '../background/i18n';
+
+interface Props
+{
+ page: string
+ setCurrentPage: ( page: PopupPageNameEnum ) => void
+ isCurrentPage: boolean
+}
+
+const ICONS = {
+ "OPTIONS": {
+ active:
+ { populatePageIndicators() }
+
+
+
+ )
+}
diff --git a/src/components/Popup.tsx b/src/components/Popup.tsx
new file mode 100644
index 0000000..4597233
--- /dev/null
+++ b/src/components/Popup.tsx
@@ -0,0 +1,89 @@
+import { useEffect, useState } from "react"
+import "../css/popup.css"
+import Header from "./Header"
+import KeybindsPage from "./KeybindsPage"
+import OptionsPage from "./OptionsPage"
+import Separator from "./Separator"
+import PageIndicatorContainer from "./PageIndicatorContainer"
+import { BooleanDictionary, ChangedObjectStateEnum, PolyDictionary, PopupPageNameEnum, StringDictionary } from "../lib/definitions"
+import { retrieveFeaturesFromStorage, retrieveKeybindsFromStorage, retrieveOptionsFromStorage } from "../lib/retrieveFromStorage"
+import { pingChanges } from "../lib/chromeEmitters"
+import { DEFAULT_FEATURES, DEFAULT_KEYBINDS, DEFAULT_OPTIONS, DEFAULT_SETTINGS } from "../lib/declarations"
+import FeaturesPage from "./FeaturesPage"
+import { saveSettingsToStorage } from "../lib/SaveToStorage"
+import local from "../background/i18n"
+import Announcement from "./Announcement"
+
+// todo - split this into its component parts
+
+function Popup() {
+ const [ keybindsState, setKeybindsState ] = useState
+
+ )
+}
+
+export default Popup
diff --git a/src/components/Separator.tsx b/src/components/Separator.tsx
new file mode 100644
index 0000000..d6ca33e
--- /dev/null
+++ b/src/components/Separator.tsx
@@ -0,0 +1,7 @@
+import React from 'react'
+
+export default function Separator() {
+ return (
+
+
+
+
+
+
+
+
+
+
+ Edit keybind:
+ ×
+
+
+
+
+ {local("notSupportKeyCombo")}
+
+
+
+ + ) +} diff --git a/src/content.ts b/src/content.ts new file mode 100644 index 0000000..5f06d28 --- /dev/null +++ b/src/content.ts @@ -0,0 +1,121 @@ +import BROWSER from "./background/browser" +import { checkVolume } from "./lib/VolumeSlider" +import { DEFAULT_STATE } from "./lib/declarations" +import { StateObject } from "./lib/definitions" +import { getCurrentId, getLikeCount, getVideo } from "./lib/getters" +import { handleKeyEvent } from "./lib/handleKeyEvent" +import { retrieveFeaturesFromStorage, retrieveKeybindsFromStorage, retrieveOptionsFromStorage, retrieveSettingsFromStorage } from "./lib/retrieveFromStorage" +import { handleSkipShortsWithLowLikes, shouldSkipShort } from "./lib/SkipShortsWithLowLikes" + +// need this to ensure css is loaded in the dist +import "./css/content.css" +import { handleInjectionChecks } from "./lib/InjectionSuccess" +import { hasVideoEnded, isVideoPlaying } from "./lib/VideoState" +import { handleAutoplay, handleEnableAutoplay } from "./lib/Autoplay" +import { handleAutomaticallyOpenComments } from "./lib/AutomaticallyOpenComments" +import { handleProgressBarNotAppearing } from "./lib/ProgressBar" +import { handleHideShortsOverlay } from "./lib/HideShortsOverlay" + +/** + * content.ts + * + * Code in this file will be injected into the page itself. + * For popup code, see ./main.tsx + */ + +const state = new Proxy( DEFAULT_STATE, { + set( o: StateObject, prop: string, val: any ) + { + o[ prop ] = val + + const ytShorts = getVideo() + + // handle additional changes + if ( ytShorts !== null ) + { + switch ( prop ) + { + case "playbackRate": + ytShorts.playbackRate = val + break; + } + } + + return true + } +} ) + +var keybinds = null as any +var options = null as any +var settings = null as any +var features = null as any + +// todo - add "settings" to localstorage (merge autoplay + player volume into one) +// localStorage.getItem("yt-player-volume") !== null && JSON.parse(localStorage.getItem("yt-player-volume"))["data"]["volume"] + +retrieveKeybindsFromStorage( newBinds => { keybinds = newBinds } ) +retrieveOptionsFromStorage( newOpts => { options = newOpts } ) +retrieveSettingsFromStorage( newSettings => { settings = newSettings } ) +retrieveFeaturesFromStorage( newFeatures => { features = newFeatures } ) + +// todo - test this on firefox +BROWSER.runtime.onMessage.addListener( ( req, sender, sendResponse ) => { + if ( req?.keybinds ) + keybinds = req.keybinds + if ( req?.options ) + options = req.options + if ( req?.features ) + features = req.features + + resetIntervals() +} ) + +document.addEventListener( "keydown", e => handleKeyEvent( e, features, keybinds, settings, options, state ) ) + +var main_interval = setInterval( main, 100 ) +var volume_interval = setInterval( volumeIntervalCallback, 10 ) + +function main() { + if ( window.location.toString().indexOf("youtube.com/shorts/") < 0 ) return + + const ytShorts = getVideo() + var currentId = getCurrentId() + + if ( ytShorts === null ) return + if ( currentId === null ) return + + if ( state.topId < currentId ) + state.topId = currentId + + // video has to have been playing to skip. + // I'm undecided whether to use 0.5 or 1 for currentTime, as 1 isn't quite fast enough, but sometimes with 0.5, it skips a video above the minimum like count. + if ( isVideoPlaying() ) + { + handleSkipShortsWithLowLikes( state, options ) + handleAutomaticallyOpenComments( state, options ) // dev note: the implementation of this feature is a good starting point to figure out how to format your own + } + if ( hasVideoEnded() ) + { + handleAutoplay( settings, features[ "autoplay" ] ) + } + + handleProgressBarNotAppearing() + handleEnableAutoplay( settings, features[ "autoplay" ] ) + handleInjectionChecks( state, settings, features ) + handleHideShortsOverlay( options ) +} + +function volumeIntervalCallback() +{ + if ( window.location.toString().indexOf("youtube.com/shorts/") < 0 ) return + if ( getVideo() ) checkVolume( settings, features[ "volumeSlider" ] ) +} + +function resetIntervals() +{ + clearInterval( volume_interval ) + volume_interval = setInterval( volumeIntervalCallback, 10 ) + + clearInterval( main_interval ) + main_interval = setInterval( main, 100 ) +} \ No newline at end of file diff --git a/src/css/content.scss b/src/css/content.scss new file mode 100644 index 0000000..d885157 --- /dev/null +++ b/src/css/content.scss @@ -0,0 +1,134 @@ +@import url( "./globals.css" ); + +.betterYT { + font-size: 16px; + font-weight: bold; + text-align: center; +} + +.betterYT-renderer { + display: inline-block; +} + +.betterYT-button-shape { + display: flex; +} + +.betterYT-volume-slider{ + -webkit-appearance: slider-vertical; + position: absolute; + right: -40px; + top: 40px; + opacity: 0.4; + pointer-events: all !important; + accent-color: var( --yt-brand-color ); + cursor: pointer; +} + +@supports (-moz-appearance:none) { + .volume-slider{ + right: 16px; + } +} + +.volume-slider:hover{ + opacity: 1; +} + +.autoplay-switch { + position: relative; + display: block; + width: 48px; + height: 27px; + margin: 0 auto; +} + +/* Hide default HTML checkbox */ +.autoplay-switch input { + opacity: 0; + width: 0; + height: 0; +} + +.autoplay-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: #272727; + -webkit-transition: .4s; + transition: .4s; + border-radius: 27px; + + &:hover { + background-color: #3f3f3f; + } + + &:before { + position: absolute; + content: ""; + height: 20px; + width: 20px; + left: 3px; + bottom: 3px; + background-color: white; + -webkit-transition: .4s; + transition: .4s; + border-radius: 50%; + } +} + +input:checked + .autoplay-slider { + background-color: #3f3f3f; +} + +input:checked + .autoplay-slider:before { + -webkit-transform: translateX(21px); + -ms-transform: translateX(21px); + transform: translateX(21px); +} + +@media screen and (max-width: 599px) { + .volumeSlider { + -webkit-appearance: slider-horizontal; + right: 44px; + top: 18px; + } + .autoplay-slider { + background-color: #FFFFFF1A; + } + input:checked + .autoplay-slider { + background-color: #FFFFFF2A; + } + .betterYT-auto { + padding-bottom: 16px; + } +} + +.betterYT-progress-bar{ + bottom: 0; + pointer-events: auto !important; +} + +.betterYT-progress-bar-hover{ + height: 10px !important; + cursor: pointer; +} + +.betterYT-timestamp-tooltip{ + position: absolute; + display: none; + background-color: #272727c4; + border-radius: 5px; + padding: 4px; + font-size: 11px; + color: white; + z-index: 50; +} + +.betterYT-hidden +{ + visibility: hidden !important; +} \ No newline at end of file diff --git a/src/css/globals.scss b/src/css/globals.scss new file mode 100644 index 0000000..b62f9d3 --- /dev/null +++ b/src/css/globals.scss @@ -0,0 +1,37 @@ +:root +{ + --text-primary-color: #030303; + --text-secondary-color: #888; + --bg-primary-color: #fff; + --bg-modal-color: #ffffff33; + --bg-primary-hover-color: #9d9ea1; + --bg-secondary-color: #f2f2f2; + --bg-secondary-hover-color: #e6e6e6; + --separation-line-color: #e5e5e5; + --yt-brand-color: #f00; + --suggested-action-color: #378de9; + --call-to-action-color: #3ea6ff; + --announcement-color: #50a5b5; + + --max-height: 600px; // of the chrome popup + + font-size: 16px; +} + +@media (prefers-color-scheme: dark) +{ + :root + { + --text-primary-color: #fff; + --text-secondary-color: #888; + --bg-primary-color: #0f0f0f; + --bg-modal-color: #0f0f0f66; + --bg-primary-hover-color: #9d9ea1; + --bg-secondary-color: #272727; + --bg-secondary-hover-color: #3d3d3d; + --separation-line-color: #3f3f3f; + --suggested-action-color: #1d5fd4; + --call-to-action-color: #3978e6; + --announcement-color: #1e3055; + } +} \ No newline at end of file diff --git a/src/css/popup.scss b/src/css/popup.scss new file mode 100644 index 0000000..9374637 --- /dev/null +++ b/src/css/popup.scss @@ -0,0 +1,772 @@ + +@import url( "./globals.css" ); + +:where( + h1, + h2, + h3, + h4, + h5, + h6, + table, + tr, + td, + th, + p, + li, + span +){ + color: var(--text-primary-color); +} + +* +{ + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'Source Sans Pro', 'Roboto', 'Noto', 'Arial', sans-serif; + background: var(--bg-primary-color); + color: var(--text-primary-color); +} + +h3 { + font-size: 0.9rem; +} + +tr:not(:first-child) { + background-color: var(--bg-secondary-color); + transition: all 0.3s ease; +} +tr:not(:first-child):hover { + background-color: var(--bg-secondary-hover-color); +} + +// Separator +.separation-line { + background-color: var(--separation-line-color); + margin-top: 5px; + opacity: 0.9; + border: none; + outline: none; +} + +.popup_subheading +{ + text-align: center; + margin: 5px 0px +} + +.container { + width: 280px; +} + +.announcement { + background-color: var(--announcement-color); + padding: 5px 0px; + text-align: center; + + a { + display: inline; + } + + a:hover { + text-decoration: underline; + } + + .close-btn { + float: right; + font-size: 14px; + padding-right: 16px; + } + + .close-btn:hover { + text-decoration: none; + color: var(--yt-brand-color); + } +} + +.content-container { + padding: 0.75em 1em 0.5em 1em; +} + +.title-container { + display: flex; + justify-content: space-between; + flex-direction: row; +} + +.title { + font-size: 16px; + font-weight: bold; +} + +.version { + color: var(--bg-primary-hover-color); + font-size: 0.8rem; + + span { + color: var(--text-primary-color); + } +} + +.separation-line { + height: 1px; + width: 100%; +} + +.textbox { + width: 100%; + font-size: 12px; + margin: 0; + + &:focus { + outline: 0; + border-color: var(--call-to-action-color); + } +} + +label { + font-size: 12px; +} + +#label_input_skip_threshold { + margin-left: 4px; +} + +.keybind-wrapper { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + gap: 10px; +} + +.keybind-span { + padding: 3px 7px; + background-color: var(--bg-secondary-hover-color); + border-radius: 3px; + box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.275); + cursor: default; +} + +.edit-svg { + fill: var(--bg-primary-hover-color); +} + +.edit-btn { + background: none; + outline: none; + border: none; + cursor: pointer; + + svg { + fill: var(--bg-primary-hover-color); + height: 1rem; + width: 1rem; + transition: fill 200ms; + } + + &:hover svg + { + fill: var(--text-primary-color); + } +} + +table { + border-collapse: separate; + border-spacing: 0 2px; +} + +th { + font-size: 12px; + text-align: center; +} + +td { + font-size: 12px; + padding: 7px 5px; +} + +td:first-child { + padding-left: 6px; +} + +td:first-child, +th:first-child { + border-bottom-left-radius: 5px; + border-top-left-radius: 5px; + cursor: default; +} + +td:last-child, +th:last-child { + border-bottom-right-radius: 5px; + border-top-right-radius: 5px; +} + +.footer { + font-size: 10px; + text-align: center; + margin: 5px 0px; +} + +a { + color: var(--text-primary-color); + text-decoration: none; + display: flex; +} + +.btn-wrapper { + display: flex; + justify-content: center; + flex-direction: row; + gap: 8px; +} + +.modal { + display: none; + position: fixed; + z-index: 999; + left: 0; + top: 0; + width: 100%; + height: 100%; + overflow: auto; + background-color: rgba(0, 0, 0, 0.4); +} + +.modal-content { + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + margin: auto; + padding: 0 8px 8px 8px; + width: 80%; + border-radius: 5px; + box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.7); +} + +.close-btn { + color: var(--bg-primary-hover-color); + font-size: 20px; + font-weight: bold; + text-decoration: none; + cursor: pointer; + transition: color 200ms; + + &:hover, + &:focus { + color: var(--yt-brand-color); + text-decoration: none; + cursor: pointer; + } +} + +.input-wrapper { + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; + margin: 10px 0px; + gap: 10px; +} + +.prevent-selection { + -webkit-user-select: none; /* Safari */ + -ms-user-select: none; /* IE 10 and IE 11 */ + user-select: none; /* Standard syntax */ +} + +#keybind-input { + width: 30%; + height: 1.5rem; + text-align: center; + + &:focus { + outline: 0; + outline: none !important; + box-shadow: 0 0 3px #00000020; + } +} + +.label_input--row +{ + display: grid; + grid-template-columns: 5fr 1fr; + text-wrap: balance; + margin-bottom: 16px; + align-items: center; + justify-content: center; + + [ type="number" ], + [ type="text" ] { + height: 1.75rem; + } + + [ type="checkbox" ] + { + height: 1rem; + cursor: pointer; + } + + &:last-child { + margin-bottom: 0; + } + + input[type="number"], + input[type="text"] + { + outline: none; + border: 1px var( --bg-secondary-hover-color ) solid; + background: var( --bg-secondary-hover-color ); + color: var(--text-primary-color); + padding: 0 1rem; + border-radius: 100vh; + width: 5rem; + + &:focus + { + border: 1px var(--yt-brand-color) solid; + } + } + + input[type="checkbox"], + input[type="radio"], + input[type="range"] + { + accent-color: var(--yt-brand-color); + } + + input[type="number"] { + -moz-appearance: textfield; + + &::-webkit-outer-spin-button, + &::-webkit-inner-spin-button { + -webkit-appearance: none; + margin: 0; + } + } +} + +// alternate colors for clarity +// .label_input--row:nth-of-type(even) +// { +// color: var(--text-secondary-color) +// } + +/* width */ +::-webkit-scrollbar { + width: 0.5rem; + +} + +/* Track */ +::-webkit-scrollbar-track { + background: transparent; + height: 4rem; +} + +/* Handle */ +::-webkit-scrollbar-thumb { + background: var(--bg-secondary-color); + height: 4rem; + border-radius: 1rem; +} + +/* Handle on hover */ +::-webkit-scrollbar-thumb:hover { + background: var(--bg-secondary-hover-color); +} + + +.--page-indicator-container +{ + display: flex; + gap: 1rem; + width: fit-content; + margin: 0 auto; + + button, input[type="submit"], input[type="reset"] { + background: none; + color: inherit; + border: none; + padding: 0; + font: inherit; + cursor: pointer; + outline: inherit; + } + + .--page-indicator, + .--page-indicator-active + { + border-radius: 5rem; + height: 1.5rem; + width: 1.5rem; + padding: 1rem; + + display: flex; + align-items: center; + justify-content: center; + + transition: + background 200ms, + stroke 200ms + ; + + &:hover + { + background: var(--bg-secondary-hover-color); + } + } + + .--page-indicator svg, + .--page-indicator-active svg + { + height: 1.5rem; + width: 1.5rem; + } + + .--page-indicator svg + { + fill: var(--text-secondary-color); + } + .--page-indicator-active svg + { + fill: var(--text-primary-color); + } +} + +.--flex-button-container +{ + display: flex; + width: fit-content; + align-items: center; + justify-content: center; + gap: 1rem; + max-width: 100%; + margin: 0 auto; + padding-top: 4px; + + button, input[type="submit"], input[type="reset"] { + background: none; + color: inherit; + border: none; + padding: 0; + font: inherit; + cursor: pointer; + outline: inherit; + } + + .--flex-button + { + margin: 5px 0px; + padding: 5px 10px; + + background-color: transparent; + color: var(--text-primary-color); + outline: 1px var( --text-primary-color ) solid; + + border-radius: 3px; + box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.275); + cursor: pointer; + transition: all 0.3s ease; + font-size: 12px; + } + .--flex-button:hover { + background-color: var(--text-primary-color); + color: var(--bg-primary-color); + } + + .--flex-button.warn { + color: var(--yt-brand-color ); + outline: 1px var( --yt-brand-color ) solid; + } + .--flex-button.warn:hover { + color: var(--text-primary-color ); + background-color: var(--yt-brand-color); + } + .--flex-button.good { + color: var(--call-to-action-color); + outline: 1px var(--call-to-action-color) solid; + } + .--flex-button.good:hover { + color: var(--text-primary-color ); + background-color: var(--call-to-action-color) + } + + +} + +// this is for the github link +.--global-footer +{ + display: flex; + width: fit-content; + max-width: 100%; + margin: 0 auto; + + .--global-footer-link + { + color: var(--text-secondary-color); + } +} + +.--modal +{ + position: absolute; + top: 0; + left: 0; + + width: 100%; + height: 100%; + + align-items: center; + justify-content: center; + + background: var( --bg-modal-color ); + + .--modal-header { + display: flex; + align-items: center; + justify-content: space-between; + + .--modal-header-text + { + font-style: italic; + color: var(--text-secondary-color); + display: block; + + .--modal-command + { + font-style: normal; + display: block; + font-weight: bold; + } + + } + + } + + .--modal-content { + background: var(--bg-primary-color); + color: var(--text-primary-color); + padding: 0.5rem; + border-radius: 0.5rem; + width: 80%; + box-shadow: 0 0 0.5rem 0.5rem var(--bg-modal-color); + } + + .--modal-input { + + outline: none; + border: none; + border-radius: 1rem; + font-size: 1.5rem; + width: 1rem; + height: 1rem; + padding: 1rem 2rem; + + background-color: var(--bg-secondary-color); + caret-color: var(--text-primary-color); + color: var(--text-primary-color); + + transition: background 200ms; + + &:hover + { + background-color: var(--bg-primary-hover-color); + } + &:focus + { + background-color: var(--bg-primary-hover-color); + } + } + .--modal-input-error, + .--modal-input-success + { + display: flex; + align-items: center; + justify-content: center; + text-wrap: balance; + text-align: center; + } + .--modal-input-error + { + color: var(--yt-brand-color) + } + .--modal-input-success + { + color: var(--call-to-action-color) + } + + .--modal-label + { + color: var(--text-secondary-color); + font-style: italic; + + span + { + font-style: normal; + font-weight: bold; + } + } + +} + +.key-combo-warning +{ + color: var(--text-secondary-color); +} + +.betterYT { + font-size: 16px; + font-weight: bold; + text-align: center; +} + +.betterYT-renderer { + display: inline-block; +} + +.betterYT-button-shape { + display: flex; +} + +.betterYT-volume-slider{ + -webkit-appearance: slider-vertical; + position: absolute; + right: -40px; + top: 40px; + opacity: 0.4; + pointer-events: all !important; + cursor: pointer; +} + +@supports (-moz-appearance:none) { + .volume-slider{ + right: 16px; + } +} + +.volume-slider:hover{ + opacity: 1; +} + +.autoplay-switch { + position: relative; + display: inline-block; + width: 48px; + height: 27px; +} + +/* Hide default HTML checkbox */ +.autoplay-switch input { + opacity: 0; + width: 0; + height: 0; +} + +.autoplay-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: #272727; + -webkit-transition: .4s; + transition: .4s; + border-radius: 27px; + + &:hover { + background-color: #3f3f3f; + } + + &:before { + position: absolute; + content: ""; + height: 20px; + width: 20px; + left: 3px; + bottom: 3px; + background-color: white; + -webkit-transition: .4s; + transition: .4s; + border-radius: 50%; + } +} + + + +input:checked + .autoplay-slider { + background-color: #3f3f3f; +} + +input:checked + .autoplay-slider:before { + -webkit-transform: translateX(21px); + -ms-transform: translateX(21px); + transform: translateX(21px); +} + +@media screen and (max-width: 599px) { + .volumeSlider { + -webkit-appearance: slider-horizontal; + right: 44px; + top: 18px; + } + .autoplay-slider { + background-color: #FFFFFF1A; + } + input:checked + .autoplay-slider { + background-color: #FFFFFF2A; + } + .betterYT-auto { + padding-bottom: 16px; + } +} + +.betterYT-progress-bar{ + bottom: 0; + pointer-events: auto !important; +} + +.betterYT-progress-bar-hover{ + height: 10px !important; + cursor: pointer; +} + +.betterYT-timestamp-tooltip{ + position: absolute; + display: none; + background-color: #272727c4; + border-radius: 5px; + padding: 4px; + font-size: 11px; + color: white; + z-index: 50; +} + +.page-warning +{ + color: var(--text-secondary-color); + text-align: center; + padding-top: 12px; + font-size: .75rem; + word-wrap: balance; +} + +#page-indicator { + position: sticky; + bottom: 0; + padding: 4px; + background: var(--bg-secondary-color); + z-index: 10; +} + +#extra_features, #extra_options { + padding: 4px 0; +} diff --git a/src/lib/ActionElement.ts b/src/lib/ActionElement.ts new file mode 100644 index 0000000..93092c9 --- /dev/null +++ b/src/lib/ActionElement.ts @@ -0,0 +1,131 @@ +import { createAutoplaySwitch } from "./Autoplay" +import { setPlaybackRate, setTimer } from "./PlaybackRate" +import { CYCLABLE_PLAYBACK_RATES } from "./declarations" +import { getActionElement, getCurrentId, getTitle, getVideo } from "./getters" +import { render, wheel } from "./utils" + +export function populateActionElement( state: any, settings: any, features: any ) // ! use proper types +{ + const id = getCurrentId() + const actionElement = getActionElement() + const ytShorts = getVideo() + + if ( !actionElement ) return + if ( !ytShorts ) return + + // adsu - idk how any of this works so im just going to leave it be + const betterYTContainer = document.createElement("div") + betterYTContainer.id = "betterYT-container" + betterYTContainer.setAttribute("class", "button-container style-scope ytd-reel-player-overlay-renderer") + + const ytdButtonRenderer = document.createElement("div") + ytdButtonRenderer.setAttribute("class", "betterYT-renderer style-scope ytd-reel-player-overlay-renderer") + + const ytButtonShape = document.createElement("div") + ytButtonShape.setAttribute("class", "betterYT-button-shape") + + const ytLabel = document.createElement("label") + ytLabel.setAttribute("class", "yt-spec-button-shape-with-label") + + const ytButton = document.createElement("button") + ytButton.setAttribute("class", "yt-spec-button-shape-next yt-spec-button-shape-next--tonal yt-spec-button-shape-next--mono yt-spec-button-shape-next--size-l yt-spec-button-shape-next--icon-button ") + // Playback Rate + var para0 = document.createElement("p") + para0.classList.add("betterYT") + para0.id = `ytPlayback${id}` + + ytButton.style.display = ( features[ "playbackRate" ] === false ) ? "none" : "" // need this to check injection, so wont fully disable + + // Video title links to the main YT watch page + const videoId = document.location.pathname?.match(/\/shorts\/(.+)$/) + if (!!videoId) { + const ytTitle = getTitle() + const ytTitleLink = document.createElement('a'); + ytTitleLink.href = `https://youtube.com/watch?v=${videoId[1]}` + ytTitleLink.style.color = 'inherit' + ytTitleLink.style.textDecoration = 'none' + ytTitle.parentNode?.insertBefore(ytTitleLink, ytTitle) + ytTitleLink.appendChild(ytTitle) + } + + // Timer + const ytTimer = document.createElement("div") + ytTimer.classList.add("yt-spec-button-shape-with-label__label") + var span1 = document.createElement("span") + span1.setAttribute("class", "yt-core-attributed-string yt-core-attributed-string--white-space-pre-wrap yt-core-attributed-string--text-alignment-center yt-core-attributed-string--word-wrapping") + span1.id = `ytTimer${getCurrentId()}` + span1.setAttribute("role", "text") + ytTimer.style.display = features[ "timer" ] ? "" : "none !important" // need this to check injection, so wont fully disable + ytTimer.appendChild(span1) + + + + // Match YT's HTML structure + ytButton.appendChild(para0) + ytLabel.appendChild(ytButton) + ytLabel.appendChild(ytTimer) + ytButtonShape.appendChild(ytLabel) + ytdButtonRenderer.appendChild(ytButtonShape) + betterYTContainer.appendChild(ytdButtonRenderer) + + actionElement.insertBefore(betterYTContainer, actionElement.children[1]) + + createAutoplaySwitch( settings, features[ "autoplay" ] ) + + if ( features[ "playbackRate" ] ) + ytShorts.playbackRate = state.playbackRate + + setPlaybackRate( state ) + // injectedSuccess = setTimer( currTime || 0, Math.round(ytShorts.duration || 0)) + + betterYTContainer.addEventListener("click", () => { + const index = CYCLABLE_PLAYBACK_RATES.indexOf( ytShorts.playbackRate ) + + // cycle through defined rates + if ( index !== -1 ) + { + let newIndex = ( index + 1 ) % CYCLABLE_PLAYBACK_RATES.length + state.playbackRate = CYCLABLE_PLAYBACK_RATES[newIndex] + return + } + + // note that state is a proxy, and will automatically update the video's settings + state.playbackRate = 1 + }) + + if ( features[ "timer" ] ) + wheel( + ytButton, + () => { + // speedup + const video = getVideo() + if ( video === null ) return + + if (video.playbackRate < 16) video.playbackRate += 0.25 + state.playbackRate = video.playbackRate + + }, + () => { + // speeddown + const video = getVideo() + if ( video === null ) return + + if (video.playbackRate > 0.25) video.playbackRate -= 0.25 + state.playbackRate = video.playbackRate + } + ) + + wheel( + ytTimer, + () => { + // forward + const video = getVideo() + if ( video !== null ) video.currentTime += 1 + }, + () => { + // backward + const video = getVideo() + if ( video !== null ) video.currentTime -= 1 + } + ) +} diff --git a/src/lib/AutomaticallyOpenComments.ts b/src/lib/AutomaticallyOpenComments.ts new file mode 100644 index 0000000..8000c7f --- /dev/null +++ b/src/lib/AutomaticallyOpenComments.ts @@ -0,0 +1,38 @@ +import { StateObject } from "./definitions"; +import { getCommentsButton, getCurrentId } from "./getters"; + + +export function handleAutomaticallyOpenComments( state: StateObject, options: any ) +{ + if( shouldOpenComments( state, options ) ) + openComments() +} + +function openComments() +{ + getCommentsButton()?.click() +} + +function shouldOpenComments( state: StateObject, options: any ) +{ + let currentId = getCurrentId() + + if ( options === null ) return false + if ( !options.automaticallyOpenComments ) return false + if ( currentId === state.skippedId ) return false // prevents opening comments on skipped shorts + if ( currentId === state.openedCommentsId ) return false // allow closing of comments + + // change here to prevent bugs with closing comments on previous shorts + state.openedCommentsId = currentId + + if ( isCommentsPanelOpen() ) return false + + return true +} + +function isCommentsPanelOpen() +{ + // return true if the selector finds an open panel + // if panel is unfound, then the short either hasnt loaded, or the panel is not open + return document.querySelector( `[ id="${getCurrentId()}" ] #watch-while-engagement-panel [ visibility="ENGAGEMENT_PANEL_VISIBILITY_EXPANDED" ]` ) ?? false +} \ No newline at end of file diff --git a/src/lib/Autoplay.ts b/src/lib/Autoplay.ts new file mode 100644 index 0000000..f429047 --- /dev/null +++ b/src/lib/Autoplay.ts @@ -0,0 +1,53 @@ +import local from "../background/i18n" +import { saveSettingsToStorage } from "./SaveToStorage" +import { skipShort } from "./VideoState" +import { getActionElement, getCurrentId, getVideo } from "./getters" +import { render } from "./utils" + +export function handleAutoplay( settings: any, enabled: boolean ) +{ + if ( !enabled ) return + if ( !settings.autoplay ) return + skipShort() +} + +export function handleEnableAutoplay( settings: any, enabled: boolean ) +{ + const ytShorts = getVideo() + if ( ytShorts === null ) return false + + if ( settings.autoplay ) ytShorts.loop = !enabled + else ytShorts.loop = true +} + +export function createAutoplaySwitch( settings: any, enabled: boolean ) +{ + if ( !enabled ) return + + const actionElement = getActionElement() + + // Autoplay Switch + const autoplaySwitch = render(` +
+
+
+
+ `)
+
+ actionElement.insertBefore( autoplaySwitch, actionElement.children[1] )
+
+ document.getElementById( `autoplay-checkbox${ getCurrentId() }` )
+ ?.addEventListener( "change", ( e: any ) => {
+ settings.autoplay = e.target.checked
+
+ saveSettingsToStorage( settings )
+ })
+}
\ No newline at end of file
diff --git a/src/lib/HideShortsOverlay.ts b/src/lib/HideShortsOverlay.ts
new file mode 100644
index 0000000..c4c01fa
--- /dev/null
+++ b/src/lib/HideShortsOverlay.ts
@@ -0,0 +1,18 @@
+import { saveOptionsToStorage } from "./SaveToStorage"
+import { getOverlay } from "./getters"
+
+export function handleHideShortsOverlay( options: any )
+{
+ const overlay = getOverlay()
+ if ( overlay === null ) return
+
+ if ( options.hideShortsOverlay )
+ overlay.classList.add( "betterYT-hidden" )
+ else
+ overlay.classList.remove( "betterYT-hidden" )
+}
+
+export function setHideShortsOverlay( newValue: boolean, options: any )
+{
+ saveOptionsToStorage( { ...options, hideShortsOverlay: newValue } )
+}
\ No newline at end of file
diff --git a/src/lib/InjectionSuccess.ts b/src/lib/InjectionSuccess.ts
new file mode 100644
index 0000000..8fed335
--- /dev/null
+++ b/src/lib/InjectionSuccess.ts
@@ -0,0 +1,51 @@
+import { populateActionElement } from "./ActionElement";
+import { setPlaybackRate, setTimer } from "./PlaybackRate";
+import { modifyProgressBar } from "./ProgressBar";
+import { setVolumeSlider } from "./VolumeSlider";
+import { BooleanDictionary, StateObject } from "./definitions";
+import { getCurrentId, getVideo } from "./getters";
+
+export function registerInjection( state: StateObject )
+{
+ state.injectedItems.add( getCurrentId() )
+}
+
+export function injectItems( state: StateObject, settings: any, features: any )
+{
+ state.lastTime = -1
+
+ populateActionElement( state, settings, features )
+ modifyProgressBar( features[ "progressBar" ] )
+ setVolumeSlider( state, settings, features[ "volumeSlider" ] )
+
+ registerInjection( state )
+}
+
+export function injectionWasRegistered( state: StateObject )
+{
+
+ return state.injectedItems.has( getCurrentId() )
+}
+
+export function checkForInjectionSuccess( state: StateObject, features: any )
+{
+ // If failed, retry injection during next interval
+ if ( !setTimer( state, features[ "timer" ] ) ) state.injectedItems.delete( getCurrentId() )
+
+ state.lastTime = state.currTime
+}
+
+export function handleInjectionChecks( state: StateObject, settings: any, features: any )
+{
+ const ytShorts = getVideo()
+ if ( ytShorts === null ) return
+
+ state.currTime = Math.round( ytShorts.currentTime )
+
+ if ( !injectionWasRegistered( state ) ) return injectItems( state, settings, features )
+
+ if ( state.currTime !== state.lastTime )
+ checkForInjectionSuccess( state, features )
+
+ setPlaybackRate( state )
+}
\ No newline at end of file
diff --git a/src/lib/PlaybackRate.ts b/src/lib/PlaybackRate.ts
new file mode 100644
index 0000000..e3180ca
--- /dev/null
+++ b/src/lib/PlaybackRate.ts
@@ -0,0 +1,40 @@
+import { StateObject } from "./definitions"
+import { getCurrentId, getPlaybackElement, getVideo } from "./getters"
+
+export function setPlaybackRate( state: any )
+{
+ const id = getCurrentId()
+ const playBackElement = getPlaybackElement() as HTMLElement
+
+ if ( playBackElement === null ) return false
+
+ playBackElement.innerText = `${state.playbackRate}x`
+
+ return true
+}
+
+export function setTimer( state: StateObject, timerEnabled: boolean )
+{
+ const id = getCurrentId()
+ const ytShorts = getVideo()
+ if ( ytShorts === null ) return
+
+ if ( document.getElementById(`ytTimer${id}`) === null ) return false
+
+ const timerElement = document.getElementById( `ytTimer${id}` ) as HTMLElement
+
+ if ( !timerEnabled && timerElement ) return true
+
+ timerElement.innerText = `${state.currTime}/${Math.round( ytShorts.duration )}s`
+
+ return true
+}
+
+export function createPlaybackElement( state: StateObject, enabled: boolean )
+{
+ // enabled is handled differently here because this element is used to test injection
+ // style="display: ${enabled ? "block" : "none"};"
+
+
+
+}
\ No newline at end of file
diff --git a/src/lib/ProgressBar.ts b/src/lib/ProgressBar.ts
new file mode 100644
index 0000000..2ef7d00
--- /dev/null
+++ b/src/lib/ProgressBar.ts
@@ -0,0 +1,104 @@
+import { getOverlayElement, getProgressBarList, getVideo } from "./getters"
+import { render } from "./utils"
+
+export function modifyProgressBar( enabled: boolean )
+{
+ if ( !enabled ) return
+
+ const overlayElement = getOverlayElement()
+ const ytShorts = getVideo()
+
+ if ( !overlayElement ) return
+ if ( ytShorts === null ) return
+
+ //[id="0"] > div.overlay.style-scope.ytd-reel-video-renderer > ytd-reel-player-overlay-renderer > #overlay
+ let progressBar = getProgressBarList() as HTMLElement // ? the progressbar itself
+ let pbBackground = progressBar.children[0] as HTMLElement // ? the grey background of the bar
+ let pbForeground = progressBar.children[1] as HTMLElement // ? The red part of the progress bar
+
+ const subBox = overlayElement.children[1] as HTMLElement
+ const tooltip = render( `` ) as HTMLElement
+
+ progressBar.appendChild( tooltip );
+
+ // Styling to ensure rest of bottom overlay (shorts title/sub button) stay in place
+ subBox.style.marginBottom = "-7px" // ? changed to 1 from 0 bc i think its not targeting the right thing
+ progressBar.style.height = "10px"
+ progressBar.style.paddingTop = "2px" // Slight padding to increase hover box
+
+ progressBar.classList.add('betterYT-progress-bar')
+ pbBackground.classList.add('betterYT-progress-bar')
+ pbForeground.classList.add('betterYT-progress-bar')
+
+ addListeners({
+ progressBar,
+ pbBackground,
+ pbForeground,
+ tooltip
+ })
+}
+
+interface ListenerProps {
+ progressBar: HTMLElement,
+ pbBackground: HTMLElement,
+ pbForeground: HTMLElement,
+ tooltip: HTMLElement,
+}
+function addListeners( { progressBar, pbBackground, pbForeground, tooltip }: ListenerProps )
+{
+ const ytShorts = getVideo()
+ if ( ytShorts === null ) return
+
+
+ progressBar.addEventListener("mouseover", () => {
+ pbBackground.classList.add('betterYT-progress-bar-hover')
+ pbForeground.classList.add('betterYT-progress-bar-hover')
+ })
+ progressBar.addEventListener("mousemove", ( e: MouseEvent ) => {
+
+ let x = e.clientX - ytShorts.getBoundingClientRect().left
+ // Deal with slight inaccuracies
+ if (x < 0) x = 0
+ if (x > ytShorts.clientWidth) x = ytShorts.clientWidth
+ // Get timestamp and round to nearest 0.1
+ let timestamp = ( (x / ytShorts.clientWidth) * ytShorts.duration ).toFixed(1)
+ tooltip.textContent = `${timestamp}s`
+
+ // Ensure tooltip stays visible at edges of client
+ if ((x - (tooltip.offsetWidth / 2)) > (ytShorts.clientWidth - tooltip.offsetWidth))
+ {
+ tooltip.style.left = `${ytShorts.clientWidth - tooltip.offsetWidth}px`
+ }
+ else if ((x - (tooltip.offsetWidth / 2)) <= 0)
+ {
+ tooltip.style.left = "0px"
+ }
+ else
+ {
+ tooltip.style.left = `${x - (tooltip.offsetWidth / 2)}px`
+ }
+
+ tooltip.style.top = "-20px"
+ tooltip.style.display = 'block'
+ })
+
+
+ progressBar.addEventListener("mouseout", () => {
+ pbBackground.classList.remove('betterYT-progress-bar-hover')
+ pbForeground.classList.remove('betterYT-progress-bar-hover')
+ tooltip.style.display = 'none'
+ })
+
+ progressBar.addEventListener("click", (event) => {
+ let x = (\"
+ * @returns HTML Element (or null if the string parses to no HTML elements)
+ */
+export function render( htmlString: string ): Node
+{
+ const elements = new DOMParser().parseFromString( htmlString, "text/html" ).body.children
+
+ if ( elements.length > 1 ) throw new Error( "ADSU | HTML String cannot have siblings!" )
+ if ( elements.length < 1 ) throw new Error( "ADSU | HTML String must have an element!" )
+
+ return elements[0] as Node
+}
+
+/**
+ * returns a standard input element type depending on the given sample value
+ * For example, `true` will return `"checkbox"`; `500` will return "number"
+ */
+export function determineInputType( sampleValue: any ): string
+{
+ switch( typeof sampleValue )
+ {
+ case "boolean":
+ return "checkbox"
+ case "number":
+ return "number"
+ case "string":
+ return "text"
+
+ default:
+ return "text"
+ }
+}
+
+export function getEnumEntries( givenEnum: any ): Array<[string, any]>
+{
+ return Object.entries( givenEnum as Object )
+ .filter( ( ( [key, val] ) => isNaN( key as any ) ) )
+}
+
+/**
+ * Assumes one word
+ * @param str
+ * @returns
+ */
+export function capitalise( str: string )
+{
+ return str[0].toUpperCase() + str.slice( 1 ).toLowerCase()
+}
+
+
+/**
+ * Get enum value from key string, or return `default_return` if unfound
+ */
+export function getEnumWithString( givenEnum: any, key: string, default_return: any = null )
+{
+ return Object.assign( {}, givenEnum )[ key ] ?? default_return
+}
+/**
+ * Get enum key from enum, or return `default_return` if unfound
+ * note: this will return TO LOWER CASE!!
+ */
+export function getKeyFromEnum( givenEnum: any, value: any, default_return: any = null )
+{
+ return givenEnum[ value ].toLowerCase()
+}
\ No newline at end of file
diff --git a/src/main.tsx b/src/main.tsx
new file mode 100644
index 0000000..063f282
--- /dev/null
+++ b/src/main.tsx
@@ -0,0 +1,17 @@
+/**
+ * main.tsx
+ *
+ * This is where the react code is injected.
+ * For content-script code (that which is injected onto the page),
+ * see ./content.ts
+ */
+
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import Popup from './components/Popup'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+