lofifocus-chrome-extension/content.tsx at main · KBVE/lofifocus-chrome-extension · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
import { useMessage } from "@plasmohq/messaging/hook"
import React from "react";
import loadingSpeech from "url:~assets/loading-speech-2.wav"
import type { PlasmoCSConfig, PlasmoGetInlineAnchor, PlasmoMountShadowHost } from "plasmo";

export const config: PlasmoCSConfig = {
    matches: ["<all_urls>"],
    all_frames: true
}

export const getInlineAnchor: PlasmoGetInlineAnchor = () =>
    document.querySelector("body")

export const mountShadowHost: PlasmoMountShadowHost = ({
    shadowHost,
    anchor,
    mountState,
}) => {
    anchor.element.appendChild(shadowHost)
}

const Play = () => {
    const audioRef = React.useRef()
    const [currentSongUrl, setCurrentSongUrl] = React.useState(loadingSpeech)
    const [playing, setPlaying] = React.useState(false)

    const play = (url?: string) => {
        if (url && audioRef?.current !== undefined) {
            setCurrentSongUrl(url)
            if (audioRef.current) {
                // @ts-ignore
                audioRef.current.pause()
                // @ts-ignore
                audioRef.current.load()
                // @ts-ignore
                audioRef.current.volume = .5
                // @ts-ignore
                audioRef.current.play()
            }


            // let pauseCommand = audioRef.current.pause()
            // if (pauseCommand !== undefined)
            //     pauseCommand.then(_ => {
            //         // @ts-ignore
            //         audioRef.current.currentTime = 0;
            //         setCurrentSongUrl(url)
            //         setPlaying(true)
            //         // @ts-ignore
            //         audioRef.current.play();
            //     })
            //         .catch(error => console.error(error));
        }
        if (!url && audioRef?.current !== undefined) {
            setPlaying(true)
            // @ts-ignore
            audioRef.current.play();
        }
    }
    const pause = () => {
        if (audioRef?.current !== undefined) {
            // @ts-ignore
            audioRef.current.pause();
        }
    }
    const stop = () => {
        if (audioRef?.current !== undefined) {
            // @ts-ignore
            audioRef.current.pause();
            // @ts-ignore
            audioRef.current.currentTime = 0;
        }
    }

    const onPlaying = () => {
        // @ts-ignore
        if (audioRef?.current !== undefined && audioRef.current.paused)
            setPlaying(false);
    }

    useMessage<string, string>(async (req, res) => {
        const { name } = req;
        if (name === "play intro") {
            play()

            res.send("Playing Intro")
        }
        if (name === "play") {
            const url = req.body;
            play(url)

            res.send("Playing")
        }
        if (name === "pause") {
            pause()

            res.send("Paused")
        }
        if (name === "stop") {
            stop()

            res.send("Stopped")
        }
    })

    return (
        <>
            <audio
                controls
                ref={audioRef}
                onTimeUpdate={onPlaying}
                style={{
                    position: 'absolute',
                    opacity: 0,
                    pointerEvents: 'none',
                }}
            >
                <source src={currentSongUrl} type='audio/wav' />
            </audio>
        </>
    )
}

export default Play;