Skip to content

Commit c692056

Browse files
FedikFedik
authored
[6.0] Media: allow thumbnail for any file type (joomla#44847)
Hi @Fedik, Thanks for your work on this. I am merging now, so if you could do any documentation needed, that would be great. Thank you to the testers and all who commented
1 parent d3abd97 commit c692056

File tree

7 files changed

+204
-25
lines changed

7 files changed

+204
-25
lines changed

‎administrator/components/com_media/resources/scripts/components/browser/items/audio.vue‎

Lines changed: 37 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,23 @@
77
@keyup.enter="openPreview()"
88
>
99
<div class="media-browser-item-preview">
10-
<div class="file-background">
11-
<div class="file-icon">
10+
<div
11+
class="file-background"
12+
:class="{ 'with-thumbnail': thumbURL }"
13+
>
14+
<img
15+
v-if="thumbURL"
16+
class="image-cropped"
17+
alt=""
18+
:src="thumbURL"
19+
:loading="thumbLoading"
20+
:width="thumbWidth"
21+
:height="thumbHeight"
22+
>
23+
<div
24+
v-if="!thumbURL"
25+
class="file-icon"
26+
>
1227
<span class="fas fa-file-audio" />
1328
</div>
1429
</div>
@@ -51,6 +66,26 @@ export default {
5166
showActions: false,
5267
};
5368
},
69+
computed: {
70+
thumbURL() {
71+
let path = this.item.thumb_path || '';
72+
73+
if (path && this.item.modified_date) {
74+
path = path + (path.includes('?') ? '&' : '?') + this.item.modified_date;
75+
}
76+
77+
return path;
78+
},
79+
thumbWidth() {
80+
return this.item.thumb_width || null;
81+
},
82+
thumbHeight() {
83+
return this.item.thumb_height || null;
84+
},
85+
thumbLoading() {
86+
return this.item.thumb_width ? 'lazy' : null;
87+
},
88+
},
5489
methods: {
5590
/* Hide actions dropdown */
5691
hideActions() {

‎administrator/components/com_media/resources/scripts/components/browser/items/directory.vue‎

Lines changed: 37 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,23 @@
99
@dblclick.stop.prevent="onPreviewDblClick()"
1010
@keyup.enter="onPreviewDblClick()"
1111
>
12-
<div class="file-background">
13-
<div class="folder-icon">
12+
<div
13+
class="file-background"
14+
:class="{ 'with-thumbnail': thumbURL }"
15+
>
16+
<img
17+
v-if="thumbURL"
18+
class="image-cropped"
19+
alt=""
20+
:src="thumbURL"
21+
:loading="thumbLoading"
22+
:width="thumbWidth"
23+
:height="thumbHeight"
24+
>
25+
<div
26+
v-if="!thumbURL"
27+
class="folder-icon"
28+
>
1429
<span class="icon-folder" />
1530
</div>
1631
</div>
@@ -47,6 +62,26 @@ export default {
4762
showActions: false,
4863
};
4964
},
65+
computed: {
66+
thumbURL() {
67+
let path = this.item.thumb_path || '';
68+
69+
if (path && this.item.modified_date) {
70+
path = path + (path.includes('?') ? '&' : '?') + this.item.modified_date;
71+
}
72+
73+
return path;
74+
},
75+
thumbWidth() {
76+
return this.item.thumb_width || null;
77+
},
78+
thumbHeight() {
79+
return this.item.thumb_height || null;
80+
},
81+
thumbLoading() {
82+
return this.item.thumb_width ? 'lazy' : null;
83+
},
84+
},
5085
methods: {
5186
/* Handle the on preview double click event */
5287
onPreviewDblClick() {

‎administrator/components/com_media/resources/scripts/components/browser/items/document.vue‎

Lines changed: 37 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,23 @@
55
@mouseleave="hideActions()"
66
>
77
<div class="media-browser-item-preview">
8-
<div class="file-background">
9-
<div class="file-icon">
8+
<div
9+
class="file-background"
10+
:class="{ 'with-thumbnail': thumbURL }"
11+
>
12+
<img
13+
v-if="thumbURL"
14+
class="image-cropped"
15+
alt=""
16+
:src="thumbURL"
17+
:loading="thumbLoading"
18+
:width="thumbWidth"
19+
:height="thumbHeight"
20+
>
21+
<div
22+
v-if="!thumbURL"
23+
class="file-icon"
24+
>
1025
<span class="fas fa-file" />
1126
</div>
1227
</div>
@@ -54,6 +69,26 @@ export default {
5469
showActions: false,
5570
};
5671
},
72+
computed: {
73+
thumbURL() {
74+
let path = this.item.thumb_path || '';
75+
76+
if (path && this.item.modified_date) {
77+
path = path + (path.includes('?') ? '&' : '?') + this.item.modified_date;
78+
}
79+
80+
return path;
81+
},
82+
thumbWidth() {
83+
return this.item.thumb_width || null;
84+
},
85+
thumbHeight() {
86+
return this.item.thumb_height || null;
87+
},
88+
thumbLoading() {
89+
return this.item.thumb_width ? 'lazy' : null;
90+
},
91+
},
5792
methods: {
5893
/* Hide actions dropdown */
5994
hideActions() {

‎administrator/components/com_media/resources/scripts/components/browser/items/file.vue‎

Lines changed: 37 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,23 @@
44
@mouseleave="hideActions()"
55
>
66
<div class="media-browser-item-preview">
7-
<div class="file-background">
8-
<div class="file-icon">
7+
<div
8+
class="file-background"
9+
:class="{ 'with-thumbnail': thumbURL }"
10+
>
11+
<img
12+
v-if="thumbURL"
13+
class="image-cropped"
14+
alt=""
15+
:src="thumbURL"
16+
:loading="thumbLoading"
17+
:width="thumbWidth"
18+
:height="thumbHeight"
19+
>
20+
<div
21+
v-if="!thumbURL"
22+
class="file-icon"
23+
>
924
<span class="icon-file-alt" />
1025
</div>
1126
</div>
@@ -53,6 +68,26 @@ export default {
5368
showActions: false,
5469
};
5570
},
71+
computed: {
72+
thumbURL() {
73+
let path = this.item.thumb_path || '';
74+
75+
if (path && this.item.modified_date) {
76+
path = path + (path.includes('?') ? '&' : '?') + this.item.modified_date;
77+
}
78+
79+
return path;
80+
},
81+
thumbWidth() {
82+
return this.item.thumb_width || null;
83+
},
84+
thumbHeight() {
85+
return this.item.thumb_height || null;
86+
},
87+
thumbLoading() {
88+
return this.item.thumb_width ? 'lazy' : null;
89+
},
90+
},
5691
methods: {
5792
/* Hide actions dropdown */
5893
hideActions() {

‎administrator/components/com_media/resources/scripts/components/browser/items/image.vue‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -12,17 +12,17 @@
1212
>
1313
<div class="image-background">
1414
<img
15-
v-if="getURL"
15+
v-if="thumbURL"
1616
class="image-cropped"
17-
:src="getURL"
18-
:alt="altTag"
19-
:loading="loading"
20-
:width="width"
21-
:height="height"
17+
:src="thumbURL"
18+
:alt="thumbAlt"
19+
:loading="thumbLoading"
20+
:width="thumbWidth"
21+
:height="thumbHeight"
2222
@load="setSize"
2323
>
2424
<span
25-
v-if="!getURL"
25+
v-if="!thumbURL"
2626
class="icon-eye-slash image-placeholder"
2727
aria-hidden="true"
2828
/>
@@ -71,7 +71,7 @@ export default {
7171
};
7272
},
7373
computed: {
74-
getURL() {
74+
thumbURL() {
7575
if (!this.item.thumb_path) {
7676
return '';
7777
}
@@ -80,16 +80,16 @@ export default {
8080
? `${this.item.thumb_path}?${this.item.modified_date ? new Date(this.item.modified_date).valueOf() : api.mediaVersion}`
8181
: `${this.item.thumb_path}`;
8282
},
83-
width() {
84-
return this.item.width > 0 ? this.item.width : null;
83+
thumbWidth() {
84+
return this.item.thumb_width || this.item.width || null;
8585
},
86-
height() {
87-
return this.item.height > 0 ? this.item.height : null;
86+
thumbHeight() {
87+
return this.item.thumb_height || this.item.height || null;
8888
},
89-
loading() {
90-
return this.item.width > 0 ? 'lazy' : null;
89+
thumbLoading() {
90+
return this.thumbWidth ? 'lazy' : null;
9191
},
92-
altTag() {
92+
thumbAlt() {
9393
return this.item.name;
9494
},
9595
},

‎administrator/components/com_media/resources/scripts/components/browser/items/video.vue‎

Lines changed: 37 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,23 @@
55
@mouseleave="hideActions()"
66
>
77
<div class="media-browser-item-preview">
8-
<div class="file-background">
9-
<div class="file-icon">
8+
<div
9+
class="file-background"
10+
:class="{ 'with-thumbnail': thumbURL }"
11+
>
12+
<img
13+
v-if="thumbURL"
14+
class="image-cropped"
15+
alt=""
16+
:src="thumbURL"
17+
:loading="thumbLoading"
18+
:width="thumbWidth"
19+
:height="thumbHeight"
20+
>
21+
<div
22+
v-if="!thumbURL"
23+
class="file-icon"
24+
>
1025
<span class="fas fa-file-video" />
1126
</div>
1227
</div>
@@ -49,6 +64,26 @@ export default {
4964
showActions: false,
5065
};
5166
},
67+
computed: {
68+
thumbURL() {
69+
let path = this.item.thumb_path || '';
70+
71+
if (path && this.item.modified_date) {
72+
path = path + (path.includes('?') ? '&' : '?') + this.item.modified_date;
73+
}
74+
75+
return path;
76+
},
77+
thumbWidth() {
78+
return this.item.thumb_width || null;
79+
},
80+
thumbHeight() {
81+
return this.item.thumb_height || null;
82+
},
83+
thumbLoading() {
84+
return this.item.thumb_width ? 'lazy' : null;
85+
},
86+
},
5287
methods: {
5388
/* Hide actions dropdown */
5489
hideActions() {

‎build/media_source/com_media/scss/components/_media-browser.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -254,6 +254,10 @@
254254
background-color: hsl(var(--hue), 20%, 97%);
255255
border: 1px solid hsl(var(--hue), 35%, 95%);
256256
border-radius: $grid-item-border-radius;
257+
258+
&.with-thumbnail {
259+
padding-bottom: 0;
260+
}
257261
}
258262

259263
.file-icon, .folder-icon {

0 commit comments

Comments
 (0)