Update animation, poster video

HOAIAN2 · May 29, 2024 · ba722b1 · ba722b1
1 parent 826b968
commit ba722b1
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 13 deletions.
diff --git a/src/js/main.js b/src/js/main.js
@@ -261,7 +261,7 @@ async function handleDownload() {
 		else saveZip()
 		return
 	}
-	DISPLAY_CONTAINER.classList.remove('hide')
+	requestAnimationFrame(() => { DISPLAY_CONTAINER.classList.remove('hide') })
 	if (option === 'none') return
 	setDownloadState('ready')
 	option === 'post' ? data = await downloadPostPhotos() : data = await downloadStoryPhotos(option)
@@ -285,7 +285,7 @@ function renderMedias(data) {
 		}
 		const ITEM_TEMPLATE =
 			`<div>
-				${item.isVideo ? '<video></video>' : '<img/>'}
+				${item.isVideo ? `<video preload="metadata" poster="${item.thumbnail}"></video>` : '<img/>'}
 				<div class="overlay"></div>
 			</div>`
 		const itemDOM = new DOMParser().parseFromString(ITEM_TEMPLATE, 'text/html').body.firstElementChild

diff --git a/src/js/post.js b/src/js/post.js
@@ -65,6 +65,7 @@ async function downloadPostPhotos() {
 				isVideo: item['media_type'] === 1 ? false : true,
 				id: item.id.split('_')[0]
 			}
+			if (media.isVideo) media.thumbnail = item['image_versions2'].candidates[0]['url']
 			data.media.push(media)
 		})
 	}
@@ -74,6 +75,7 @@ async function downloadPostPhotos() {
 			isVideo: json['media_type'] === 1 ? false : true,
 			id: json.id.split('_')[0]
 		}
+		if (media.isVideo) media.thumbnail = json['image_versions2'].candidates[0]['url']
 		data.media.push(media)
 	}
 	return data

diff --git a/src/js/story.js b/src/js/story.js
@@ -79,6 +79,7 @@ async function downloadStoryPhotos(type = 'stories') {
 			isVideo: item['media_type'] === 1 ? false : true,
 			id: item.id.split('_')[0]
 		}
+		if (media.isVideo) media.thumbnail = item['image_versions2'].candidates[0]['url']
 		data.media.push(media)
 	})
 	return data

diff --git a/src/style/ext-config.css b/src/style/ext-config.css
@@ -6,7 +6,8 @@
 	background: white;
 	border-radius: var(--border-radius-low);
 	z-index: 9999999;
-	box-shadow: 0px 0px 10px rgb(210, 217, 228);
+	/* box-shadow: 0px 0px 10px rgb(210, 217, 228); */
+	border: 1px solid var(--shadow-black);
 }
 
 .ext-config-container.dark {

diff --git a/src/style/style.css b/src/style/style.css
@@ -18,22 +18,24 @@
 
 .display-container {
 	background-color: white;
-	box-shadow: 0px 0px 5px var(--shadow-black);
+	/* box-shadow: 0px 0px 5px var(--shadow-black); */
 	width: calc(80vh /5*3);
 	height: 80vh;
 	max-width: 480px;
 	max-height: 800px;
 	border-radius: var(--border-radius-low);
-	border: none;
+	border: 1px solid var(--shadow-black);
 	outline: none;
 	position: fixed;
 	bottom: 60px;
 	right: 20px;
 	overflow: hidden;
 	user-select: none;
 	-webkit-user-select: none;
-	transition: 0.5s ease;
-	transition-property: transform, transform-origin, opacity;
+	transform-origin: calc() center;
+	transition: transform 0.5s cubic-bezier(0.82, -0.07, 0.25, 1.08), opacity 0.4s ease-in-out, transform-origin 0.5s ease-in-out;
+	/* transition-property: transform, transform-origin, opacity; */
+	will-change: transform, transform-origin, opacity;
 	z-index: 1000000;
 }
 
@@ -43,10 +45,10 @@
 }
 
 .display-container.hide {
-	transform-origin: right bottom;
-	transform: scale(0.1);
+	transform-origin: 85% bottom;
+	transform: scale(0);
 	pointer-events: none;
-	opacity: 0;
+	opacity: 0.6;
 }
 
 .display-container>.title-container {
@@ -59,7 +61,8 @@
 	align-items: center;
 	font-size: min(36px, 3.5vh);
 	font-weight: bold;
-	background-color: rgba(255, 255, 255, 0.95);
+	background-color: rgba(255, 255, 255, 0.9);
+	backdrop-filter: blur(3px);
 	color: black;
 	position: absolute;
 	padding: 5%;
@@ -68,7 +71,7 @@
 }
 
 .display-container>.title-container.dark {
-	background-color: rgba(0, 0, 0, 0.95);
+	background-color: rgba(0, 0, 0, 0.8);
 	color: white;
 }
 
@@ -185,7 +188,7 @@
 	-webkit-user-select: none;
 	cursor: pointer;
 	background-color: var(--violet);
-	box-shadow: 0px 0px 3px var(--violet);
+	/* box-shadow: 0px 0px 3px var(--violet); */
 	transition: 0.3s;
 	z-index: 1000000;
 }