@rtsee/ngx 0.0.71 → 0.0.74

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 (19) hide show
  1. package/dist/ngx/fesm2022/rtsee-ngx.mjs +370 -242
  2. package/dist/ngx/fesm2022/rtsee-ngx.mjs.map +1 -1
  3. package/dist/ngx/index.d.ts +74 -51
  4. package/dist/ngx/src/lib/theme/common-variables.scss +1 -1
  5. package/dist/ngx/src/lib/theme/containers/nav.scss +4 -0
  6. package/dist/ngx/src/lib/theme/containers/shell.scss +42 -17
  7. package/dist/ngx/src/lib/theme/messenger/chat-input.scss +18 -20
  8. package/dist/ngx/src/lib/theme/messenger/chat-thumbnail.scss +1 -3
  9. package/dist/ngx/src/lib/theme/messenger/chat.scss +1 -3
  10. package/dist/ngx/src/lib/theme/messenger/index.scss +1 -0
  11. package/dist/ngx/src/lib/theme/messenger/messages-list.scss +11 -0
  12. package/dist/ngx/src/lib/theme/messenger/messenger-header.scss +148 -102
  13. package/dist/ngx/src/lib/theme/messenger/messenger.scss +9 -60
  14. package/dist/ngx/src/lib/theme/messenger/profile.scss +40 -0
  15. package/dist/ngx/src/lib/theme/presentation/index.scss +1 -0
  16. package/dist/ngx/src/lib/theme/presentation/presentation.scss +6 -2
  17. package/dist/ngx/src/lib/theme/presentation/settings.scss +70 -0
  18. package/dist/ngx/src/lib/theme/presentation/story-player.scss +55 -43
  19. package/package.json +8 -7
package/dist/ngx/src/lib/theme/messenger/messenger-header.scss CHANGED
@@ -17,166 +17,212 @@
17
17
  -ms-user-select: none;
18
18
  user-select: none;
19
19
 
20
- &.rtsee-messenger-header-chat-opened {
21
- padding-right: 0;
20
+ &.rtsee-chat-header-unread {
21
+ padding-left: $rts-offset-lg + $rts-offset-md;
22
+ }
22
23
 
23
- &.rtsee-messenger-header-expanded {
24
- height: 100%;
25
- padding: 0;
24
+ &.rtsee-messenger-header-expanded {
25
+ padding: 0;
26
+ height: auto;
26
27
 
28
+ .rtsee-messenger-header-center {
27
29
  .rtsee-messenger-header-opened-chat-info {
28
- padding: 0;
30
+ padding: 0 $rts-offset-sm;
31
+ height: auto;
29
32
  }
30
- }
31
33
 
32
- .rtsee-messenger-header-chat-title {
33
- white-space: nowrap;
34
- text-overflow: ellipsis;
35
- overflow: hidden;
36
- font-size: 16px;
37
- font-weight: 600;
38
- margin: 0;
34
+ .rtsee-messenger-header-title {
35
+ display: none;
36
+ }
39
37
  }
40
- }
41
38
 
42
- &.rtsee-chat-header-unread {
43
- padding-left: $rts-offset-lg;
39
+ .rtsee-messenger-header-collapse-button {
40
+ display: block;
41
+ }
44
42
  }
45
43
 
46
- .rtsee-messenger-header-opened-chat-info {
47
- position: relative;
48
- padding: $rts-offset-sm $rts-messenger-header-height $rts-offset-sm $rts-offset-sm;
49
- height: $rts-messenger-header-height;
50
- transition: height, padding-left 0.2s;
51
- display: flex;
52
- align-items: center;
44
+ &.rtsee-messenger-header-my-profile-mode {
53
45
 
54
- .rtsee-messenger-profile-image-container {
55
- right: 0;
56
- left: unset;
46
+ .rtsee-messenger-header-center {
47
+ .rtsee-messenger-header-opened-chat-info {
48
+ .rtsee-messenger-profile-controls {
49
+ display: none;
50
+ }
51
+ }
57
52
  }
58
53
 
59
- &.rtsee-messenger-header-opened-chat-info-expanded {
60
- height: 100%;
61
- display: initial;
54
+ .rtsee-messenger-header-left {
55
+ width: 100%;
56
+ height: auto;
57
+ position: static;
62
58
 
63
- .rtsee-messenger-profile-image-container {
64
- width: 100%;
65
- height: unset;
59
+ .rtsee-messenger-header-avatar {
66
60
  padding: 0;
67
61
 
68
- .rtsee-messenger-profile-image {
62
+ .rtsee-messenger-header-avatar-image {
69
63
  border-radius: 0;
70
64
  }
71
65
  }
66
+ }
67
+
68
+ .rtsee-messenger-header-right {
69
+ display: none;
70
+ }
71
+ }
72
+
73
+ &.rtsee-messenger-header-chat-info-mode {
74
+ .rtsee-messenger-header-right {
75
+ width: 100%;
76
+ height: auto;
77
+ position: static;
72
78
 
73
- .rtsee-messenger-profile-header-placeholder {
74
- padding-top: 65%;
75
- height: unset;
76
- position: relative;
77
-
78
- .rtsee-messenger-header-chat-title {
79
- position: absolute;
80
- left: $rts-offset-sm;
81
- bottom: $rts-offset-sm;
82
- color: $rts-font-color-dbg-light;
83
- z-index: 2;
84
- text-shadow: 1px 1px 2px black;
79
+ .rtsee-messenger-header-avatar {
80
+ padding: 0;
81
+
82
+ .rtsee-messenger-header-avatar-image {
83
+ border-radius: 0;
85
84
  }
86
85
  }
86
+ }
87
87
 
88
- .rtsee-messenger-profile-data-container {
89
- opacity: 1;
90
- }
88
+ .rtsee-messenger-header-left {
89
+ display: none;
91
90
  }
92
91
  }
93
92
 
94
- .rtsee-messenger-close-chat {
95
- position: absolute;
96
- left: 0;
97
- top: 0;
98
- height: $rts-messenger-header-height;
99
- width: $rts-messenger-header-height;
100
- overflow: hidden;
101
- border: none;
102
- background: transparent;
103
- outline: none;
104
- font-size: 12px;
105
- display: flex;
106
- align-items: center;
107
- color: $rts-new-primary-color;
93
+ &.rtsee-messenger-header-chat-opened {
94
+ &.rtsee-messenger-header-expanded {
95
+ //height: 100%;
96
+ //padding: 0;
108
97
 
109
- .unread-count {
110
- background: $rts-new-primary-color;
111
- padding: (($rts-new-offset-xsm) / 2 - 1) $rts-new-offset-xsm / 2 ;
112
- border-radius: 50%;
113
- width: 20px;
114
- color: $rts-font-color-dbg-light;
115
- margin-left: 2px;
98
+ .rtsee-messenger-header-opened-chat-info {
99
+ padding: 0;
100
+ }
101
+
102
+ .rtsee-messenger-header-title {
103
+ display: none;
104
+ }
105
+ }
106
+
107
+ .rtsee-messenger-header-chat-title {
108
+ white-space: nowrap;
109
+ text-overflow: ellipsis;
110
+ overflow: hidden;
111
+ font-size: 16px;
112
+ font-weight: 600;
113
+ margin: 0;
116
114
  }
117
115
  }
118
116
 
119
- .rtsee-messenger-profile-image-container {
120
- position: absolute;
121
- left: 0;
122
- top: 0;
123
- height: $rts-messenger-header-height;
124
- width: $rts-messenger-header-height;
125
- transition: width 0.2s;
117
+ .rtsee-messenger-header-avatar {
126
118
  padding: $rts-offset-sm;
127
119
  overflow: hidden;
120
+ cursor: pointer;
128
121
 
129
- .rtsee-messenger-profile-image {
122
+ .rtsee-messenger-header-avatar-image {
130
123
  width: 100%;
131
124
  background-size: contain;
132
125
  padding-top: 100%;
133
126
  border-radius: 50%;
134
127
  transition: border-radius 0.2s;
128
+
129
+ &:hover {
130
+ outline: 3px solid rgba(0, 0, 0, 0.1);
131
+ }
135
132
  }
136
133
  }
137
134
 
138
- .rtsee-messenger-profile-image-placeholder {
139
- height: 100%;
140
- width: 100%;
141
- position: relative;
135
+ .rtsee-messenger-header-collapse-button {
136
+ display: none;
137
+ position: absolute;
138
+ left: $rts-offset-sm;
139
+ top: $rts-offset-sm;
140
+ color: #fff;
141
+ background-color: rgba(0, 0, 0, 0.2);
142
+ border-radius: 50%;
143
+ cursor: pointer;
144
+ height: 51px;
145
+ width: 51px;
146
+ line-height: 51px;
147
+ text-align: center;
142
148
  }
143
149
 
144
- .rtsee-messenger-profile-data-container {
145
- opacity: 0;
146
- position: relative;
147
- transition: opacity 0.2s;
150
+ .rtsee-messenger-header-left {
151
+ position: absolute;
152
+ top: 0;
153
+ left: 0;
154
+ width: $rts-messenger-header-height;
155
+ height: $rts-messenger-header-height;
156
+ transition: width 0.2s, height 0.2s, border-radius 0.2s;
148
157
  }
149
158
 
150
- .rtsee-messenger-menu-toggle, .rtsee-messenger-fold-toggle {
159
+ .rtsee-messenger-header-right {
151
160
  position: absolute;
161
+ float: right; // needed for seamless animation
162
+ top: 0;
152
163
  right: 0;
164
+ width: $rts-messenger-header-height;
165
+ height: $rts-messenger-header-height;
166
+ transition: width 0.2s, height 0.2s, border-radius 0.2s;
167
+ }
168
+
169
+ .rtsee-messenger-header-center {
170
+ clear: both;
171
+
172
+ .rtsee-messenger-header-title {
173
+ margin: 0;
174
+ white-space: nowrap;
175
+ text-overflow: ellipsis;
176
+ overflow: hidden;
177
+ line-height: $rts-messenger-header-height;
178
+ font-weight: 600;
179
+ }
180
+
181
+ .rtsee-messenger-header-opened-chat-info {
182
+ position: relative;
183
+ padding: 0;
184
+ height: $rts-messenger-header-height;
185
+ line-height: $rts-messenger-header-height;
186
+ overflow: hidden;
187
+ transition: height, padding-left 0.2s;
188
+ }
189
+ }
190
+
191
+ .rtsee-messenger-close-chat {
192
+ position: absolute;
193
+ left: 0;
153
194
  top: 0;
154
195
  height: $rts-messenger-header-height;
155
- min-width: $rts-messenger-header-height;
196
+ width: $rts-messenger-header-height;
156
197
  overflow: hidden;
157
198
  border: none;
199
+ background: transparent;
158
200
  outline: none;
159
- background-color: transparent;
160
- padding: $rts-offset-sm;
201
+ font-size: 12px;
202
+ display: flex;
203
+ align-items: center;
204
+ color: $rts-new-primary-color;
161
205
  cursor: pointer;
162
206
 
163
- :hover {
207
+ &:hover {
164
208
  opacity: 0.7;
165
209
  }
166
210
 
167
- .rtsee-messenger-menu-toggle-icon {
168
- line-height: $rts-messenger-header-height - $rts-offset-sm * 2;
169
- font-size: 24px;
211
+ .unread-count {
212
+ height: 21px;
213
+ width: 21px;
214
+ background: $rts-new-primary-color;
215
+ margin-left: 2px;
216
+ border-radius: 50%;
217
+ color: #ffffff;
218
+ text-align: center;
219
+ line-height: 21px;
170
220
  }
171
221
  }
172
222
 
173
- .rtsee-messenger-header-title {
174
- margin: 0;
175
- white-space: nowrap;
176
- text-overflow: ellipsis;
177
- overflow: hidden;
178
- line-height: $rts-messenger-header-height;
179
- font-weight: 600;
223
+ .rtsee-messenger-my-peer-data-container {
224
+ opacity: 0;
225
+ position: relative;
226
+ transition: opacity 0.2s;
180
227
  }
181
-
182
228
  }
package/dist/ngx/src/lib/theme/messenger/messenger.scss CHANGED
@@ -12,35 +12,20 @@ $control-icon-size: 18px;
12
12
  padding-top: $rts-messenger-header-height;
13
13
  color: $rts-font-color-dark;
14
14
  position: relative;
15
- border-radius: $rts-default-border-radius;
16
15
  overflow: hidden;
17
16
  background-color: $rts-main-bg-color-light;
18
17
 
19
- .rtsee-messenger-overlay {
20
- display: none;
21
- background-color: rgba(0,0,0,0.8);
22
- position: absolute;
23
- left: 0;
24
- top: 0;
25
- width: 100%;
26
- height: 100%;
27
- }
28
-
29
- &.rtsee-messenger-main-menu-opened {
30
- .rtsee-messenger-main-menu-container {
31
- top: $rts-messenger-header-height;
32
- }
33
-
34
- .rtsee-messenger-overlay {
35
- display: block;
36
- }
37
- }
38
-
39
18
  &.rtsee-messenger-header-expanded {
19
+ padding-top: 0;
20
+
40
21
  .rtsee-messenger-header-container {
41
- height: 100%;
22
+ position: static;
23
+ height: auto;
42
24
  padding: 0;
43
- z-index: 1;
25
+ }
26
+
27
+ .rtsee-messenger-body-container {
28
+ display: none;
44
29
  }
45
30
  }
46
31
 
@@ -51,6 +36,7 @@ $control-icon-size: 18px;
51
36
  left: 0;
52
37
  width: 100%;
53
38
  height: $rts-messenger-header-height;
39
+ z-index: 1;
54
40
  }
55
41
 
56
42
  .rtsee-messenger-body-container {
@@ -59,42 +45,5 @@ $control-icon-size: 18px;
59
45
  position: relative;
60
46
  }
61
47
 
62
- .rtsee-messenger-main-menu-container {
63
- position: absolute;
64
- top: 100%;
65
- left: 0;
66
- width: 100%;
67
- height: calc(100% - #{$rts-messenger-header-height});
68
- background-color: $rts-main-bg-color-light;
69
- z-index: 1;
70
- }
71
-
72
- // new styles
73
48
 
74
- .rtsee-messenger-main-menu, .rtsee-messenger-profile {
75
- .rtsee-messenger-controls, .rtsee-messenger-profile-controls {
76
- list-style-type: none;
77
- padding-inline-start: $rts-new-offset-sm;
78
- .rtsee-messenger-control-item {
79
- display: flex;
80
- align-items: center;
81
- margin-bottom: 18px;
82
- color: $rts-font-color-dbg-light;
83
- text-shadow: 1px 1px 2px black;
84
- }
85
-
86
- .rtsee-messenger-control-icon {
87
- display: flex;
88
- align-items: center;
89
- height: $control-icon-size;
90
- width: $control-icon-size;
91
- justify-content: center;
92
- background: $rts-new-secondary-bg-color-light;
93
- border-radius: 50%;
94
- padding: $rts-new-offset-sm;
95
- margin-right: $rts-new-offset-sm;
96
- color: $rts-new-primary-color;
97
- }
98
- }
99
- }
100
49
  }
package/dist/ngx/src/lib/theme/messenger/profile.scss ADDED
@@ -0,0 +1,40 @@
1
+ @import "./variables";
2
+
3
+
4
+ .rtsee-messenger-profile {
5
+ padding: $rts-offset-sm;
6
+
7
+ .rtsee-messenger-profile-actions {
8
+ list-style-type: none;
9
+ padding-left: 0;
10
+ margin: 0 0 16px 0;
11
+ gap: $rts-offset-md;
12
+ display: flex;
13
+ flex-direction: row;
14
+ align-items: center;
15
+ justify-content: center;
16
+
17
+ .rtsee-messenger-profile-actions-item {
18
+ color: $rts-new-primary-color;
19
+ }
20
+ }
21
+
22
+ .rtsee-messenger-profile-auth {
23
+ .rtsee-messenger-profile-anon-message {
24
+ margin-bottom: $rts-offset-md;
25
+ }
26
+
27
+ .rtsee-messenger-profile-auth-buttons {
28
+ display: flex;
29
+ flex-direction: row;
30
+ align-items: center;
31
+ justify-content: center;
32
+ gap: $rts-offset-md;
33
+ margin-bottom: $rts-offset-md;
34
+
35
+ .rtsee-messenger-profile-auth-button {
36
+
37
+ }
38
+ }
39
+ }
40
+ }
package/dist/ngx/src/lib/theme/presentation/index.scss CHANGED
@@ -6,3 +6,4 @@
6
6
  @import "./manage-stories";
7
7
  @import "./dashboard";
8
8
  @import "./presentation";
9
+ @import "./settings";
package/dist/ngx/src/lib/theme/presentation/presentation.scss CHANGED
@@ -6,7 +6,7 @@
6
6
  width: 100%;
7
7
 
8
8
  &.rtsee-presentation-header-convertable {
9
- position: absolute;
9
+ position: fixed;
10
10
  height: $presentation-dashboard-header-height;
11
11
  bottom: - $presentation-dashboard-header-height;
12
12
  z-index: 300;
@@ -29,6 +29,7 @@
29
29
  left: 0;
30
30
  height: $presentation-dashboard-header-height;
31
31
  width: $presentation-dashboard-header-height;
32
+ cursor: pointer;
32
33
 
33
34
  .rtsee-presentation-header-active-story-info-close-icon {
34
35
  font-size: 1.5rem
@@ -55,10 +56,13 @@
55
56
  height: $presentation-dashboard-header-height;
56
57
  right: 0;
57
58
  top: 0;
58
-
59
+ cursor: pointer;
59
60
 
60
61
  .rtsee-presentation-header-active-story-info-settings-icon {
61
62
  font-size: 1.8rem;
63
+ padding: 7px;
64
+ background-color: rgba(0, 0, 0, 0.06);
65
+ border-radius: 50%;
62
66
  }
63
67
  }
64
68
  }
package/dist/ngx/src/lib/theme/presentation/settings.scss ADDED
@@ -0,0 +1,70 @@
1
+ @import "./variables";
2
+
3
+ .rtsee-presentation-settings {
4
+ position: fixed;
5
+ width: 100%;
6
+ height: 100%;
7
+ top: 0;
8
+ left: 0;
9
+ bottom: 0;
10
+ right: 0;
11
+ z-index: 305; // 300 = story-player footer
12
+ padding: $rts-offset-sm;
13
+ overflow: auto;
14
+ background-color: #ffffff;
15
+
16
+ .rtsee-presentation-settings-header {
17
+ display: flex;
18
+ flex-direction: row;
19
+ justify-content: space-between;
20
+ }
21
+
22
+ .rtsee-presentation-rooms {
23
+ margin-bottom: $rts-offset-md;
24
+
25
+ .rtsee-presentation-settings-rooms-list {
26
+ .rtsee-presentation-settings-rooms-list-item {
27
+ display: flex;
28
+ flex-direction: row;
29
+ justify-content: left;
30
+ align-items: center;
31
+ gap: $rts-offset-sm;
32
+
33
+ .rtsee-presentation-settings-rooms-list-item-image {
34
+ width: $rts-new-user-avatar-d-sm;
35
+ height: $rts-new-user-avatar-d-sm;
36
+ border-radius: 50%;
37
+ overflow: hidden;
38
+ }
39
+ }
40
+ }
41
+
42
+ }
43
+
44
+ .rtsee-presentation-sound-settings {
45
+ .rtsee-presentation-sound-settings-inner {
46
+ display: flex;
47
+ flex-direction: row;
48
+ align-items: center;
49
+ gap: $rts-offset-md;
50
+
51
+ .rtsee-presentation-sound-settings-inner-left {
52
+ flex: 1;
53
+ }
54
+
55
+ .rtsee-presentation-sound-settings-inner-right {
56
+ width: auto;
57
+ }
58
+ }
59
+ }
60
+
61
+ .rtsee-presentation-font-size-settings {
62
+ .rtsee-presentation-font-size-range {
63
+ margin-bottom: $rts-offset-md;
64
+ }
65
+ }
66
+
67
+ @media screen and (min-width: $rts-break-md) {
68
+ position: absolute;
69
+ }
70
+ }
package/dist/ngx/src/lib/theme/presentation/story-player.scss CHANGED
@@ -1,61 +1,73 @@
1
1
  @import "./variables";
2
2
 
3
- .rtsee-story-player {
4
- position: fixed;
5
- top: 0;
6
- left: 0;
7
- width: 100%;
8
- height: 100%;
9
- z-index: 3;
10
-
11
- overflow: hidden;
12
-
13
- .rtsee-presentation-header-story-name {
14
- white-space: nowrap;
15
- overflow: hidden;
16
- text-overflow: ellipsis;
3
+ .rtsee-shell {
4
+ &.rtsee-shell-conference-mode {
5
+ .rtsee-story-player {
6
+ height: calc(100% - $video-container-height);
7
+ top: $video-container-height;
8
+ }
17
9
  }
18
10
 
19
- .rtsee-story-player-slider {
11
+ .rtsee-story-player {
12
+ position: fixed;
13
+ top: 0;
14
+ left: 0;
15
+ width: 100%;
20
16
  height: 100%;
17
+ z-index: 3;
18
+
19
+ overflow: hidden;
20
+
21
+ .rtsee-presentation-header-story-name {
22
+ white-space: nowrap;
23
+ overflow: hidden;
24
+ text-overflow: ellipsis;
25
+ }
21
26
 
22
- .story-player-slide-container {
23
- touch-action: pan-y;
24
- //display: none;
27
+ .rtsee-story-player-slider {
25
28
  height: 100%;
26
29
 
27
- &.story-player-slide-active {
28
- //display: block;
29
- }
30
+ .story-player-slide-container {
31
+ touch-action: pan-y;
32
+ //display: none;
33
+ height: 100%;
30
34
 
31
- .rtsee-presentation-slide-controls {
32
- padding: $rts-offset-sm;
33
- display: flex;
34
- flex-direction: row;
35
- justify-content: center;
36
- align-items: center;
37
- gap: $rts-offset-sm;
38
- opacity: 1;
39
- transition: opacity 0.5s ease-in-out;
40
-
41
- &.rtsee-presentation-slide-controls-hidden {
42
- visibility: hidden;
43
- opacity: 0;
35
+ &.story-player-slide-active {
36
+ //display: block;
37
+ }
38
+
39
+ .rtsee-presentation-slide-controls {
40
+ padding: $rts-offset-sm;
41
+ display: flex;
42
+ flex-direction: row;
43
+ justify-content: center;
44
+ align-items: center;
45
+ gap: $rts-offset-sm;
46
+ opacity: 1;
47
+ transition: opacity 0.5s ease-in-out;
48
+
49
+ &.rtsee-presentation-slide-controls-hidden {
50
+ visibility: hidden;
51
+ opacity: 0;
52
+ }
44
53
  }
45
54
  }
46
55
  }
47
- }
48
56
 
49
- @media screen and (min-width: $rts-break-md) {
50
- position: static;
51
- height: $stories-player-height-wide-screen;
52
- height: $stories-player-height-wide-screen-dvh;
57
+ @media screen and (min-width: $rts-break-md) {
58
+ position: static;
59
+ height: $stories-player-height-wide-screen;
60
+ height: $stories-player-height-wide-screen-dvh;
53
61
 
54
- .rtsee-story-player-slider {
55
- .story-player-slide-container {
56
- height: $stories-player-height-wide-screen;
57
- height: $stories-player-height-wide-screen-dvh; // we need a macros for this
62
+ .rtsee-story-player-slider {
63
+ .story-player-slide-container {
64
+ height: $stories-player-height-wide-screen;
65
+ height: $stories-player-height-wide-screen-dvh; // we need a macros for this
66
+ }
58
67
  }
59
68
  }
60
69
  }
61
70
  }
71
+
72
+
73
+