classicy 0.5.4 → 0.5.5

package/src/SystemFolder/SystemResources/QuickTime/QuickTimeMovieEmbed.tsx

@@ -1,310 +0,0 @@
-import ccIcon from 'img/icons/system/quicktime/cc.png'
-import {useAppManager} from '@/SystemFolder/ControlPanels/AppManager/ClassicyAppManagerContext'
-import './QuickTimeMovieEmbed.scss'
-import {parse} from '@plussub/srt-vtt-parser'
-import {ParsedResult} from "@plussub/srt-vtt-parser/dist/types";
-import React, {Suspense, useCallback, useEffect, useRef, useState} from 'react'
-import ReactPlayer from 'react-player'
-import screenfull from 'screenfull'
-import {getVolumeIcon, timeFriendly} from './QuickTimeUtils'
-import playButton from 'img/icons/system/quicktime/play-button.svg'
-import pauseButton from 'img/icons/system/quicktime/pause-button.svg'
-import backwardButton from 'img/icons/system/quicktime/backward-button.svg'
-import forwardButton from 'img/icons/system/quicktime/forward-button.svg'
-import fullscreenButton from 'img/icons/system/quicktime/forward-button.svg'
-
-type QuickTimeVideoEmbed = {
-    appId: string
-    name: string
-    url: string
-    type: 'audio' | 'video'
-    options?: {}
-    subtitlesUrl?: string
-    autoPlay?: boolean
-    hideControls?: boolean
-    controlsDocked?: boolean
-    muted?: boolean
-}
-
-export const QuickTimeVideoEmbed: React.FC<QuickTimeVideoEmbed> = ({
-                                                                       appId,
-                                                                       name,
-                                                                       url,
-                                                                       options,
-                                                                       type,
-                                                                       subtitlesUrl,
-                                                                       autoPlay,
-                                                                       hideControls,
-                                                                       controlsDocked,
-                                                                       muted,
-                                                                   }) => {
-    const desktop = useAppManager()
-
-    const [playing, setPlaying] = useState(autoPlay)
-    const [volume, setVolume] = useState(0.5)
-    const [loop, setLoop] = useState(false)
-    const [isFullscreen, setIsFullscreen] = useState(false)
-    const [showVolume, setShowVolume] = useState<boolean>(false)
-    const [subtitlesData, setSubtitlesData] = useState<ParsedResult | null>(null)
-    const [showSubtitles, setShowSubtitles] = useState(false)
-
-    const playerRef = useRef<HTMLVideoElement | null>(null)
-
-    useEffect(() => {
-        if (screenfull.isEnabled) {
-            screenfull.on('change', () => {
-                setIsFullscreen(isFullscreen)
-            })
-        }
-    })
-
-    const toggleCC = useCallback(() => {
-        setShowSubtitles((prev) => !prev)
-    }, [])
-
-    const handlePlayPause = useCallback(() => {
-        setPlaying((prev) => !prev)
-    }, [])
-
-    const seekForward = useCallback(() => {
-        seekTo((playerRef.current?.currentTime || 0) + 10)
-    }, [playerRef])
-
-    const seekBackward = useCallback(() => {
-        seekTo((playerRef.current?.currentTime || 0) - 10)
-    }, [playerRef])
-
-    const toggleFullscreen = useCallback(() => {
-        if (screenfull.isEnabled && playerRef.current) {
-            screenfull.toggle(playerRef.current, {navigationUI: 'hide'})
-        }
-        return
-    }, [playerRef])
-
-    const seekTo = (seconds: number) => {
-        playerRef.current?.fastSeek(seconds)
-    }
-
-    const seekToPct = (pct: number) => {
-        playerRef.current?.fastSeek(pct * playerRef.current?.duration)
-    }
-
-    const escapeFullscreen = () => {
-        if (!screenfull.isEnabled) {
-            return
-        }
-        screenfull.exit()
-    }
-
-    useEffect(() => {
-        const handleKeyDown = (event: KeyboardEvent) => {
-            const {windows} = desktop.System.Manager.App.apps[appId]
-            const a = windows.find((w) => (w.id = appId + '_VideoPlayer_' + url))
-            if (!a || !a.focused) {
-                return
-            }
-            switch (event.key) {
-                case ' ':
-                    handlePlayPause()
-                    event.preventDefault()
-                    break
-                case 'Escape':
-                    escapeFullscreen()
-                    break
-                case 'ArrowRight':
-                    seekForward()
-                    break
-                case 'ArrowLeft':
-                    seekBackward()
-                    break
-                case 'f':
-                case 'F':
-                    if (type != 'audio') {
-                        toggleFullscreen()
-                    }
-                    break
-                case 'l':
-                case 'L':
-                    setLoop(!loop)
-                    break
-                default:
-                    break
-            }
-        }
-
-        window.addEventListener('keydown', handleKeyDown)
-        return () => window.removeEventListener('keydown', handleKeyDown)
-    }, [handlePlayPause, seekForward, seekBackward, toggleFullscreen, type, loop, appId, url])
-
-    const volumeButtonRef = useRef<HTMLButtonElement>(null)
-
-    useEffect(() => {
-        if (!subtitlesUrl) {
-            return
-        }
-
-        fetch(subtitlesUrl)
-            .then((res) => res.text())
-            .then((text) => parse(text))
-            .then((text) => setSubtitlesData(text))
-            .catch(() => setSubtitlesData(null))
-    }, [subtitlesUrl])
-
-    return (
-        <div
-            className={"quickTimePlayerWrapper"}
-            style={{height: controlsDocked ? 'calc(100% - var(--window-control-size) * 1)' : '100%'}}
-        >
-            <div
-                className={"quickTimePlayerVideoHolder"}
-                style={{
-                    height: controlsDocked
-                        ? 'calc(100% - var(--window-control-size) * 1)'
-                        : 'calc(100% - var(--window-border-size) * 4)',
-                }}
-            >
-                <ReactPlayer
-                    ref={playerRef}
-                    src={url}
-                    playing={playing}
-                    loop={loop}
-                    controls={false}
-                    width="100%"
-                    height="100%"
-                    volume={muted ? 0 : volume}
-                    config={options}
-                />
-                <Suspense>
-                    {showSubtitles && subtitlesData?.entries &&
-                        subtitlesData?.entries?.length > 0 &&
-                        subtitlesData.entries.find((i) => {
-                            const time = (playerRef.current?.currentTime || 0) * 1000
-                            return i.from < time && i.to > time
-                        }) && (
-                            <div
-                                className={
-                                    "quickTimePlayerCaptionsHolder" +
-                                    ' ' +
-                                    "quickTimePlayerCaptionsHolderBottom" +
-                                    ' ' +
-                                    "quickTimePlayerCaptionsHolderCenter"
-                                }
-                            >
-                                <div className={"quickTimePlayerCaptions"}>
-                                    {
-                                        subtitlesData.entries.find((i) => {
-                                            const time = (playerRef.current?.currentTime || 0) * 1000
-                                            return i.from < time && i.to > time
-                                        })?.text
-                                    }
-                                </div>
-                            </div>
-                        )}
-                </Suspense>
-            </div>
-            {!hideControls && (
-                <div
-                    className={"quickTimePlayerVideoControlsHolder"}
-                    style={{position: controlsDocked ? 'absolute' : 'relative'}}
-                >
-                    <button onClick={handlePlayPause} className={"quickTimePlayerVideoControlsButton"}>
-                        <img
-                            className={"quickTimePlayerVideoControlsIcon"}
-                            src={`url('${playing ? playButton : pauseButton})`}
-                        />
-                    </button>
-                    <div className={"quickTimePlayerVideoControlsProgressBarHolder"}>
-                        <input
-                            id={appId + '_' + name + '_progressBar'}
-                            className={"quickTimePlayerVideoControlsProgressBar"}
-                            key={appId + '_' + name + '_progressBar'}
-                            type="range"
-                            min="0" // Zero percent
-                            max="1" // 100 percent
-                            step="0.001" // 1 percent
-                            value={(playerRef.current?.currentTime || 0) / (playerRef.current?.duration || 1)}
-                            readOnly={false}
-                            onChange={(e) => {
-                                seekToPct(parseFloat(e.target.value))
-                            }}
-                        />
-                    </div>
-                    <p className={"quickTimePlayerVideoControlsTime"}>
-                        {timeFriendly(playerRef.current?.currentTime || 0)}
-                    </p>
-                    <button onClick={seekBackward} className={"quickTimePlayerVideoControlsButton"}>
-                        <img
-                            className={"quickTimePlayerVideoControlsIcon"}
-                            src={`url('${backwardButton}')`}
-                        />
-                    </button>
-                    <button onClick={seekForward} className={"quickTimePlayerVideoControlsButton"}>
-                        <img
-                            className={"quickTimePlayerVideoControlsIcon"}
-                            src={`url('${forwardButton}')`}
-                        />
-                    </button>
-                    {subtitlesUrl && (
-                        <button onClick={toggleCC} className={"quickTimePlayerVideoControlsButton"}>
-                            <img
-                                className={"quickTimePlayerVideoControlsIcon"}
-                                src={ccIcon}
-                            />
-                        </button>
-                    )}
-
-                    {showVolume && (
-                        <div
-                            style={{
-                                zIndex: 999999,
-                                display: 'flex',
-                                justifyContent: 'center',
-                                alignItems: 'center',
-                            }}
-                        >
-                            <input
-                                className={"quickTimePlayerVideoControlsVolumeBar"}
-                                id={url + '_volume'}
-                                type="range"
-                                min="0"
-                                max="1"
-                                step="0.1"
-                                style={{
-                                    left: volumeButtonRef.current?.offsetLeft,
-                                }}
-                                value={1 - volume}
-                                onClick={() => {
-                                    setShowVolume(false)
-                                }}
-                                onChange={(e) => {
-                                    setVolume(1 - parseFloat(e.target.value))
-                                }}
-                            />
-                        </div>
-                    )}
-                    <button
-                        className={"quickTimePlayerVideoControlsButton"}
-                        onClick={() => setShowVolume(!showVolume)}
-                        ref={volumeButtonRef}
-                    >
-                        <img
-                            src={`/assets/img/icons/control-panels/sound-manager/${getVolumeIcon(volume)}`}
-                            className={"quickTimePlayerVideoControlsIcon"}
-                        />
-                    </button>
-                    {type != 'audio' && (
-                        <button
-                            onClick={toggleFullscreen}
-                            className={"quickTimePlayerVideoControlsButton"}
-                        >
-                            <img
-                                className={"quickTimePlayerVideoControlsIcon"}
-                                src={`url(${fullscreenButton})`}
-                            />
-                        </button>
-                    )}
-                </div>
-            )}
-        </div>
-    )
-}

package/src/SystemFolder/SystemResources/QuickTime/QuickTimeUtils.ts

@@ -1,27 +0,0 @@
-import soundOnImg from 'img/icons/control-panels/sound-manager/sound-on.png'
-import soundOffImg from 'img/icons/control-panels/sound-manager/sound-off.png'
-import sound66Img from 'img/icons/control-panels/sound-manager/sound-66.png'
-import sound33Img from 'img/icons/control-panels/sound-manager/sound-33.png'
-
-export function timeFriendly(seconds: number): string {
-    if (!Number.isFinite(seconds)) {
-        return '0:00:00'
-    }
-    const hours = Math.floor(seconds / 3600)
-    const minutes = Math.floor((seconds % 3600) / 60)
-    const secs = Math.floor(seconds % 60)
-    return `${hours}:${String(minutes).padStart(2, '0')}:${String(secs).padStart(2, '0')}`
-}
-
-export function getVolumeIcon(volume: number): string {
-    if (volume === 0) {
-        return soundOffImg
-    }
-    if (volume > 0 && volume < 0.3) {
-        return sound33Img
-    }
-    if (volume >= 0.3 && volume < 0.7) {
-        return sound66Img
-    }
-    return soundOnImg
-}

package/src/SystemFolder/SystemResources/QuickTime/thumb-slider.svg

@@ -1 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6.44 8.73"><path d="M.9.57v7.77h4.72V.57H.9ZM5.17,7.8H1.35V1.11h3.82v6.69Z" style="fill:#339;"/><path d="M.33.05v8.62h5.61V.05H.33ZM5.4,8.06H.86V.65h4.54v7.42Z" style="fill:#339;"/><path d="M.33.25v8.42h5.36V.25H.33ZM5.18,8.08H.84V.83h4.34v7.25Z" style="fill:#393939;"/><path d="M.66.34v7.84h4.68V.34H.66ZM4.9,7.63H1.11V.88h3.79v6.75Z" style="fill:#393939;"/><path d="M.58.27v8.18h5.11V.27H.58ZM5.2,7.88H1.06V.84h4.14v7.04Z" style="fill:#ddd;"/></svg>

package/src/SystemFolder/SystemResources/QuickTime/volume-slider.svg

@@ -1,8 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8.7 5.3">
-    <rect width="7.4" height="2.5" x=".6" y=".2" rx=".6" ry=".6"
-          style="stroke-width:.2px;fill:#c8c8c8;stroke:#000;stroke-miterlimit:10"/>
-    <rect width="7.4" height="2.5" x=".6" y="2.6" rx=".6" ry=".6"
-          style="fill:gray;stroke-width:.2px;stroke:#000;stroke-miterlimit:10"/>
-    <rect width="8.3" height="3" x=".2" y="1.2" rx=".5" ry=".5"
-          style="stroke:#000;stroke-miterlimit:10;fill:#ccc;stroke-width:.3px"/>
-</svg>

package/src/SystemFolder/SystemResources/RadioInput/ClassicyRadioInput.scss

@@ -1,125 +0,0 @@
-@use '../../ControlPanels/AppearanceManager/styles/appearance';
-@use '../../ControlPanels/AppearanceManager/styles/assets';
-
-.classicyRadioInputGroupColumns {
-  flex-direction: column;
-}
-
-.classicyRadioInputGroup {
-  display: flex;
-  align-items: stretch;
-  flex-direction: row;
-  justify-content: stretch;
-  padding: calc(var(--window-border-size) * 4);
-
-  div {
-    display: flex;
-    align-items: stretch;
-    flex-direction: row;
-  }
-}
-
-.classicyRadioInputMargin {
-  margin: 0 var(--window-control-size) 0 0;
-}
-
-.classicyRadioInputWrapper {
-  width: calc(var(--window-control-size) / 1);
-  height: calc(var(--window-control-size) / 1);
-  margin-top: calc(var(--window-control-size) / 4);
-  border: calc(var(--window-border-size)) solid var(--color-system-07);
-  border-radius: 50%;
-
-  background: radial-gradient(
-                  at left top,
-                  var(--color-system-02),
-                  var(--color-system-01) 40%,
-                  var(--color-system-05) 100%
-  );
-  box-shadow: 0 0 2px var(--color-system-07);
-}
-
-.classicyRadioInputWrapperChecked {
-  background: radial-gradient(
-                  at left top,
-                  var(--color-system-07) 10%,
-                  var(--color-system-05) 20%,
-                  var(--color-system-02) 85%,
-                  var(--color-system-01) 100%
-  );
-
-  &:active {
-    background: radial-gradient(
-                    at left top,
-                    var(--color-system-05) 20%,
-                    var(--color-system-01) 85%,
-                    var(--color-system-02) 100%
-    );
-  }
-}
-
-.classicyRadioInputWrapperDisabled {
-  border: calc(var(--window-border-size)) solid var(--color-system-05) !important;
-  background: var(--color-system-02) !important;
-}
-
-.classicyRadioInput {
-  position: relative;
-  margin: 2px;
-  opacity: 0;
-  border-width: calc(var(--window-control-size) / 3);
-  border-style: solid;
-  border-radius: 50%;
-  appearance: none;
-
-  &:focus {
-    outline: 1px solid var(--color-system-05);
-  }
-
-  &:checked {
-    opacity: 1;
-    border-color: var(--color-window-border);
-  }
-
-  &:disabled:checked {
-    opacity: 1;
-    border-style: solid;
-    border-color: var(--color-system-05);
-  }
-}
-
-.classicyRadioInputMixed {
-  margin-top:calc(var(--window-control-size) / 2.5);
-  width: calc(var(--window-control-size) / 1);
-  height: calc(var(--window-control-size) / 4);
-  border-width: calc(var(--window-control-size) / 8);
-  border-style: solid;
-  border-radius: 0 !important;
-  background: var(--color-window-border);
-
-  &:disabled:checked {
-    border-color: var(--color-system-05);
-    background: var(--color-system-05);
-  }
-}
-
-.classicyRadioInputLabel {
-  font-family: var(--ui-font), sans-serif;
-  font-size: var(--ui-font-size);
-  height: var(--window-control-size);
-  margin-left: calc(var(--window-control-size) / 2);
-}
-
-.classicyRadioInputLabelDisabled {
-  color: var(--color-system-05);
-}
-
-.classicyRadioInputDefault {
-  //width: var(--window-control-size);
-  //margin: 0;
-  //
-  &:checked,
-  &:active {
-    border-color: var(--color-theme-06) !important;
-  }
-}

package/src/SystemFolder/SystemResources/RadioInput/ClassicyRadioInput.tsx

@@ -1,103 +0,0 @@
-import { useSoundDispatch } from '@/SystemFolder/ControlPanels/SoundManager/ClassicySoundManagerContext'
-import {ClassicyControlLabel} from '@/SystemFolder/SystemResources/ControlLabel/ClassicyControlLabel'
-import './ClassicyRadioInput.scss'
-import classNames from 'classnames'
-import React, { useState } from 'react'
-import {useAnalytics} from 'use-analytics'
-
-type ClassicyRadioInputProps = {
-    name: string
-    label?: string
-    align?: 'rows' | 'columns'
-    disabled?: boolean
-    onClickFunc?: (id: string) => void
-    inputs: ClassicyRadioInputValueProps[]
-}
-
-type ClassicyRadioInputValueProps = {
-    id: string
-    checked?: boolean
-    mixed?: boolean
-    isDefault?: boolean
-    disabled?: boolean
-    label?: string
-}
-
-export const ClassicyRadioInput: React.FC<ClassicyRadioInputProps> = ({
-    name,
-    label,
-    align = 'columns',
-    disabled = false,
-    onClickFunc,
-    inputs,
-}) => {
-    const [check, setCheck] = useState<string>(inputs.findLast((input) => input.checked === true)?.id || '')
-    const player = useSoundDispatch()
-
-    const {track} = useAnalytics()
-    const analyticsArgs = {name, label, disabled, inputs}
-
-    const handleOnChange = (id: string) => {
-        setCheck(id)
-        track("selected", {type: 'ClassicyRadioInput', itemId: id, ...analyticsArgs })
-        if (onClickFunc) {
-            onClickFunc(id)
-        }
-    }
-
-    return (
-        <>
-            {label && <ClassicyControlLabel labelFor={name} disabled={disabled} label={label} direction={'left'} />}
-            <div
-                className={classNames(
-                    "classicyRadioInputGroup",
-                    align === 'columns' ? "classicyRadioInputGroupColumns" : ''
-                )}
-            >
-                {inputs &&
-                    inputs.map((item) => (
-                        <div key={name + item.id} className={"classicyRadioInputMargin"}>
-                            <div
-                                className={classNames(
-                                    "classicyRadioInputWrapper",
-                                    check === item.id ? "classicyRadioInputWrapperChecked" : '',
-                                    item.disabled ? "classicyRadioInputWrapperDisabled" : ''
-                                )}
-                            >
-                                <input
-                                    id={item.id}
-                                    name={name}
-                                    disabled={item.disabled}
-                                    className={classNames(
-                                        "classicyRadioInput",
-                                        item.isDefault ? "classicyRadioInputDefault" : '',
-                                        item.mixed ? "classicyRadioInputMixed" : ''
-                                    )}
-                                    type={'radio'}
-                                    value={item.id}
-                                    defaultChecked={item.checked}
-                                    tabIndex={0}
-                                    onChange={() => !item.disabled && handleOnChange(item.id)}
-                                    onMouseDown={() => {
-                                        track("click", {type: 'ClassicyRadioInput', itemId: item.id, ...analyticsArgs})
-                                        player({ type: 'ClassicySoundPlay', sound: 'ClassicyInputRadioClickDown' })
-                                    }}
-                                    onMouseUp={() => {
-                                        player({ type: 'ClassicySoundPlay', sound: 'ClassicyInputRadioClickUp' })
-                                    }}
-                                />
-                            </div>
-                            <ClassicyControlLabel
-                                labelFor={item.id}
-                                disabled={item.disabled}
-                                label={item.label}
-                                onClickFunc={() => {
-                                    !item.disabled && handleOnChange(item.id)
-                                }}
-                            />
-                        </div>
-                    ))}
-            </div>
-        </>
-    )
-}

package/src/SystemFolder/SystemResources/RichTextEditor/ClassicyRichTextEditor.scss

@@ -1,52 +0,0 @@
-.classicyRichTextEditor {
-  border: var(--window-border-size) solid black;
-  box-shadow: calc(var(--window-border-size) * -1) calc(var(--window-border-size) * -1) 0 0 var(--color-system-05),
-  calc(var(--window-border-size) * 1) calc(var(--window-border-size) * 1) 0 0 var(--color-system-04);
-
-  &:focus-visible {
-    margin: 2em;
-    padding: 2em;
-    border-radius: 2pt;
-    outline: 0 0 0 calc(var(--window-border-size) * 2) var(--color-outline) !important;
-    box-shadow: 0 0 0 calc(var(--window-border-size) * 2) var(--color-theme-04),
-    0 0 var(--window-border-size) calc(var(--window-border-size) * 2) var(--color-theme-04);
-  }
-
-  div {
-    height: auto;
-    outline: none;
-  }
-
-  div[role='textbox'] {
-    padding: 0 var(--window-padding-size);
-  }
-
-  div[role='toolbar'] {
-    position: sticky;
-    top: 0;
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    width: 100%;
-    background: var(--color-system-02);
-
-    div, button {
-      display: flex;
-      flex-direction: row;
-      flex-grow: 1;
-      justify-content: center;
-      border-radius: 0 !important;
-      background: var(--color-system-02);
-
-      button {
-        display: flex;
-        justify-content: center;
-        text-align: center;
-      }
-    }
-  }
-
-  .prose {
-    font-family: 'AppleGaramond', serif;
-  }
-}

package/src/SystemFolder/SystemResources/RichTextEditor/ClassicyRichTextEditor.tsx

@@ -1,52 +0,0 @@
-import './ClassicyRichTextEditor.scss'
-import {
-    BoldItalicUnderlineToggles,
-    CodeToggle,
-    headingsPlugin,
-    InsertThematicBreak,
-    markdownShortcutPlugin,
-    MDXEditor,
-    MDXEditorMethods,
-    quotePlugin,
-    thematicBreakPlugin,
-    toolbarPlugin,
-    UndoRedo,
-} from '@mdxeditor/editor'
-import React, {RefObject} from 'react'
-
-interface ClassicyRichTextEditorProps {
-    content: string
-    editorRef?: RefObject<MDXEditorMethods | null>
-}
-
-export let ClassicyRichTextEditor: React.FC<ClassicyRichTextEditorProps>;
-ClassicyRichTextEditor = ({content, editorRef}) => {
-    return (
-        <div className={"classicyRichTextEditor"}>
-            <MDXEditor
-                ref={editorRef}
-                markdown={content}
-                contentEditableClassName="prose"
-                plugins={[
-                    headingsPlugin(),
-                    headingsPlugin(),
-                    quotePlugin(),
-                    thematicBreakPlugin(),
-                    markdownShortcutPlugin(),
-                    toolbarPlugin({
-                        toolbarContents: () => (
-                            <>
-                                <UndoRedo/>
-                                <BoldItalicUnderlineToggles options={['Bold']}/>
-                                <BoldItalicUnderlineToggles options={['Italic']}/>
-                                <BoldItalicUnderlineToggles options={['Underline']}/>
-                                <CodeToggle></CodeToggle>
-                                <InsertThematicBreak></InsertThematicBreak>
-                            </>
-                        ),
-                    }),
-                ]}
-            />
-        </div>
-    )
-};