Skip to content

Commit 6945411

Browse files
antoine92190antoine92190
committed
(refactor) add room-file component
1 parent ea53670 commit 6945411

File tree

6 files changed

+138
-113
lines changed

6 files changed

+138
-113
lines changed

‎src/lib/Room/RoomFile/RoomFile.scss‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
.vac-room-file-container {
2+
display: flex;
3+
position: relative;
4+
margin: 0 4px;
5+
6+
.vac-message-image {
7+
position: relative;
8+
background-color: var(--chat-message-bg-color-image) !important;
9+
background-size: cover !important;
10+
background-position: center center !important;
11+
background-repeat: no-repeat !important;
12+
height: 100px;
13+
width: 100px;
14+
border: var(--chat-border-style-input);
15+
border-radius: 4px;
16+
}
17+
18+
.vac-file-container {
19+
height: 80px;
20+
width: 80px;
21+
}
22+
23+
.vac-icon-remove {
24+
position: absolute;
25+
top: 6px;
26+
left: 6px;
27+
z-index: 10;
28+
29+
svg {
30+
height: 20px;
31+
width: 20px;
32+
border-radius: 50%;
33+
}
34+
35+
&:before {
36+
content: ' ';
37+
position: absolute;
38+
width: 100%;
39+
height: 100%;
40+
background: rgba(0, 0, 0, 0.5);
41+
border-radius: 50%;
42+
z-index: -1;
43+
}
44+
}
45+
}

‎src/lib/Room/RoomFile/RoomFile.vue‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
<template>
2+
<div class="vac-room-file-container">
3+
<div
4+
class="vac-svg-button vac-icon-remove"
5+
@click="$emit('remove-file', index)"
6+
>
7+
<slot name="image-close-icon">
8+
<svg-icon name="close" param="image" />
9+
</slot>
10+
</div>
11+
12+
<div
13+
v-if="isImage"
14+
class="vac-message-image"
15+
:style="{
16+
'background-image': `url('${file.localUrl || file.url}')`
17+
}"
18+
/>
19+
20+
<video v-else-if="isVideo" controls>
21+
<source :src="file.localUrl || file.url" />
22+
</video>
23+
24+
<div v-else class="vac-file-container">
25+
<div>
26+
<slot name="file-icon">
27+
<svg-icon name="file" />
28+
</slot>
29+
</div>
30+
<div class="vac-text-ellipsis">
31+
{{ file.name }}
32+
</div>
33+
<div v-if="file.extension" class="vac-text-ellipsis vac-text-extension">
34+
{{ file.extension }}
35+
</div>
36+
</div>
37+
</div>
38+
</template>
39+
40+
<script>
41+
import SvgIcon from '../../../components/SvgIcon/SvgIcon'
42+
43+
const { isImageFile, isVideoFile } = require('../../../utils/media-file')
44+
45+
export default {
46+
name: 'RoomFiles',
47+
components: {
48+
SvgIcon
49+
},
50+
51+
props: {
52+
file: { type: Object, required: true },
53+
index: { type: Number, required: true }
54+
},
55+
56+
emits: ['remove-file'],
57+
58+
computed: {
59+
isImage() {
60+
return isImageFile(this.file)
61+
},
62+
isVideo() {
63+
return isVideoFile(this.file)
64+
}
65+
}
66+
}
67+
</script>

‎src/lib/Room/RoomFiles/RoomFiles.scss‎

Lines changed: 5 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
.vac-files-container {
1+
.vac-room-files-container {
22
display: flex;
33
align-items: center;
44
padding: 10px 6px 0 6px;
@@ -10,56 +10,10 @@
1010
width: calc(100% - 30px);
1111
}
1212

13-
.vac-media-container {
14-
display: flex;
15-
position: relative;
16-
margin: 0 4px;
17-
18-
.vac-message-image {
19-
position: relative;
20-
background-color: var(--chat-message-bg-color-image) !important;
21-
background-size: cover !important;
22-
background-position: center center !important;
23-
background-repeat: no-repeat !important;
24-
height: 100px;
25-
width: 100px;
26-
border: var(--chat-border-style-input);
27-
border-radius: 4px;
28-
}
29-
30-
video {
31-
height: 100px;
32-
border: var(--chat-border-style-input);
33-
border-radius: 4px;
34-
}
35-
36-
.vac-file-container {
37-
height: 80px;
38-
width: 80px;
39-
}
40-
41-
.vac-icon-remove {
42-
position: absolute;
43-
top: 6px;
44-
left: 6px;
45-
z-index: 10;
46-
47-
svg {
48-
height: 20px;
49-
width: 20px;
50-
border-radius: 50%;
51-
}
52-
53-
&:before {
54-
content: ' ';
55-
position: absolute;
56-
width: 100%;
57-
height: 100%;
58-
background: rgba(0, 0, 0, 0.5);
59-
border-radius: 50%;
60-
z-index: -1;
61-
}
62-
}
13+
video {
14+
height: 100px;
15+
border: var(--chat-border-style-input);
16+
border-radius: 4px;
6317
}
6418

6519
.vac-icon-close {

‎src/lib/Room/RoomFiles/RoomFiles.vue‎

Lines changed: 10 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -2,50 +2,16 @@
22
<transition name="vac-slide-up">
33
<div
44
v-if="files.length"
5-
class="vac-files-container"
5+
class="vac-room-files-container"
66
:style="{ bottom: `${$parent.$refs.roomFooter.clientHeight}px` }"
77
>
88
<div class="vac-files-box">
99
<div v-for="(file, i) in files" :key="i">
10-
<div class="vac-media-container">
11-
<div
12-
class="vac-svg-button vac-icon-remove"
13-
@click="$emit('remove-file', i)"
14-
>
15-
<slot name="image-close-icon">
16-
<svg-icon name="close" param="image" />
17-
</slot>
18-
</div>
19-
20-
<div
21-
v-if="isImageFile(file)"
22-
class="vac-message-image"
23-
:style="{
24-
'background-image': `url('${file.localUrl || file.url}')`
25-
}"
26-
/>
27-
28-
<video v-else-if="isVideoFile(file)" controls>
29-
<source :src="file.localUrl || file.url" />
30-
</video>
31-
32-
<div v-else class="vac-file-container">
33-
<div class="vac-icon-file">
34-
<slot name="file-icon">
35-
<svg-icon name="file" />
36-
</slot>
37-
</div>
38-
<div class="vac-text-ellipsis">
39-
{{ file.name }}
40-
</div>
41-
<div
42-
v-if="file.extension"
43-
class="vac-text-ellipsis vac-text-extension"
44-
>
45-
{{ file.extension }}
46-
</div>
47-
</div>
48-
</div>
10+
<room-file
11+
:file="file"
12+
:index="i"
13+
@remove-file="$emit('remove-file', $event)"
14+
/>
4915
</div>
5016
</div>
5117

@@ -63,27 +29,19 @@
6329
<script>
6430
import SvgIcon from '../../../components/SvgIcon/SvgIcon'
6531
66-
const { isImageFile, isVideoFile } = require('../../../utils/media-file')
32+
import RoomFile from '../RoomFile/RoomFile'
6733
6834
export default {
6935
name: 'RoomFiles',
7036
components: {
71-
SvgIcon
37+
SvgIcon,
38+
RoomFile
7239
},
7340
7441
props: {
7542
files: { type: Array, required: true }
7643
},
7744
78-
emits: ['remove-file', 'reset-message'],
79-
80-
methods: {
81-
isImageFile(file) {
82-
return isImageFile(file)
83-
},
84-
isVideoFile(file) {
85-
return isVideoFile(file)
86-
}
87-
}
45+
emits: ['remove-file', 'reset-message']
8846
}
8947
</script>

‎src/lib/Room/RoomMessageReply/RoomMessageReply.vue‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -25,14 +25,14 @@
2525
</div>
2626
</div>
2727

28-
<img v-if="isImageFile" :src="firstFile.url" class="vac-image-reply" />
28+
<img v-if="isImage" :src="firstFile.url" class="vac-image-reply" />
2929

30-
<video v-else-if="isVideoFile" controls class="vac-image-reply">
30+
<video v-else-if="isVideo" controls class="vac-image-reply">
3131
<source :src="firstFile.url" />
3232
</video>
3333

3434
<audio-player
35-
v-else-if="isAudioFile"
35+
v-else-if="isAudio"
3636
:src="firstFile.url"
3737
class="vac-audio-reply"
3838
>
@@ -42,7 +42,7 @@
4242
</audio-player>
4343

4444
<div v-else-if="isOtherFile" class="vac-image-reply vac-file-container">
45-
<div class="vac-icon-file">
45+
<div>
4646
<slot name="file-icon">
4747
<svg-icon name="file" />
4848
</slot>
@@ -103,21 +103,21 @@ export default {
103103
firstFile() {
104104
return this.messageReply.files ? this.messageReply.files[0] : {}
105105
},
106-
isImageFile() {
106+
isImage() {
107107
return isImageFile(this.firstFile)
108108
},
109-
isVideoFile() {
109+
isVideo() {
110110
return isVideoFile(this.firstFile)
111111
},
112-
isAudioFile() {
112+
isAudio() {
113113
return isAudioFile(this.firstFile)
114114
},
115115
isOtherFile() {
116116
return (
117117
this.messageReply.files &&
118-
!this.isAudioFile &&
119-
!this.isVideoFile &&
120-
!this.isAudioFile
118+
!this.isAudio &&
119+
!this.isVideo &&
120+
!this.isImage
121121
)
122122
}
123123
}

‎src/styles/index.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
@import '../lib/Room/RoomHeader/RoomHeader';
1010
@import '../lib/Room/RoomMessageReply/RoomMessageReply';
1111
@import '../lib/Room/RoomFiles/RoomFiles';
12+
@import '../lib/Room/RoomFile/RoomFile';
1213
@import '../lib/Room/RoomUsersTag/RoomUsersTag';
1314

1415
@import '../lib/RoomsList/RoomsList';

0 commit comments

Comments
 (0)