Skip to content

Commit e3ce243

Browse files
akolsonakolson
authored
Merge pull request #5351 from akolson/fix-klogo-regression
Fixes the KLogo display in preview window
2 parents d800cfa + 1724d04 commit e3ce243

1 file changed

Lines changed: 138 additions & 112 deletions

File tree

‎contentcuration/contentcuration/frontend/channelEdit/views/files/ContentRenderer.vue‎

Lines changed: 138 additions & 112 deletions
Original file line numberDiff line numberDiff line change
@@ -4,131 +4,142 @@
44
:key="fileId"
55
:class="{ fullscreen }"
66
>
7-
<KLogo
8-
v-if="loading"
9-
altText=""
10-
:animate="true"
11-
:size="300"
12-
/>
13-
<VCard
14-
v-if="!file"
15-
flat
16-
class="message-card"
17-
>
18-
<VLayout
19-
align-center
20-
justify-center
21-
fill-height
22-
>
23-
{{ $tr('noFileText') }}
24-
</VLayout>
25-
</VCard>
26-
<VCard
27-
v-else-if="file.uploading || file.error"
28-
flat
29-
class="message-card"
7+
<div
8+
class="renderer"
9+
:aria-busy="loading"
3010
>
31-
<VLayout
32-
align-center
33-
justify-center
34-
fill-height
35-
data-test="progress"
11+
<div
12+
v-show="loading"
13+
class="overlay"
14+
:style="{ background: $themePalette.white }"
3615
>
37-
<FileStatus
38-
:fileId="file.id"
39-
large
16+
<KLogo
17+
altText=""
18+
:animate="true"
19+
:size="300"
4020
/>
41-
</VLayout>
42-
</VCard>
43-
<VFlex v-else-if="isVideo">
44-
<video
45-
controls
46-
preload="metadata"
47-
controlsList="nodownload"
48-
crossOrigin
49-
@loadeddata="loading = false"
21+
</div>
22+
23+
<VCard
24+
v-if="!file"
25+
flat
26+
class="message-card"
5027
>
51-
<source
52-
:src="src"
53-
:type="file.mimetype"
54-
>
55-
<track
56-
v-for="subtitle in subtitles"
57-
:key="subtitle.id"
58-
:src="subtitle.url"
59-
kind="subtitles"
60-
:srclang="subtitle.language.id"
61-
:label="subtitle.language.native_name"
28+
<VLayout
29+
align-center
30+
justify-center
31+
fill-height
6232
>
63-
</video>
64-
</VFlex>
65-
<VCard
66-
v-else-if="isAudio"
67-
flat
68-
>
69-
<VLayout
70-
align-center
71-
justify-center
72-
fill-height
33+
{{ $tr('noFileText') }}
34+
</VLayout>
35+
</VCard>
36+
<VCard
37+
v-else-if="file.uploading || file.error"
38+
flat
39+
class="message-card"
7340
>
74-
<audio
41+
<VLayout
42+
align-center
43+
justify-center
44+
fill-height
45+
data-test="progress"
46+
>
47+
<FileStatus
48+
:fileId="file.id"
49+
large
50+
/>
51+
</VLayout>
52+
</VCard>
53+
<VFlex v-else-if="isVideo">
54+
<video
7555
controls
76-
:src="src"
77-
:type="file.mimetype"
56+
preload="metadata"
57+
controlsList="nodownload"
58+
crossOrigin
7859
@loadeddata="loading = false"
79-
></audio>
80-
</VLayout>
81-
</VCard>
82-
<iframe
83-
v-else-if="isHTML"
84-
:src="htmlPath"
85-
sandbox="allow-scripts"
86-
@load="loading = false"
87-
></iframe>
88-
<embed
89-
v-else-if="isPDF"
90-
:src="src"
91-
:type="file.mimetype"
92-
@load="loading = false"
93-
>
94-
<div
95-
v-else-if="isEpub"
96-
class="epub"
97-
>
98-
<EpubRenderer
60+
>
61+
<source
62+
:src="src"
63+
:type="file.mimetype"
64+
>
65+
<track
66+
v-for="subtitle in subtitles"
67+
:key="subtitle.id"
68+
:src="subtitle.url"
69+
kind="subtitles"
70+
:srclang="subtitle.language.id"
71+
:label="subtitle.language.native_name"
72+
>
73+
</video>
74+
</VFlex>
75+
<VCard
76+
v-else-if="isAudio"
77+
flat
78+
>
79+
<VLayout
80+
align-center
81+
justify-center
82+
fill-height
83+
>
84+
<audio
85+
controls
86+
:src="src"
87+
:type="file.mimetype"
88+
@loadeddata="loading = false"
89+
></audio>
90+
</VLayout>
91+
</VCard>
92+
<iframe
93+
v-else-if="isHTML"
94+
:src="htmlPath"
95+
sandbox="allow-scripts"
96+
@load="loading = false"
97+
></iframe>
98+
<embed
99+
v-else-if="isPDF"
99100
:src="src"
101+
:type="file.mimetype"
100102
@load="loading = false"
101-
/>
102-
</div>
103+
>
104+
<div
105+
v-else-if="isEpub"
106+
class="epub"
107+
>
108+
<EpubRenderer
109+
:src="src"
110+
@load="loading = false"
111+
/>
112+
</div>
103113

104-
<VCard
105-
v-else
106-
class="message-card"
107-
flat
108-
>
109-
<VLayout
110-
align-center
111-
justify-center
112-
fill-height
113-
data-test="not-supported"
114+
<VCard
115+
v-else
116+
class="message-card"
117+
flat
114118
>
115-
<VTooltip
116-
bottom
117-
lazy
119+
<VLayout
120+
align-center
121+
justify-center
122+
fill-height
123+
data-test="not-supported"
118124
>
119-
<template #activator="{ on }">
120-
<VIconWrapper
121-
color="grey lighten-2"
122-
large
123-
v-on="on"
124-
>
125-
visibility_off
126-
</VIconWrapper>
127-
</template>
128-
<span>{{ $tr('previewNotSupported') }}</span>
129-
</VTooltip>
130-
</VLayout>
131-
</VCard>
125+
<VTooltip
126+
bottom
127+
lazy
128+
>
129+
<template #activator="{ on }">
130+
<VIconWrapper
131+
color="grey lighten-2"
132+
large
133+
v-on="on"
134+
>
135+
visibility_off
136+
</VIconWrapper>
137+
</template>
138+
<span>{{ $tr('previewNotSupported') }}</span>
139+
</VTooltip>
140+
</VLayout>
141+
</VCard>
142+
</div>
132143
</VLayout>
133144

134145
</template>
@@ -231,6 +242,21 @@
231242
232243
$max-height: calc(100vh - 96px);
233244
245+
.renderer {
246+
position: relative;
247+
width: 100%;
248+
}
249+
250+
.overlay {
251+
position: absolute;
252+
inset: 0;
253+
z-index: 2;
254+
display: flex;
255+
align-items: center;
256+
justify-content: center;
257+
width: 100%;
258+
}
259+
234260
.v-card,
235261
video,
236262
audio,

0 commit comments

Comments
 (0)