diff --git a/src/js/main.js b/src/js/main.js index d004587..19cd72e 100644 --- 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 = `
- ${item.isVideo ? '' : ''} + ${item.isVideo ? `` : ''}
` const itemDOM = new DOMParser().parseFromString(ITEM_TEMPLATE, 'text/html').body.firstElementChild diff --git a/src/js/post.js b/src/js/post.js index 49a6a9a..8a88fac 100644 --- 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 index f985e89..1b6d6ff 100644 --- 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 index 0c86e54..2a51dac 100644 --- 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 index 4bb9331..2420c59 100644 --- a/src/style/style.css +++ b/src/style/style.css @@ -18,13 +18,13 @@ .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; @@ -32,8 +32,10 @@ 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; }