funuicss 2.6.1 → 2.6.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (38) hide show
  1. package/css/fun.css +287 -71
  2. package/hooks/useHls.d.ts +8 -0
  3. package/hooks/useHls.js +105 -0
  4. package/hooks/useHls.tsx +69 -0
  5. package/index.d.ts +1 -0
  6. package/index.js +3 -1
  7. package/index.tsx +2 -1
  8. package/package.json +5 -2
  9. package/tsconfig.json +1 -1
  10. package/tsconfig.tsbuildinfo +1 -1
  11. package/ui/alert/Alert.js +2 -2
  12. package/ui/alert/Alert.tsx +2 -2
  13. package/ui/drop/Dropdown.d.ts +6 -0
  14. package/ui/drop/Dropdown.js +10 -2
  15. package/ui/drop/Dropdown.tsx +23 -2
  16. package/ui/specials/Circle.js +2 -2
  17. package/ui/specials/Circle.tsx +2 -2
  18. package/ui/theme/darkenUtils.d.ts +2 -0
  19. package/ui/theme/darkenUtils.js +27 -0
  20. package/ui/theme/darkenUtils.ts +15 -0
  21. package/ui/theme/theme.d.ts +1 -1
  22. package/ui/theme/theme.js +15 -13
  23. package/ui/theme/theme.tsx +17 -17
  24. package/ui/theme/themes.d.ts +106 -0
  25. package/ui/theme/themes.js +63 -0
  26. package/ui/theme/themes.ts +79 -0
  27. package/ui/video/Video.d.ts +11 -0
  28. package/ui/video/Video.js +258 -0
  29. package/ui/video/Video.tsx +287 -0
  30. package/ui/video/videoFunctions.d.ts +3 -0
  31. package/ui/video/videoFunctions.js +19 -0
  32. package/ui/video/videoFunctions.tsx +19 -0
  33. package/ui/video/videoShortcuts.d.ts +1 -0
  34. package/ui/video/videoShortcuts.js +11 -0
  35. package/ui/video/videoShortcuts.ts +12 -0
  36. package/ui/video/FunPlayer.d.ts +0 -0
  37. package/ui/video/FunPlayer.js +0 -203
  38. package/ui/video/FunPlayer.tsx +0 -221
package/ui/video/FunPlayer.js DELETED
@@ -1,203 +0,0 @@
1
- "use strict";
2
- // import React, { useState, useRef, useEffect } from 'react';
3
- // import { PiCornersOut, PiDownload, PiFastForward, PiFileAudio, PiPause, PiPlay, PiRewind, PiSpeakerHifi, PiSpeakerLow } from 'react-icons/pi';
4
- // import ToolTip from "../tooltip/ToolTip"
5
- // import RowFlex from '../specials/RowFlex';
6
- // import Button from '../button/Button'
7
- // import Text from '../text/Text'
8
- // import Tip from '../tooltip/Tip'
9
- // interface VideoProps {
10
- // src: string;
11
- // autoPlay: boolean;
12
- // onDuration?: (duration: number) => void;
13
- // }
14
- // export default function Video({ src, autoPlay, onDuration }: VideoProps) {
15
- // const videoRef = useRef<HTMLVideoElement>(null);
16
- // const [isPlaying, setIsPlaying] = useState<boolean>(autoPlay);
17
- // const [currentTime, setCurrentTime] = useState<number>(0);
18
- // const [duration, setDuration] = useState<number>(0);
19
- // const [volume, setVolume] = useState<number>(1);
20
- // const [isFullScreen, setIsFullScreen] = useState<boolean>(false);
21
- // const [showVolume, setShowVolume] = useState<boolean>(false);
22
- // useEffect(() => {
23
- // if (!videoRef.current) return;
24
- // const handleTimeUpdate = () => {
25
- // setCurrentTime(videoRef.current.currentTime);
26
- // };
27
- // const handleDurationChange = () => {
28
- // const newDuration = videoRef.current.duration;
29
- // setDuration(newDuration);
30
- // onDuration && onDuration(newDuration);
31
- // };
32
- // videoRef.current.addEventListener('timeupdate', handleTimeUpdate);
33
- // videoRef.current.addEventListener('durationchange', handleDurationChange);
34
- // return () => {
35
- // videoRef.current?.removeEventListener('timeupdate', handleTimeUpdate);
36
- // videoRef.current?.removeEventListener('durationchange', handleDurationChange);
37
- // };
38
- // }, [onDuration]);
39
- // const formatTime = (time: number) => {
40
- // const minutes = Math.floor(time / 60);
41
- // const seconds = Math.floor(time % 60);
42
- // return `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
43
- // };
44
- // const handlePlay = () => {
45
- // videoRef.current?.play();
46
- // setIsPlaying(true);
47
- // };
48
- // const handlePause = () => {
49
- // videoRef.current?.pause();
50
- // setIsPlaying(false);
51
- // };
52
- // const handleStop = () => {
53
- // videoRef.current?.pause();
54
- // videoRef.current.currentTime = 0;
55
- // setIsPlaying(false);
56
- // };
57
- // const handleRewind = () => {
58
- // if (videoRef.current) videoRef.current.currentTime -= 10; // Rewind 10 seconds
59
- // };
60
- // const handleForward = () => {
61
- // if (videoRef.current) videoRef.current.currentTime += 10; // Forward 10 seconds
62
- // };
63
- // const handleToggleFullScreen = () => {
64
- // if (videoRef.current) {
65
- // if (videoRef.current.requestFullscreen) {
66
- // videoRef.current.requestFullscreen();
67
- // } else if (videoRef.current.mozRequestFullScreen) {
68
- // videoRef.current.mozRequestFullScreen();
69
- // } else if (videoRef.current.webkitRequestFullscreen) {
70
- // videoRef.current.webkitRequestFullscreen();
71
- // } else if (videoRef.current.msRequestFullscreen) {
72
- // videoRef.current.msRequestFullscreen();
73
- // }
74
- // setIsFullScreen(true);
75
- // }
76
- // };
77
- // // const handleExitFullScreen = () => {
78
- // // if (document.exitFullscreen) {
79
- // // document.exitFullscreen();
80
- // // } else if (document.mozCancelFullScreen) {
81
- // // document.mozCancelFullScreen();
82
- // // } else if (document.webkitExitFullscreen) {
83
- // // document.webkitExitFullscreen();
84
- // // } else if (document.msExitFullscreen) {
85
- // // document.msExitFullscreen();
86
- // // }
87
- // // setIsFullScreen(false);
88
- // // };
89
- // const handleProgressBarChange = (e: React.ChangeEvent<HTMLInputElement>) => {
90
- // const newTime = parseFloat(e.target.value);
91
- // setCurrentTime(newTime);
92
- // if (videoRef.current) videoRef.current.currentTime = newTime;
93
- // };
94
- // const handleVolumeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
95
- // const newVolume = parseFloat(e.target.value);
96
- // setVolume(newVolume);
97
- // if (videoRef.current) videoRef.current.volume = newVolume;
98
- // };
99
- // const timePlayed = formatTime(currentTime);
100
- // const timeLeft = formatTime(duration - currentTime);
101
- // return (
102
- // <div className="vide_container">
103
- // <video
104
- // ref={videoRef}
105
- // autoPlay={autoPlay}
106
- // src={src}
107
- // className="fit"
108
- // ></video>
109
- // <div className="video_controls" onDoubleClick={isPlaying ? handlePause : handlePlay}>
110
- // <RowFlex gap={0.3} funcss="padding-5">
111
- // <div>
112
- // <Text
113
- // text={timePlayed}
114
- // size="small"
115
- // bold
116
- // />
117
- // </div>
118
- // <div className="col width-100-p">
119
- // <input
120
- // type="range"
121
- // min={0}
122
- // max={duration}
123
- // value={currentTime}
124
- // className="width-100-p"
125
- // style={{ height: "3px" }}
126
- // onChange={handleProgressBarChange}
127
- // />
128
- // </div>
129
- // <div>
130
- // <Text
131
- // text={timeLeft}
132
- // size="small"
133
- // bold
134
- // />
135
- // </div>
136
- // </RowFlex>
137
- // <div className="margin-top-5"></div>
138
- // <RowFlex gap={1} justify="space-between">
139
- // <div>
140
- // <RowFlex gap={0.5}>
141
- // <ToolTip>
142
- // <div className="width-30 height-30 pointer padding-5" onClick={isPlaying ? handlePause : handlePlay}>
143
- // {isPlaying ? <PiPause /> : <PiPlay />}
144
- // </div>
145
- // <Tip tip="top" animation="ScaleUp" duration={0.5} content={isPlaying ? "Pause" : "Play"} />
146
- // </ToolTip>
147
- // <ToolTip>
148
- // <div className="width-30 height-30 pointer padding-5" onClick={handleRewind}>
149
- // <PiRewind />
150
- // </div>
151
- // <Tip tip="top" animation="ScaleUp" duration={0.5} content={"10 sec Back"} />
152
- // </ToolTip>
153
- // <ToolTip>
154
- // <div className="width-30 height-30 pointer padding-5" onClick={handleForward}>
155
- // <PiFastForward />
156
- // </div>
157
- // <Tip tip="top" animation="ScaleUp" duration={0.5} content={"10 sec Forward"} />
158
- // </ToolTip>
159
- // <div onMouseEnter={() => setShowVolume(true)} onMouseLeave={() => setShowVolume(false)}>
160
- // <RowFlex >
161
- // <ToolTip>
162
- // <div className="width-30 height-30 pointer padding-5">
163
- // <PiSpeakerLow />
164
- // </div>
165
- // <Tip tip="top" animation="ScaleUp" duration={0.5} content={"Volume"} />
166
- // </ToolTip>
167
- // {showVolume &&
168
- // <input
169
- // type="range"
170
- // min={0}
171
- // max={1}
172
- // step={0.01}
173
- // value={volume}
174
- // className="width-100"
175
- // style={{ height: "3px" }}
176
- // onChange={handleVolumeChange}
177
- // />
178
- // }
179
- // </RowFlex>
180
- // </div>
181
- // </RowFlex>
182
- // </div>
183
- // <div>
184
- // <RowFlex gap={0.3}>
185
- // <ToolTip>
186
- // <div className="width-30 height-30 pointer padding-5" onClick={handleToggleFullScreen}>
187
- // <PiCornersOut />
188
- // </div>
189
- // <Tip tip="top" animation="ScaleUp" duration={0.5} content={"Expand"} />
190
- // </ToolTip>
191
- // <ToolTip>
192
- // <div className="width-30 height-30 pointer padding-5" onClick={() => { window.open(src || "", '_blank'); }}>
193
- // <PiDownload />
194
- // </div>
195
- // <Tip tip="top" animation="ScaleUp" duration={0.5} content={"Download"} />
196
- // </ToolTip>
197
- // </RowFlex>
198
- // </div>
199
- // </RowFlex>
200
- // </div>
201
- // </div>
202
- // );
203
- // }
package/ui/video/FunPlayer.tsx DELETED
@@ -1,221 +0,0 @@
1
- // import React, { useState, useRef, useEffect } from 'react';
2
- // import { PiCornersOut, PiDownload, PiFastForward, PiFileAudio, PiPause, PiPlay, PiRewind, PiSpeakerHifi, PiSpeakerLow } from 'react-icons/pi';
3
- // import ToolTip from "../tooltip/ToolTip"
4
- // import RowFlex from '../specials/RowFlex';
5
- // import Button from '../button/Button'
6
- // import Text from '../text/Text'
7
- // import Tip from '../tooltip/Tip'
8
-
9
- // interface VideoProps {
10
- // src: string;
11
- // autoPlay: boolean;
12
- // onDuration?: (duration: number) => void;
13
- // }
14
-
15
- // export default function Video({ src, autoPlay, onDuration }: VideoProps) {
16
- // const videoRef = useRef<HTMLVideoElement>(null);
17
- // const [isPlaying, setIsPlaying] = useState<boolean>(autoPlay);
18
- // const [currentTime, setCurrentTime] = useState<number>(0);
19
- // const [duration, setDuration] = useState<number>(0);
20
- // const [volume, setVolume] = useState<number>(1);
21
- // const [isFullScreen, setIsFullScreen] = useState<boolean>(false);
22
- // const [showVolume, setShowVolume] = useState<boolean>(false);
23
-
24
- // useEffect(() => {
25
- // if (!videoRef.current) return;
26
-
27
- // const handleTimeUpdate = () => {
28
- // setCurrentTime(videoRef.current.currentTime);
29
- // };
30
-
31
- // const handleDurationChange = () => {
32
- // const newDuration = videoRef.current.duration;
33
- // setDuration(newDuration);
34
- // onDuration && onDuration(newDuration);
35
- // };
36
-
37
- // videoRef.current.addEventListener('timeupdate', handleTimeUpdate);
38
- // videoRef.current.addEventListener('durationchange', handleDurationChange);
39
-
40
- // return () => {
41
- // videoRef.current?.removeEventListener('timeupdate', handleTimeUpdate);
42
- // videoRef.current?.removeEventListener('durationchange', handleDurationChange);
43
- // };
44
- // }, [onDuration]);
45
-
46
- // const formatTime = (time: number) => {
47
- // const minutes = Math.floor(time / 60);
48
- // const seconds = Math.floor(time % 60);
49
- // return `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
50
- // };
51
-
52
- // const handlePlay = () => {
53
- // videoRef.current?.play();
54
- // setIsPlaying(true);
55
- // };
56
-
57
- // const handlePause = () => {
58
- // videoRef.current?.pause();
59
- // setIsPlaying(false);
60
- // };
61
-
62
- // const handleStop = () => {
63
- // videoRef.current?.pause();
64
- // videoRef.current.currentTime = 0;
65
- // setIsPlaying(false);
66
- // };
67
-
68
- // const handleRewind = () => {
69
- // if (videoRef.current) videoRef.current.currentTime -= 10; // Rewind 10 seconds
70
- // };
71
-
72
- // const handleForward = () => {
73
- // if (videoRef.current) videoRef.current.currentTime += 10; // Forward 10 seconds
74
- // };
75
-
76
- // const handleToggleFullScreen = () => {
77
- // if (videoRef.current) {
78
- // if (videoRef.current.requestFullscreen) {
79
- // videoRef.current.requestFullscreen();
80
- // } else if (videoRef.current.mozRequestFullScreen) {
81
- // videoRef.current.mozRequestFullScreen();
82
- // } else if (videoRef.current.webkitRequestFullscreen) {
83
- // videoRef.current.webkitRequestFullscreen();
84
- // } else if (videoRef.current.msRequestFullscreen) {
85
- // videoRef.current.msRequestFullscreen();
86
- // }
87
- // setIsFullScreen(true);
88
- // }
89
- // };
90
-
91
- // // const handleExitFullScreen = () => {
92
- // // if (document.exitFullscreen) {
93
- // // document.exitFullscreen();
94
- // // } else if (document.mozCancelFullScreen) {
95
- // // document.mozCancelFullScreen();
96
- // // } else if (document.webkitExitFullscreen) {
97
- // // document.webkitExitFullscreen();
98
- // // } else if (document.msExitFullscreen) {
99
- // // document.msExitFullscreen();
100
- // // }
101
- // // setIsFullScreen(false);
102
- // // };
103
-
104
- // const handleProgressBarChange = (e: React.ChangeEvent<HTMLInputElement>) => {
105
- // const newTime = parseFloat(e.target.value);
106
- // setCurrentTime(newTime);
107
- // if (videoRef.current) videoRef.current.currentTime = newTime;
108
- // };
109
-
110
- // const handleVolumeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
111
- // const newVolume = parseFloat(e.target.value);
112
- // setVolume(newVolume);
113
- // if (videoRef.current) videoRef.current.volume = newVolume;
114
- // };
115
-
116
- // const timePlayed = formatTime(currentTime);
117
- // const timeLeft = formatTime(duration - currentTime);
118
-
119
- // return (
120
- // <div className="vide_container">
121
- // <video
122
- // ref={videoRef}
123
- // autoPlay={autoPlay}
124
- // src={src}
125
- // className="fit"
126
- // ></video>
127
- // <div className="video_controls" onDoubleClick={isPlaying ? handlePause : handlePlay}>
128
- // <RowFlex gap={0.3} funcss="padding-5">
129
- // <div>
130
- // <Text
131
- // text={timePlayed}
132
- // size="small"
133
- // bold
134
- // />
135
- // </div>
136
- // <div className="col width-100-p">
137
- // <input
138
- // type="range"
139
- // min={0}
140
- // max={duration}
141
- // value={currentTime}
142
- // className="width-100-p"
143
- // style={{ height: "3px" }}
144
- // onChange={handleProgressBarChange}
145
- // />
146
- // </div>
147
- // <div>
148
- // <Text
149
- // text={timeLeft}
150
- // size="small"
151
- // bold
152
- // />
153
- // </div>
154
- // </RowFlex>
155
- // <div className="margin-top-5"></div>
156
- // <RowFlex gap={1} justify="space-between">
157
- // <div>
158
- // <RowFlex gap={0.5}>
159
- // <ToolTip>
160
- // <div className="width-30 height-30 pointer padding-5" onClick={isPlaying ? handlePause : handlePlay}>
161
- // {isPlaying ? <PiPause /> : <PiPlay />}
162
- // </div>
163
- // <Tip tip="top" animation="ScaleUp" duration={0.5} content={isPlaying ? "Pause" : "Play"} />
164
- // </ToolTip>
165
- // <ToolTip>
166
- // <div className="width-30 height-30 pointer padding-5" onClick={handleRewind}>
167
- // <PiRewind />
168
- // </div>
169
- // <Tip tip="top" animation="ScaleUp" duration={0.5} content={"10 sec Back"} />
170
- // </ToolTip>
171
- // <ToolTip>
172
- // <div className="width-30 height-30 pointer padding-5" onClick={handleForward}>
173
- // <PiFastForward />
174
- // </div>
175
- // <Tip tip="top" animation="ScaleUp" duration={0.5} content={"10 sec Forward"} />
176
- // </ToolTip>
177
- // <div onMouseEnter={() => setShowVolume(true)} onMouseLeave={() => setShowVolume(false)}>
178
- // <RowFlex >
179
- // <ToolTip>
180
- // <div className="width-30 height-30 pointer padding-5">
181
- // <PiSpeakerLow />
182
- // </div>
183
- // <Tip tip="top" animation="ScaleUp" duration={0.5} content={"Volume"} />
184
- // </ToolTip>
185
- // {showVolume &&
186
- // <input
187
- // type="range"
188
- // min={0}
189
- // max={1}
190
- // step={0.01}
191
- // value={volume}
192
- // className="width-100"
193
- // style={{ height: "3px" }}
194
- // onChange={handleVolumeChange}
195
- // />
196
- // }
197
- // </RowFlex>
198
- // </div>
199
- // </RowFlex>
200
- // </div>
201
- // <div>
202
- // <RowFlex gap={0.3}>
203
- // <ToolTip>
204
- // <div className="width-30 height-30 pointer padding-5" onClick={handleToggleFullScreen}>
205
- // <PiCornersOut />
206
- // </div>
207
- // <Tip tip="top" animation="ScaleUp" duration={0.5} content={"Expand"} />
208
- // </ToolTip>
209
- // <ToolTip>
210
- // <div className="width-30 height-30 pointer padding-5" onClick={() => { window.open(src || "", '_blank'); }}>
211
- // <PiDownload />
212
- // </div>
213
- // <Tip tip="top" animation="ScaleUp" duration={0.5} content={"Download"} />
214
- // </ToolTip>
215
- // </RowFlex>
216
- // </div>
217
- // </RowFlex>
218
- // </div>
219
- // </div>
220
- // );
221
- // }