feat: add material design

Closes #10

package.json

@@ -34,6 +34,7 @@
     "js-cookie": "2.2.1",
     "lodash.get": "4.4.2",
     "preact": "10.5.13",
+    "preact-material-components": "1.6.1",
     "sha1": "1.1.1",
     "userscript-metadata": "1.0.0",
     "userscripter": "1.4.0"

src/components/remove-video-enhancer-app.tsx

@@ -1,4 +1,5 @@
 import { Component } from 'preact'
+import LinearProgress from 'preact-material-components/LinearProgress'
 import U from '~src/userscript'
 import RemoveVideoEnhancerContainer from '~components/remove-video-enhancer-container'
 import { YTConfigData, Playlist } from '~src/youtube'
@@ -81,6 +82,10 @@ export default class RemoveVideoEnhancerApp extends Component<Properties, State>
       }
       return <div id={U.id}>Playlist isn't editable</div>
     }
-    return <div id={U.id}>Loading...</div>
+    return (
+      <div id={U.id}>
+        <LinearProgress indeterminate />
+      </div>
+    )
   }
 }

src/components/remove-video-enhancer-container.tsx

@@ -1,7 +1,8 @@
-import { JSX } from 'preact'
 import { useState } from 'preact/hooks'
+import Button from 'preact-material-components/Button'
+import Slider from 'preact-material-components/Slider'
+import LinearProgress from 'preact-material-components/LinearProgress'
 import U from '~src/userscript'
-import RemoveButton from '~components/remove-button'
 
 interface Properties {
   removeVideoHandler: (watchTimeValue: number) => Promise<void> | void
@@ -21,42 +22,38 @@ function validate(value: any): boolean {
   return false
 }
 
-function RemoveVideoEnhancerContainer({ removeVideoHandler, initialValue = 99 }: Properties) {
+function RemoveVideoEnhancerContainer({ removeVideoHandler, initialValue = 100 }: Properties) {
   const [inputValue, setValue] = useState(initialValue)
   const [isReadyToRemove, setIsReadyToRemove] = useState(true)
 
-  function onChange({ currentTarget }: JSX.TargetedEvent<HTMLInputElement, Event>) {
-    if (validate(currentTarget.value)) {
-      setValue(Number(currentTarget.value))
-    } else {
-      currentTarget.value = inputValue.toString()
+  function onChange({ detail }: any) {
+    // eslint-disable-next-line no-underscore-dangle
+    const value = detail.foundation_.value_
+    if (validate(value)) {
+      setValue(value)
     }
   }
 
   return (
     <div id={U.id} className='style-scope ytd-playlist-sidebar-renderer'>
       <div className='style-scope ytd-menu-service-item-renderer' role='option' aria-disabled='false'>
-        <p>Remove all videos who has been watched at more or equal X percent</p>
-        <input
-          id='removeVideosEnhancerInput'
-          type='number'
-          value={inputValue}
-          onChange={onChange}
-          min='0'
-          max='100'
-          required
-          alt={INPUT_ALT}
-        />
-        <RemoveButton
+        <p>Remove all videos who has been watched at more or equal {inputValue} %</p>
+        <Slider min={0} max={100} step={5} value={inputValue} onChange={onChange} alt={INPUT_ALT} discrete />
+        <Button
+          raised
+          ripple
+          secondary
           alt={REMOVE_BUTTON_ALT}
           disabled={!isReadyToRemove}
-          id='removeVideosEnhancerButton'
           onClick={async () => {
             setIsReadyToRemove(false)
             await removeVideoHandler(inputValue)
             setIsReadyToRemove(true)
           }}
-        />
+        >
+          {!isReadyToRemove && <LinearProgress indeterminate />}
+          {isReadyToRemove && <div>Remove!</div>}
+        </Button>
       </div>
     </div>
   )

src/site.ts

@@ -4,4 +4,5 @@ import U from './userscript'
 
 export const NAME = U.sitename
 export const HOSTNAME = U.hostname
+export const APP_ROOT_ID = U.id
 export const YT_LOCATION_CHANGE_EVENT: string = 'yt-navigate-finish'

src/styles/preact-material.scss

@@ -0,0 +1,14 @@
+##{getGlobal("SITE.APP_ROOT_ID")} {
+  --mdc-theme-primary: #e10000;
+  --mdc-theme-on-primary: #fff;
+  --mdc-theme-accent: #e10000;
+  --mdc-theme-secondary: #e10000;
+  --mdc-theme-on-secondary: #fff;
+  --mdc-theme-background: #fff;
+  --mdc-theme-surface: #fff;
+  --mdc-theme-on-surface: #fff;
+}
+
+@import '~preact-material-components/Button/style.css';
+@import '~preact-material-components/Slider/style.css';
+@import '~preact-material-components/LinearProgress/style.css';

src/stylesheets.ts

@@ -1,6 +1,13 @@
-import { Stylesheets } from 'userscripter/lib/stylesheets'
+import { Stylesheets, stylesheet } from 'userscripter/lib/stylesheets'
+import preactMaterialStyles from '~src/styles/preact-material.scss'
+import isOnPlaylistPage from './operations/conditions/is-on-playlist-page'
 
-const STYLESHEETS = {} as const
+const STYLESHEETS = {
+  preactMaterial: stylesheet({
+    condition: isOnPlaylistPage,
+    css: preactMaterialStyles,
+  }),
+} as const
 
 // This trick uncovers type errors in STYLESHEETS
 // while retaining the static knowledge of its properties

tsconfig.json

@@ -17,15 +17,15 @@
     "resolveJsonModule": true,
     "lib": ["esnext", "dom"],
     "jsx": "react-jsx",
-    "jsxImportSource": "preact"
+    "jsxImportSource": "preact",
+    "skipLibCheck": true
   },
   "include": [
     "./src/*.d.ts",
     "./src/**/*.tsx",
     "./src/**/*.ts",
     "./test/**/*.ts",
     "./test/**/*.tsx",
-    "./metadata-config.json",
-    "test/remove-button.test.ts"
+    "./metadata-config.json"
   ]
 }