@limrun/ui 0.4.0 → 0.4.2
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.
- package/dist/index.cjs +1 -1
- package/dist/index.css +1 -1
- package/dist/index.js +120 -123
- package/package.json +1 -1
- package/src/components/remote-control.css +11 -28
- package/src/components/remote-control.tsx +1 -3
package/package.json
CHANGED
|
@@ -1,43 +1,31 @@
|
|
|
1
1
|
.rc-container {
|
|
2
2
|
position: relative;
|
|
3
|
-
display:
|
|
3
|
+
display: flex;
|
|
4
|
+
align-items: center;
|
|
5
|
+
justify-content: center;
|
|
4
6
|
box-sizing: border-box;
|
|
5
7
|
isolation: isolate;
|
|
6
8
|
|
|
7
9
|
touch-action: none;
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
.rc-container-portrait {
|
|
11
|
-
height: 100%;
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
.rc-container-landscape {
|
|
15
10
|
width: 100%;
|
|
11
|
+
height: 100%;
|
|
16
12
|
}
|
|
17
13
|
|
|
18
14
|
.rc-phone-frame {
|
|
19
15
|
position: relative;
|
|
20
|
-
z-index:
|
|
16
|
+
z-index: 30;
|
|
21
17
|
display: block;
|
|
22
18
|
pointer-events: none;
|
|
23
19
|
user-select: none;
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
.rc-phone-frame-portrait {
|
|
27
|
-
height: 100%;
|
|
20
|
+
width: auto;
|
|
21
|
+
height: auto;
|
|
28
22
|
max-width: 100%;
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
.rc-phone-frame-landscape {
|
|
32
|
-
width: 100%;
|
|
33
23
|
max-height: 100%;
|
|
34
24
|
}
|
|
35
25
|
|
|
36
26
|
.rc-video {
|
|
37
27
|
position: absolute;
|
|
38
|
-
|
|
39
|
-
width: 100%;
|
|
40
|
-
height: 100%;
|
|
28
|
+
z-index: 20;
|
|
41
29
|
outline: none;
|
|
42
30
|
pointer-events: none;
|
|
43
31
|
cursor: none;
|
|
@@ -53,18 +41,13 @@
|
|
|
53
41
|
bottom: auto;
|
|
54
42
|
}
|
|
55
43
|
|
|
56
|
-
.rc-video-ios-stretch {
|
|
57
|
-
/* iOS-only: intentionally stretch to fill the target screen box */
|
|
58
|
-
object-fit: fill;
|
|
59
|
-
z-index: 30;
|
|
60
|
-
}
|
|
61
|
-
|
|
62
44
|
.rc-video-frameless {
|
|
63
45
|
position: relative;
|
|
64
|
-
height: 100%;
|
|
65
46
|
top: auto;
|
|
66
47
|
left: auto;
|
|
67
|
-
|
|
48
|
+
transform: none;
|
|
49
|
+
max-width: 100%;
|
|
50
|
+
max-height: 100%;
|
|
68
51
|
}
|
|
69
52
|
|
|
70
53
|
.rc-video-loading {
|
|
@@ -994,7 +994,6 @@ export const RemoteControl = forwardRef<RemoteControlHandle, RemoteControlProps>
|
|
|
994
994
|
<div
|
|
995
995
|
className={clsx(
|
|
996
996
|
'rc-container',
|
|
997
|
-
isLandscape ? 'rc-container-landscape' : 'rc-container-portrait', // Use custom CSS class instead of Tailwind
|
|
998
997
|
className,
|
|
999
998
|
)}
|
|
1000
999
|
style={{ touchAction: 'none' }} // Keep touchAction none for the container
|
|
@@ -1014,7 +1013,7 @@ export const RemoteControl = forwardRef<RemoteControlHandle, RemoteControlProps>
|
|
|
1014
1013
|
ref={frameRef}
|
|
1015
1014
|
src={isLandscape ? config.frame.imageLandscape : config.frame.image}
|
|
1016
1015
|
alt=""
|
|
1017
|
-
className={
|
|
1016
|
+
className={'rc-phone-frame'}
|
|
1018
1017
|
draggable={false}
|
|
1019
1018
|
/>
|
|
1020
1019
|
)}
|
|
@@ -1023,7 +1022,6 @@ export const RemoteControl = forwardRef<RemoteControlHandle, RemoteControlProps>
|
|
|
1023
1022
|
className={clsx(
|
|
1024
1023
|
'rc-video',
|
|
1025
1024
|
!showFrame && 'rc-video-frameless',
|
|
1026
|
-
showFrame && platform === 'ios' && 'rc-video-ios-stretch',
|
|
1027
1025
|
!videoLoaded && 'rc-video-loading',
|
|
1028
1026
|
)}
|
|
1029
1027
|
style={{
|