beenull/ente
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

consistent classNames

Browse source
This commit is contained in:
Abhinav 2022-03-17 11:13:34 +05:30
parent 67ee9506b4
commit 64e305389c
2 changed files with 40 additions and 54 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
src/components/PhotoFrame.tsx
View file

@ -259,7 +259,7 @@ const PhotoFrame = ({
};
if (file.metadata.fileType === FILE_TYPE.VIDEO && !file.html) {
file.html = `
<div class="video-loading">
<div class="pswp-item-container">
<img src="${url}" />
<div class="spinner-border text-light" role="status">
<span class="sr-only">Loading...</span>
@ -271,7 +271,7 @@ const PhotoFrame = ({
!file.html
) {
file.html = `
<div class="video-loading">
<div class="pswp-item-container">
<img src="${url}" />
<div class="spinner-border text-light" role="status">
<span class="sr-only">Loading...</span>
@ -282,7 +282,11 @@ const PhotoFrame = ({
file.metadata.fileType === FILE_TYPE.IMAGE &&
!file.src
) {
file.src = url;
file.html = `
<div class="pswp-item-container">
<img src="${url}" />
</div>
`;
}
return file;
};
@ -312,11 +316,11 @@ const PhotoFrame = ({
`;
} else {
file.html = `
<div class="video-loading">
<div class="pswp-item-container">
<img src="${file.msrc}" />
<div class="download-message" >
<div class="download-banner" >
${constants.VIDEO_PLAYBACK_FAILED_DOWNLOAD_INSTEAD}
<a class="btn btn-outline-success" href=${videoURL} download="${file.metadata.title}"">Download</button>
<a class="btn btn-outline-success" href=${videoURL} download="${file.metadata.title}"">Download</a>
</div>
</div>
`;
@ -324,7 +328,7 @@ const PhotoFrame = ({
} else if (file.metadata.fileType === FILE_TYPE.LIVE_PHOTO) {
if (isPlayable) {
file.html = `
<div class = 'live-photo-container'>
<div class = 'pswp-item-container'>
<img id = "live-photo-image-${file.id}" src="${imageURL}" />
<video id = "live-photo-video-${file.id}" loop muted>
<source src="${videoURL}" />
@ -334,9 +338,9 @@ const PhotoFrame = ({
`;
} else {
file.html = `
<div class="video-loading">
<div class="pswp-item-container">
<img src="${file.msrc}" />
<div class="download-message">
<div class="download-banner">
${constants.VIDEO_PLAYBACK_FAILED_DOWNLOAD_INSTEAD}
<button class = "btn btn-outline-success" id = "download-btn-${file.id}">Download</button>
</div>
@ -344,7 +348,11 @@ const PhotoFrame = ({
`;
}
} else {
file.src = imageURL;
file.html = `
<div class="pswp-item-container">
<img src="${imageURL}" />
</div>
`;
}
return file;
};

60
src/pages/_app.tsx
View file

@ -69,59 +69,36 @@ const GlobalStyles = createGlobalStyle`
height: 100%;
}
.live-photo-container{
.pswp-item-container {
width: 100%;
height: 100%;
position: relative;
display: flex;
align-items: center;
justify-content: center;
object-fit: contain;
}
.live-photo-container > img{
.pswp-item-container > * {
transition: opacity 1s ease;
max-width: 100%;
max-height: 100%;
}
.pswp-item-container > img{
opacity: 1;
max-width: 100%;
max-height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: opacity 1s ease;
}
.live-photo-container > video{
.pswp-item-container > video{
opacity: 0;
max-width: 100%;
max-height: 100%;
}
.pswp-item-container > div.spinner-border {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: opacity 1s ease;
}
.video-loading {
.pswp-item-container > div.download-banner {
position: absolute;
width:100%;
height: 100%;
position: relative;
}
.video-loading > img {
object-fit: contain;
width: 100%;
height: 100%;
}
.video-loading > div.spinner-border {
position: relative;
top: -50vh;
left: 50vw;
}
.video-loading > div.download-message {
position: relative;
top: -60vh;
left: 0;
height: 16vh;
padding:2vh 0;
background-color: #151414;
@ -133,7 +110,8 @@ const GlobalStyles = createGlobalStyle`
opacity: 0.8;
font-size:20px;
}
.download-message > a{
.download-banner > a{
width: 130px;
}