@live-change/peer-connection-frontend 0.9.31 → 0.9.33

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 (8) hide show
  1. package/front/src/NavBar.vue +25 -25
  2. package/front/src/Page.vue +2 -2
  3. package/front/src/components/Debugger.vue +9 -9
  4. package/front/src/components/DeviceSelect.vue +20 -20
  5. package/front/src/components/MediaSettingsButton.vue +10 -10
  6. package/front/src/components/PermissionsDialog.vue +2 -2
  7. package/front/src/components/VolumeIndicator.vue +3 -3
  8. package/package.json +17 -17
package/front/src/NavBar.vue CHANGED
@@ -2,49 +2,49 @@
2
2
  <div class="surface-overlay py-3 px-6 shadow-2 flex align-items-center justify-content-between
3
3
  relative md:sticky top-0 z-5"
4
4
  style="min-height: 80px" key="navbar">
5
- <img src="/images/logo.svg" alt="Image" height="40" class="mr-0 lg:mr-6">
6
- <a v-ripple class="cursor-pointer block lg:hidden text-700 p-ripple"
7
- v-styleclass="{ selector: '@next', enterClass: 'hidden', leaveToClass: 'hidden', hideOnOutsideClick: true }">
5
+ <img src="/images/logo.svg" alt="Image" height="40" class="mr-0 lg:mr-12">
6
+ <a v-ripple class="cursor-pointer block lg:hidden text-surface-700 dark:text-surface-100 p-ripple"
7
+ v-styleclass="{ selector: '@next', enterFromClass: 'hidden', leaveToClass: 'hidden', hideOnOutsideClick: true }">
8
8
  <i class="pi pi-bars text-4xl"></i>
9
9
  </a>
10
- <div class="align-items-center flex-grow-1 justify-content-between hidden lg:flex absolute lg:static w-full surface-overlay left-0 top-100 z-1 shadow-2 lg:shadow-none">
11
- <ul class="list-none p-0 m-0 flex lg:align-items-center select-none flex-column lg:flex-row">
10
+ <div class="items-center grow justify-between hidden lg:flex absolute lg:static w-full bg-surface-0 dark:bg-surface-900 left-0 top-full z-10 shadow lg:shadow-none">
11
+ <ul class="list-none p-0 m-0 flex lg:items-center select-none flex-col lg:flex-row">
12
12
  <li>
13
- <a v-ripple class="flex px-6 p-3 lg:px-3 lg:py-2 align-items-center text-600 hover:text-900 hover:surface-100 font-medium border-round cursor-pointer transition-colors transition-duration-150 p-ripple">
13
+ <a v-ripple class="flex px-12 p-4 lg:px-4 lg:py-2 items-center text-surface-600 dark:text-surface-200 hover:text-surface-900 dark:hover:text-surface-0 hover:bg-surface-100 dark:hover:bg-surface-700 font-medium rounded-border cursor-pointer transition-colors duration-150 p-ripple">
14
14
  <i class="pi pi-home mr-2"></i>
15
15
  <span>Home</span>
16
16
  </a>
17
17
  </li>
18
18
  <li class="lg:relative">
19
- <a v-ripple class="flex px-6 p-3 lg:px-3 lg:py-2 align-items-center text-600 hover:text-900 hover:surface-100 font-medium border-round cursor-pointer transition-colors transition-duration-150 p-ripple"
20
- v-styleclass="{ selector: '@next', enterClass: 'hidden', enterActiveClass: 'scalein', leaveToClass: 'hidden', leaveActiveClass: 'fadeout', hideOnOutsideClick: true }">
19
+ <a v-ripple class="flex px-12 p-4 lg:px-4 lg:py-2 items-center text-surface-600 dark:text-surface-200 hover:text-surface-900 dark:hover:text-surface-0 hover:bg-surface-100 dark:hover:bg-surface-700 font-medium rounded-border cursor-pointer transition-colors duration-150 p-ripple"
20
+ v-styleclass="{ selector: '@next', enterFromClass: 'hidden', enterActiveClass: 'scalein', leaveToClass: 'hidden', leaveActiveClass: 'fadeout', hideOnOutsideClick: true }">
21
21
  <i class="pi pi-users mr-2"></i>
22
22
  <span>Customers</span>
23
- <i class="pi pi-angle-down ml-auto lg:ml-3"></i>
23
+ <i class="pi pi-angle-down ml-auto lg:ml-4"></i>
24
24
  </a>
25
- <ul class="list-none py-3 px-6 m-0 lg:px-0 lg:py-0 border-round shadow-0 lg:shadow-2 lg:border-1 border-50 lg:absolute surface-overlay hidden origin-top w-full lg:w-15rem cursor-pointer">
25
+ <ul class="list-none py-4 px-12 m-0 lg:px-0 lg:py-0 rounded-border shadow-0 lg:shadow lg:border border-surface-50 dark:border-surface-800 lg:absolute bg-surface-0 dark:bg-surface-900 hidden origin-top w-full lg:w-60 cursor-pointer">
26
26
  <li>
27
- <a v-ripple class="flex p-3 align-items-center text-600 hover:text-900 hover:surface-100 transition-colors transition-duration-150 p-ripple">
27
+ <a v-ripple class="flex p-4 items-center text-surface-600 dark:text-surface-200 hover:text-surface-900 dark:hover:text-surface-0 hover:bg-surface-100 dark:hover:bg-surface-700 transition-colors duration-150 p-ripple">
28
28
  <i class="pi pi-user-plus mr-2"></i>
29
29
  <span class="font-medium">Add New</span>
30
30
  </a>
31
31
  </li>
32
32
  <li class="relative">
33
- <a v-ripple class="flex p-3 align-items-center text-600 hover:text-900 hover:surface-100 transition-colors transition-duration-150 p-ripple"
34
- v-styleclass="{ selector: '@next', enterClass: 'hidden', enterActiveClass: 'scalein', leaveToClass: 'hidden', leaveActiveClass: 'fadeout', hideOnOutsideClick: true }">
33
+ <a v-ripple class="flex p-4 items-center text-surface-600 dark:text-surface-200 hover:text-surface-900 dark:hover:text-surface-0 hover:bg-surface-100 dark:hover:bg-surface-700 transition-colors duration-150 p-ripple"
34
+ v-styleclass="{ selector: '@next', enterFromClass: 'hidden', enterActiveClass: 'scalein', leaveToClass: 'hidden', leaveActiveClass: 'fadeout', hideOnOutsideClick: true }">
35
35
  <i class="pi pi-search mr-2"></i>
36
36
  <span class="font-medium">Search</span>
37
37
  <i class="pi pi-angle-down ml-auto lg:-rotate-90"></i>
38
38
  </a>
39
- <ul class="list-none py-3 pl-3 m-0 lg:px-0 lg:py-0 border-round shadow-0 lg:shadow-2 lg:border-1 border-50 lg:absolute surface-overlay hidden origin-top w-full lg:w-15rem cursor-pointer left-100 top-0">
39
+ <ul class="list-none py-4 pl-4 m-0 lg:px-0 lg:py-0 rounded-border shadow-0 lg:shadow lg:border border-surface-50 dark:border-surface-800 lg:absolute bg-surface-0 dark:bg-surface-900 hidden origin-top w-full lg:w-60 cursor-pointer left-full top-0">
40
40
  <li>
41
- <a v-ripple class="flex p-3 align-items-center text-600 hover:text-900 hover:surface-100 transition-colors transition-duration-150 p-ripple">
41
+ <a v-ripple class="flex p-4 items-center text-surface-600 dark:text-surface-200 hover:text-surface-900 dark:hover:text-surface-0 hover:bg-surface-100 dark:hover:bg-surface-700 transition-colors duration-150 p-ripple">
42
42
  <i class="pi pi-shopping-cart mr-2"></i>
43
43
  <span class="font-medium">Purchases</span>
44
44
  </a>
45
45
  </li>
46
46
  <li class="relative">
47
- <a v-ripple class="flex p-3 align-items-center text-600 hover:text-900 hover:surface-100 transition-colors transition-duration-150 p-ripple">
47
+ <a v-ripple class="flex p-4 items-center text-surface-600 dark:text-surface-200 hover:text-surface-900 dark:hover:text-surface-0 hover:bg-surface-100 dark:hover:bg-surface-700 transition-colors duration-150 p-ripple">
48
48
  <i class="pi pi-comments mr-2"></i>
49
49
  <span class="font-medium">Messages</span>
50
50
  </a>
@@ -54,21 +54,21 @@
54
54
  </ul>
55
55
  </li>
56
56
  <li>
57
- <a v-ripple class="flex px-6 p-3 lg:px-3 lg:py-2 align-items-center text-600 hover:text-900 hover:surface-100 font-medium border-round cursor-pointer transition-colors transition-duration-150 p-ripple">
57
+ <a v-ripple class="flex px-12 p-4 lg:px-4 lg:py-2 items-center text-surface-600 dark:text-surface-200 hover:text-surface-900 dark:hover:text-surface-0 hover:bg-surface-100 dark:hover:bg-surface-700 font-medium rounded-border cursor-pointer transition-colors duration-150 p-ripple">
58
58
  <i class="pi pi-calendar mr-2"></i>
59
59
  <span>Calendar</span>
60
60
  </a>
61
61
  </li>
62
62
  <li>
63
- <a v-ripple class="flex px-6 p-3 lg:px-3 lg:py-2 align-items-center text-600 hover:text-900 hover:surface-100 font-medium border-round cursor-pointer transition-colors transition-duration-150 p-ripple">
63
+ <a v-ripple class="flex px-12 p-4 lg:px-4 lg:py-2 items-center text-surface-600 dark:text-surface-200 hover:text-surface-900 dark:hover:text-surface-0 hover:bg-surface-100 dark:hover:bg-surface-700 font-medium rounded-border cursor-pointer transition-colors duration-150 p-ripple">
64
64
  <i class="pi pi-chart-line mr-2"></i>
65
65
  <span>Stats</span>
66
66
  </a>
67
67
  </li>
68
68
  </ul>
69
- <ul class="list-none p-0 m-0 flex lg:align-items-center select-none flex-column lg:flex-row border-top-1 surface-border lg:border-top-none">
69
+ <ul class="list-none p-0 m-0 flex lg:items-center select-none flex-col lg:flex-row border-t border-surface lg:border-t-0">
70
70
  <li>
71
- <a v-ripple class="flex px-6 p-3 lg:px-3 lg:py-2 align-items-center text-600 hover:text-900 hover:surface-100 font-medium border-round cursor-pointer transition-colors transition-duration-150 p-ripple">
71
+ <a v-ripple class="flex px-12 p-4 lg:px-4 lg:py-2 items-center text-surface-600 dark:text-surface-200 hover:text-surface-900 dark:hover:text-surface-0 hover:bg-surface-100 dark:hover:bg-surface-700 font-medium rounded-border cursor-pointer transition-colors duration-150 p-ripple">
72
72
  <i class="pi pi-inbox text-base lg:text-2xl mr-2 lg:mr-0"></i>
73
73
  <span class="block lg:hidden font-medium">Inbox</span>
74
74
  </a>
@@ -82,12 +82,12 @@
82
82
  <span class="block lg:hidden font-medium">Notifications</span>
83
83
  </a>
84
84
  </li>
85
- <li class="border-top-1 surface-border lg:border-top-none">
86
- <a v-ripple class="flex px-6 p-3 lg:px-3 lg:py-2 align-items-center hover:surface-100 font-medium border-round cursor-pointer transition-colors transition-duration-150 p-ripple">
87
- <img src="/images/empty-user-photo.svg" class="mr-3 lg:mr-0 border-circle" style="width: 28px; height: 28px"/>
85
+ <li class="border-t border-surface lg:border-t-0">
86
+ <a v-ripple class="flex px-12 p-4 lg:px-4 lg:py-2 items-center hover:bg-surface-100 dark:hover:bg-surface-700 font-medium rounded-border cursor-pointer transition-colors duration-150 p-ripple">
87
+ <img src="/images/empty-user-photo.svg" class="mr-4 lg:mr-0 rounded-full" style="width: 28px; height: 28px"/>
88
88
  <div class="block lg:hidden">
89
- <div class="text-900 font-medium">Josephine Lillard</div>
90
- <span class="text-600 font-medium text-sm">Marketing Specialist</span>
89
+ <div class="text-surface-900 dark:text-surface-0 font-medium">Josephine Lillard</div>
90
+ <span class="text-surface-600 dark:text-surface-200 font-medium text-sm">Marketing Specialist</span>
91
91
  </div>
92
92
  </a>
93
93
  </li>
package/front/src/Page.vue CHANGED
@@ -1,12 +1,12 @@
1
1
  <template>
2
- <div class="min-h-screen flex flex-column surface-ground">
2
+ <div class="min-h-screen flex flex-col bg-surface-50 dark:bg-surface-950">
3
3
  <NavBar></NavBar>
4
4
  <ConfirmPopup v-if="isMounted"></ConfirmPopup>
5
5
  <Toast v-if="isMounted"></Toast>
6
6
  <div class="relative h-0 w-full">
7
7
  <ProgressBar v-if="loading || working" mode="indeterminate" style="height: .2em" />
8
8
  </div>
9
- <div v-if="pageType == 'simple'" class="p-5 flex flex-column flex-auto align-items-center">
9
+ <div v-if="pageType == 'simple'" class="p-8 flex flex-col flex-auto items-center">
10
10
  <slot></slot>
11
11
  </div>
12
12
  <div v-if="pageType == 'wide'">
package/front/src/components/Debugger.vue CHANGED
@@ -1,7 +1,7 @@
1
1
  <template>
2
- <div v-if="isMounted" class="w-full sm:w-9 md:w-8 lg:w-6 surface-card p-4 shadow-2 border-round">
3
- <div class="text-center mb-5">
4
- <div class="text-900 text-3xl font-medium mb-3">
2
+ <div v-if="isMounted" class="w-full sm:w-9/12 md:w-8/12 lg:w-6/12 bg-surface-0 dark:bg-surface-900 p-6 shadow rounded-border">
3
+ <div class="text-center mb-8">
4
+ <div class="text-surface-900 dark:text-surface-0 text-3xl font-medium mb-4">
5
5
  Peer Connection Debugger
6
6
  </div>
7
7
  </div>
@@ -9,10 +9,10 @@
9
9
  <div v-if="peer">
10
10
  <h2>Peer connection</h2>
11
11
  <pre>{{ JSON.stringify(peer.summary, null, " ") }}</pre>
12
- <div class="flex justify-content-between align-items-center">
13
- <div class="flex align-items-center">
12
+ <div class="flex justify-between items-center">
13
+ <div class="flex items-center">
14
14
  <InputSwitch v-model="peer.online" />
15
- <div class="ml-3">Peer online</div>
15
+ <div class="ml-4">Peer online</div>
16
16
  </div>
17
17
  <Button @click="sendTestMessage">Test Message</Button>
18
18
  </div>
@@ -46,16 +46,16 @@
46
46
  <DeviceSelect v-model="selectedDevices" />
47
47
  <hr>
48
48
  <pre>{{ selectedDevices }}</pre>
49
- <div class="mt-1 mb-3 flex align-items-center">
49
+ <div class="mt-1 mb-4 flex items-center">
50
50
  <InputSwitch v-model="userMediaEnabled" />
51
- <div class="ml-3">User media stream enabled</div>
51
+ <div class="ml-4">User media stream enabled</div>
52
52
  </div>
53
53
  </div>
54
54
 
55
55
  <div>
56
56
  <h2>Display media</h2>
57
57
 
58
- <div class="justify-content-between" v-if="!displayMedia">
58
+ <div class="justify-between" v-if="!displayMedia">
59
59
  <Button v-if="!displayMedia" @click="getDisplayMedia">getDisplayMedia</Button>
60
60
  <Button v-if="displayMedia" @click="dropDisplayMedia">drop DisplayMedia</Button>
61
61
  </div>
package/front/src/components/DeviceSelect.vue CHANGED
@@ -3,7 +3,7 @@
3
3
  <div v-if="videoInputRequest !== 'none'" @click="handleEmptyPreviewClick"
4
4
  class="w-full bg-gray-900 relative" style="aspect-ratio: 16/9">
5
5
  <div v-if="!model?.videoInput?.deviceId"
6
- class="flex flex-column align-items-center justify-content-center h-full">
6
+ class="flex flex-col items-center justify-center h-full">
7
7
  <i class="pi pi-eye-slash text-9xl text-gray-500" style="font-size: 2.5rem" />
8
8
  <div class="text-xl">Video input not found!</div>
9
9
  <div class>Please connect camera.</div>
@@ -12,7 +12,7 @@
12
12
  :src-object.prop.camel="model.media">
13
13
  </audio>
14
14
  </div>
15
- <div v-else class="bg-black-alpha-90 flex align-items-center justify-content-center absolute w-full h-full">
15
+ <div v-else class="bg-black/90 flex items-center justify-center absolute w-full h-full">
16
16
  <video v-if="model.media" autoplay playsinline :muted="userMediaMuted" ref="outputElement"
17
17
  :src-object.prop.camel="model.media"
18
18
  class="max-w-full max-h-full" style="object-fit: contain; transform: scaleX(-1)">
@@ -20,9 +20,9 @@
20
20
  </div>
21
21
 
22
22
  <div v-if="model.cameraAccessError || model.mediaError"
23
- class="absolute top-0 left-0 w-full h-full flex flex-column justify-content-center align-items-center">
23
+ class="absolute top-0 left-0 w-full h-full flex flex-col justify-center items-center">
24
24
  <div v-if="model.cameraAccessError"
25
- class="flex flex-column justify-content-center align-items-center m-3 p-2 bg-black-alpha-40">
25
+ class="flex flex-col justify-center items-center m-4 p-2 bg-black/40">
26
26
  <i class="bx bx-camera-off text-4xl text-red-600" />
27
27
  <div class="text-red-500 text-xl mb-1">
28
28
  Cannot access the camera.
@@ -33,7 +33,7 @@
33
33
  </div>
34
34
  </div>
35
35
  <div v-else-if="model.mediaError"
36
- class="flex flex-column justify-content-center align-items-center m-3 p-2 bg-black-alpha-40">
36
+ class="flex flex-col justify-center items-center m-4 p-2 bg-black/40">
37
37
  <i class="bx bx-camera-off text-4xl text-red-600" />
38
38
  <div class="text-red-500 text-xl mb-1">
39
39
  Cannot access media devices.
@@ -45,26 +45,26 @@
45
45
  </div>
46
46
 
47
47
  <div v-if="gettingUserMedia"
48
- class="absolute top-0 left-0 w-full h-full flex flex-column justify-content-center align-items-center">
48
+ class="absolute top-0 left-0 w-full h-full flex flex-col justify-center items-center">
49
49
  <ProgressSpinner />
50
50
  </div>
51
51
 
52
- <div class="absolute top-0 left-0 w-full h-full flex flex-column justify-content-end align-items-center">
53
- <div class="flex flex-row justify-content-between align-items-center h-5rem w-7rem media-buttons">
52
+ <div class="absolute top-0 left-0 w-full h-full flex flex-col justify-end items-center">
53
+ <div class="flex flex-row justify-between items-center h-20 w-28 media-buttons">
54
54
  <MicrophoneButton v-model="model" @disabled-audio-click="handleDisabledAudioClick" />
55
55
  <CameraButton v-model="model" @disabled-video-click="handleDisabledVideoClick" />
56
56
  </div>
57
57
  </div>
58
58
  <div class="absolute top-0 right-0" v-if="model.media">
59
- <div class="m-3">
59
+ <div class="m-4">
60
60
  <VolumeIndicator :stream="model.media" />
61
61
  </div>
62
62
  </div>
63
63
 
64
64
  </div>
65
- <div class="flex flex-row gap-2 pt-2 justify-content-around">
65
+ <div class="flex flex-row gap-2 pt-2 justify-around">
66
66
  <div v-if="audioInputRequest !== 'none' && audioInputs.length > 0"
67
- class="flex flex-column align-items-stretch flex-grow-1">
67
+ class="flex flex-col items-stretch grow">
68
68
  <div class="text-sm mb-1 pl-1">Microphone</div>
69
69
  <Dropdown :modelValue="model.audioInput"
70
70
  @update:modelValue="value => updateAudioInput(value)"
@@ -72,10 +72,10 @@
72
72
  optionLabel="label"
73
73
  placeholder="Select">
74
74
  <template #value="slotProps">
75
- <div class="flex flex-row align-items-center">
75
+ <div class="flex flex-row items-center">
76
76
  <i class="pi pi-microphone mr-2" />
77
77
  &nbsp;
78
- <div class="absolute overflow-hidden text-overflow-ellipsis" style="left: 2em; right: 2em;">
78
+ <div class="absolute overflow-hidden text-ellipsis" style="left: 2em; right: 2em;">
79
79
  {{ slotProps.value ? slotProps.value.label : slotProps.placeholder }}
80
80
  </div>
81
81
  </div>
@@ -83,17 +83,17 @@
83
83
  </Dropdown>
84
84
  </div>
85
85
  <div v-if="audioOutputRequest !== 'none' && audioOutputs.length > 0"
86
- class="flex flex-column align-items-stretch flex-grow-1">
86
+ class="flex flex-col items-stretch grow">
87
87
  <div class="text-sm mb-1 pl-1">Audio output</div>
88
88
  <Dropdown :modelValue="model.audioOutput"
89
89
  @update:modelValue="value => updateAudioOutput(value)"
90
90
  :options="audioOutputs" optionLabel="label"
91
91
  placeholder="Select">
92
92
  <template #value="slotProps">
93
- <div class="flex flex-row align-items-center">
93
+ <div class="flex flex-row items-center">
94
94
  <i class="pi pi-volume-up mr-2" />
95
95
  &nbsp;
96
- <div class="absolute overflow-hidden text-overflow-ellipsis" style="left: 2em; right: 2em;">
96
+ <div class="absolute overflow-hidden text-ellipsis" style="left: 2em; right: 2em;">
97
97
  {{ slotProps.value ? slotProps.value.label : slotProps.placeholder }}
98
98
  </div>
99
99
  </div>
@@ -102,17 +102,17 @@
102
102
  </div>
103
103
 
104
104
  <div v-if="videoInputRequest !== 'none' && videoInputs.length > 0"
105
- class="flex flex-column align-items-stretch flex-grow-1">
105
+ class="flex flex-col items-stretch grow">
106
106
  <div class="text-sm mb-1 pl-1">Camera</div>
107
107
  <Dropdown :modelValue="model.videoInput"
108
108
  @update:modelValue="value => updateVideoInput(value)"
109
109
  :options="videoInputs" optionLabel="label"
110
110
  placeholder="Select">
111
111
  <template #value="slotProps">
112
- <div class="flex flex-row align-items-center">
112
+ <div class="flex flex-row items-center">
113
113
  <i class="pi pi-camera mr-2" />
114
114
  &nbsp;
115
- <div class="absolute overflow-hidden text-overflow-ellipsis" style="left: 2em; right: 2em;">
115
+ <div class="absolute overflow-hidden text-ellipsis" style="left: 2em; right: 2em;">
116
116
  {{ slotProps.value ? slotProps.value.label : slotProps.placeholder }}
117
117
  </div>
118
118
  </div>
@@ -126,7 +126,7 @@
126
126
  :required-permissions="[{ name: 'camera' }, { name: 'microphone' }]"
127
127
  title="User media permissions" auto-close>
128
128
  <template #introduction>
129
- <div class="flex flex-column align-items-center">
129
+ <div class="flex flex-col items-center">
130
130
  <p>For the best experience, please allow access to your camera and microphone.</p>
131
131
  <img src="/images/cameraAccess/en.png" style="height:50vh">
132
132
  </div>
package/front/src/components/MediaSettingsButton.vue CHANGED
@@ -1,9 +1,9 @@
1
1
  <template>
2
2
  <div>
3
3
  <OverlayPanel ref="mediaSettingsOverlay">
4
- <div class="flex flex-column gap-2 pt-2 justify-content-around" style="min-width: 20rem; max-width: 90vw">
4
+ <div class="flex flex-col gap-2 pt-2 justify-around" style="min-width: 20rem; max-width: 90vw">
5
5
  <div v-if="audioInputRequest !== 'none' && audioInputs.length > 0"
6
- class="flex flex-column align-items-stretch flex-grow-1">
6
+ class="flex flex-col items-stretch grow">
7
7
  <div class="text-sm mb-1 pl-1">Microphone</div>
8
8
  <Dropdown :modelValue="model.audioInput"
9
9
  @update:modelValue="value => updateAudioInput(value)"
@@ -11,10 +11,10 @@
11
11
  optionLabel="label"
12
12
  placeholder="Select">
13
13
  <template #value="slotProps">
14
- <div class="flex flex-row align-items-center">
14
+ <div class="flex flex-row items-center">
15
15
  <i class="pi pi-microphone mr-2" />
16
16
  &nbsp;
17
- <div class="absolute overflow-hidden text-overflow-ellipsis" style="left: 2em; right: 2em;">
17
+ <div class="absolute overflow-hidden text-ellipsis" style="left: 2em; right: 2em;">
18
18
  {{ slotProps.value ? slotProps.value.label : slotProps.placeholder }}
19
19
  </div>
20
20
  </div>
@@ -22,17 +22,17 @@
22
22
  </Dropdown>
23
23
  </div>
24
24
  <div v-if="audioOutputRequest !== 'none' && audioOutputs.length > 0"
25
- class="flex flex-column align-items-stretch flex-grow-1">
25
+ class="flex flex-col items-stretch grow">
26
26
  <div class="text-sm mb-1 pl-1">Audio output</div>
27
27
  <Dropdown :modelValue="model.audioOutput"
28
28
  @update:modelValue="value => updateAudioOutput(value)"
29
29
  :options="audioOutputs" optionLabel="label"
30
30
  placeholder="Select">
31
31
  <template #value="slotProps">
32
- <div class="flex flex-row align-items-center">
32
+ <div class="flex flex-row items-center">
33
33
  <i class="pi pi-volume-up mr-2" />
34
34
  &nbsp;
35
- <div class="absolute overflow-hidden text-overflow-ellipsis" style="left: 2em; right: 2em;">
35
+ <div class="absolute overflow-hidden text-ellipsis" style="left: 2em; right: 2em;">
36
36
  {{ slotProps.value ? slotProps.value.label : slotProps.placeholder }}
37
37
  </div>
38
38
  </div>
@@ -41,17 +41,17 @@
41
41
  </div>
42
42
 
43
43
  <div v-if="videoInputRequest !== 'none' && videoInputs.length > 0"
44
- class="flex flex-column align-items-stretch flex-grow-1">
44
+ class="flex flex-col items-stretch grow">
45
45
  <div class="text-sm mb-1 pl-1">Camera</div>
46
46
  <Dropdown :modelValue="model.videoInput"
47
47
  @update:modelValue="value => updateVideoInput(value)"
48
48
  :options="videoInputs" optionLabel="label"
49
49
  placeholder="Select">
50
50
  <template #value="slotProps">
51
- <div class="flex flex-row align-items-center">
51
+ <div class="flex flex-row items-center">
52
52
  <i class="pi pi-camera mr-2" />
53
53
  &nbsp;
54
- <div class="absolute overflow-hidden text-overflow-ellipsis" style="left: 2em; right: 2em;">
54
+ <div class="absolute overflow-hidden text-ellipsis" style="left: 2em; right: 2em;">
55
55
  {{ slotProps.value ? slotProps.value.label : slotProps.placeholder }}
56
56
  </div>
57
57
  </div>
package/front/src/components/PermissionsDialog.vue CHANGED
@@ -1,7 +1,7 @@
1
1
  <template>
2
2
  <Dialog header="Permissions" v-model:visible="model.visible" modal>
3
3
  <template #header>
4
- <div class="flex flex-row align-items-center">
4
+ <div class="flex flex-row items-center">
5
5
  <i class="pi pi-unlock mr-2" />
6
6
  <h3>{{ title }}</h3>
7
7
  </div>
@@ -10,7 +10,7 @@
10
10
  <slot name="introduction" />
11
11
  <div class="mt-2">
12
12
  <div v-for="permission in Object.entries(model.permissions ?? {})"
13
- class="flex flex-row align-items-center mb-2">
13
+ class="flex flex-row items-center mb-2">
14
14
  <i :class="permissionIcons[permission[0]]" />
15
15
  <div class="ml-2">{{ permission[0] }}: </div>
16
16
  <div v-if="permission[1] === 'granted'" class="ml-1 font-semibold text-green-400">
package/front/src/components/VolumeIndicator.vue CHANGED
@@ -1,9 +1,9 @@
1
1
  <template>
2
2
  <div class="flex flex-row border-circle w-2rem h-2rem bg-primary-800
3
3
  align-items-center justify-content-center">
4
- <div class="volume-indicator-bar bg-white border-round" ref="low"></div>
5
- <div class="volume-indicator-bar bg-white border-round" ref="mid"></div>
6
- <div class="volume-indicator-bar bg-white border-round" ref="high"></div>
4
+ <div class="volume-indicator-bar bg-white rounded-border" ref="low"></div>
5
+ <div class="volume-indicator-bar bg-white rounded-border" ref="mid"></div>
6
+ <div class="volume-indicator-bar bg-white rounded-border" ref="high"></div>
7
7
  </div>
8
8
  </template>
9
9
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@live-change/peer-connection-frontend",
3
- "version": "0.9.31",
3
+ "version": "0.9.33",
4
4
  "scripts": {
5
5
  "memDev": "dotenvx run -- node server/start.js memDev --enableSessions --initScript ./init.js --dbAccess",
6
6
  "localDevInit": "rm tmp.db; dotenvx run -- node server/start.js localDev --enableSessions --initScript ./init.js",
@@ -22,19 +22,19 @@
22
22
  },
23
23
  "type": "module",
24
24
  "dependencies": {
25
- "@live-change/cli": "^0.9.31",
26
- "@live-change/dao": "^0.9.31",
27
- "@live-change/dao-vue3": "^0.9.31",
28
- "@live-change/dao-websocket": "^0.9.31",
29
- "@live-change/framework": "^0.9.31",
30
- "@live-change/password-authentication-service": "^0.9.31",
31
- "@live-change/secret-code-service": "^0.9.31",
32
- "@live-change/secret-link-service": "^0.9.31",
33
- "@live-change/session-service": "^0.9.31",
34
- "@live-change/user-frontend": "^0.9.31",
35
- "@live-change/user-service": "^0.9.31",
36
- "@live-change/vue3-components": "^0.9.31",
37
- "@live-change/vue3-ssr": "^0.9.31",
25
+ "@live-change/cli": "^0.9.33",
26
+ "@live-change/dao": "^0.9.33",
27
+ "@live-change/dao-vue3": "^0.9.33",
28
+ "@live-change/dao-websocket": "^0.9.33",
29
+ "@live-change/framework": "^0.9.33",
30
+ "@live-change/password-authentication-service": "^0.9.33",
31
+ "@live-change/secret-code-service": "^0.9.33",
32
+ "@live-change/secret-link-service": "^0.9.33",
33
+ "@live-change/session-service": "^0.9.33",
34
+ "@live-change/user-frontend": "^0.9.33",
35
+ "@live-change/user-service": "^0.9.33",
36
+ "@live-change/vue3-components": "^0.9.33",
37
+ "@live-change/vue3-ssr": "^0.9.33",
38
38
  "@vueuse/core": "^12.3.0",
39
39
  "boxicons": "^2.1.4",
40
40
  "codeceptjs-assert": "^0.0.5",
@@ -44,7 +44,7 @@
44
44
  "get-port-sync": "1.0.1",
45
45
  "primeflex": "^3.3.1",
46
46
  "primeicons": "^7.0.0",
47
- "primevue": "^3.52.0",
47
+ "primevue": "^4.2.5",
48
48
  "rollup-plugin-node-builtins": "^2.1.2",
49
49
  "rollup-plugin-visualizer": "5.14.0",
50
50
  "serialize-javascript": "^6.0.2",
@@ -54,7 +54,7 @@
54
54
  "vue3-scroll-border": "0.1.6"
55
55
  },
56
56
  "devDependencies": {
57
- "@live-change/codeceptjs-helper": "^0.9.31",
57
+ "@live-change/codeceptjs-helper": "^0.9.33",
58
58
  "codeceptjs": "^3.6.10",
59
59
  "generate-password": "1.7.1",
60
60
  "playwright": "1.49.1",
@@ -65,5 +65,5 @@
65
65
  "author": "Michał Łaszczewski <michal@laszczewski.pl>",
66
66
  "license": "BSD-3-Clause",
67
67
  "description": "",
68
- "gitHead": "4e12be9d3f339492bb9ddc3c6c77581e52d1ba60"
68
+ "gitHead": "c6eaa7764dc12b9489b74386b1227b71d0640e09"
69
69
  }