mirror of
https://github.com/wah-su/wahs.wah.su.git
synced 2025-04-05 15:54:37 +00:00
feat: add video favorite client-side
This commit is contained in:
parent
a0c54cdc0e
commit
1c7e10bb8a
GPG key ID:
858E8EE696525EED
7 changed files with 200 additions and 61 deletions
|
|
@ -34,29 +34,53 @@ function Placeholder() {
|
|||
}
|
||||
|
||||
function PlaceholderVid() {
|
||||
const placeholder = document.createElement("video");
|
||||
placeholder.dataset.type = "placeholder__video";
|
||||
placeholder.controls = true;
|
||||
placeholder.className =
|
||||
const placeholderRoot = document.createElement("div");
|
||||
placeholderRoot.dataset.type = "placeholder__video__container";
|
||||
placeholderRoot.className =
|
||||
"relative aspect-square w-full h-full max-w-48 max-h-48 sm:max-w-none sm:max-h-none rounded-sm";
|
||||
|
||||
const placeholderVid = document.createElement("video");
|
||||
placeholderVid.dataset.type = "placeholder__video";
|
||||
placeholderVid.className =
|
||||
"relative aspect-square w-full h-full rounded-sm [&:not(:fullscreen)]:object-cover";
|
||||
placeholderVid.controls = true;
|
||||
|
||||
const placeholder_loader = document.createElement("div");
|
||||
placeholder_loader.dataset.type = "placeholder__video__loader";
|
||||
placeholder_loader.className =
|
||||
const placeholderVidLoader = document.createElement("div");
|
||||
placeholderVidLoader.dataset.type = "placeholder__video__loader";
|
||||
placeholderVidLoader.className =
|
||||
"w-full h-full absolute inset-0 bg-gray-400 opacity-30 animate-pulse z-[3]";
|
||||
const placeholder_source = document.createElement("source");
|
||||
placeholder.appendChild(placeholder_loader);
|
||||
placeholder.appendChild(placeholder_source);
|
||||
|
||||
return placeholder;
|
||||
const placeholderSrc = document.createElement("source");
|
||||
|
||||
const favoriteButton = document.createElement("button");
|
||||
favoriteButton.dataset.type = "video__fav";
|
||||
favoriteButton.className =
|
||||
"hidden absolute right-2 top-2 w-8 h-8 cursor-pointer";
|
||||
favoriteButton.innerHTML =
|
||||
'<div class="text-[#faebeb] hover:text-orange-500 transition-colors material-symbols--favorite-outline-rounded w-full h-full"></div>';
|
||||
const unfavoriteButton = document.createElement("button");
|
||||
unfavoriteButton.dataset.type = "video__unfav";
|
||||
unfavoriteButton.className =
|
||||
"hidden absolute right-2 top-2 w-8 h-8 cursor-pointer";
|
||||
unfavoriteButton.innerHTML =
|
||||
'<div class="text-[#faebeb] hover:text-orange-500 transition-colors material-symbols--favorite-rounded w-full h-full"></div>';
|
||||
|
||||
|
||||
placeholderVid.appendChild(placeholderVidLoader);
|
||||
placeholderVid.appendChild(placeholderSrc);
|
||||
placeholderRoot.appendChild(placeholderVid);
|
||||
placeholderRoot.appendChild(favoriteButton);
|
||||
placeholderRoot.appendChild(unfavoriteButton);
|
||||
return placeholderRoot;
|
||||
}
|
||||
|
||||
function AllLink(href, title) {
|
||||
const link = document.createElement("a");
|
||||
link.href = href;
|
||||
link.className = "text-[#f9ebeb] hover:bg-orange-600 rounded-sm overflow-hidden transition-colors aspect-square bg-yellow-950 min-w-48 sm:min-w-auto flex items-center justify-center flex-col";
|
||||
link.className =
|
||||
"text-[#f9ebeb] hover:bg-orange-600 rounded-sm overflow-hidden transition-colors aspect-square bg-yellow-950 min-w-48 sm:min-w-auto flex items-center justify-center flex-col";
|
||||
link.innerHTML = `
|
||||
<span class="material-symbols--arrow-forward-rounded w-16 h-16"></span>
|
||||
<p class="text-xl">${title}</p>`
|
||||
return link
|
||||
<p class="text-xl">${title}</p>`;
|
||||
return link;
|
||||
}
|
||||
|
|
@ -29,7 +29,17 @@ async function __tmp_loadFavs() {
|
|||
);
|
||||
}, 250);
|
||||
} else {
|
||||
console.log("video not supported");
|
||||
pl = container.appendChild(PlaceholderVid());
|
||||
setTimeout(() => {
|
||||
renderVideo(
|
||||
config.endpoint,
|
||||
config.bucket,
|
||||
config.prefix,
|
||||
videos[item.vid],
|
||||
item.vid,
|
||||
pl
|
||||
);
|
||||
}, 250);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -28,7 +28,9 @@ async function populateIndex() {
|
|||
}
|
||||
});
|
||||
|
||||
const Videos = document.querySelectorAll('[data-type="placeholder__video"]');
|
||||
const Videos = document.querySelectorAll(
|
||||
'[data-type="placeholder__video__container"]'
|
||||
);
|
||||
const VisibleVideos = [];
|
||||
Videos.forEach((placeholder) => {
|
||||
if (placeholder.checkVisibility()) {
|
||||
|
|
@ -53,6 +55,7 @@ async function populateIndex() {
|
|||
config.bucket,
|
||||
config.prefix,
|
||||
video.src,
|
||||
video.id,
|
||||
VisibleVideos[idx]
|
||||
);
|
||||
});
|
||||
|
|
@ -76,6 +79,17 @@ async function populateIndex() {
|
|||
);
|
||||
}, 250);
|
||||
} else {
|
||||
pl = FavoritesContainer.appendChild(PlaceholderVid());
|
||||
setTimeout(() => {
|
||||
renderVideo(
|
||||
config.endpoint,
|
||||
config.bucket,
|
||||
config.prefix,
|
||||
videos[item.vid],
|
||||
item.vid,
|
||||
pl
|
||||
);
|
||||
}, 250);
|
||||
console.log("video not supported");
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -19,13 +19,15 @@ async function __tmp_loadVideos() {
|
|||
|
||||
videos.slice(start, end).forEach((video, idx) => {
|
||||
container.appendChild(PlaceholderVid());
|
||||
let videos = document.querySelectorAll('[data-type="placeholder__video"]');
|
||||
let videos = document.querySelectorAll('[data-type="placeholder__video__container"]');
|
||||
const vid = Number(start) + Number(idx);
|
||||
setTimeout(() => {
|
||||
renderVideo(
|
||||
config.endpoint,
|
||||
config.bucket,
|
||||
config.prefix,
|
||||
video,
|
||||
vid,
|
||||
videos[idx]
|
||||
);
|
||||
}, 250);
|
||||
|
|
|
|||
|
|
@ -533,6 +533,9 @@
|
|||
.invisible {
|
||||
visibility: hidden;
|
||||
}
|
||||
.visible {
|
||||
visibility: visible;
|
||||
}
|
||||
.absolute {
|
||||
position: absolute;
|
||||
}
|
||||
|
|
@ -587,9 +590,15 @@
|
|||
.z-\[4\] {
|
||||
z-index: 4;
|
||||
}
|
||||
.z-\[10\] {
|
||||
z-index: 10;
|
||||
}
|
||||
.z-\[15\] {
|
||||
z-index: 15;
|
||||
}
|
||||
.z-\[50\] {
|
||||
z-index: 50;
|
||||
}
|
||||
.\[grid-column\:span_2\] {
|
||||
grid-column: span 2;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -50,7 +50,7 @@ function renderImage(endpoint, bucket, prefix, isrc, iid, placeholderRoot) {
|
|||
unfavoriteButton.classList.remove("hidden");
|
||||
});
|
||||
unfavoriteButton.addEventListener("click", () => {
|
||||
removeFavorites(iid);
|
||||
removeFavorites(iid, "image");
|
||||
favoriteButton.classList.remove("hidden");
|
||||
unfavoriteButton.classList.add("hidden");
|
||||
});
|
||||
|
|
@ -61,7 +61,9 @@ function renderImage(endpoint, bucket, prefix, isrc, iid, placeholderRoot) {
|
|||
}
|
||||
|
||||
const view = getView();
|
||||
const container = document.getElementById("images_images") || document.getElementById("favorites_favorites");
|
||||
const container =
|
||||
document.getElementById("images_images") ||
|
||||
document.getElementById("favorites_favorites");
|
||||
|
||||
placeholderImage.appendChild(blurImg);
|
||||
placeholderImage.appendChild(Img);
|
||||
|
|
@ -117,26 +119,59 @@ function renderImage(endpoint, bucket, prefix, isrc, iid, placeholderRoot) {
|
|||
});
|
||||
}
|
||||
|
||||
function renderVideo(endpoint, bucket, prefix, vsrc, placeholder) {
|
||||
const loader = placeholder.querySelector(
|
||||
function renderVideo(endpoint, bucket, prefix, vsrc, vid, placeholderRoot) {
|
||||
const placeholderVid = placeholderRoot.querySelector(
|
||||
'[data-type="placeholder__video"]'
|
||||
);
|
||||
const placeholderVidLoader = placeholderVid.querySelector(
|
||||
'[data-type="placeholder__video__loader"]'
|
||||
);
|
||||
const favoriteButton = placeholderRoot.querySelector(
|
||||
'[data-type="video__fav"]'
|
||||
);
|
||||
const unfavoriteButton = placeholderRoot.querySelector(
|
||||
'[data-type="video__unfav"]'
|
||||
);
|
||||
|
||||
const view = getView();
|
||||
const container = document.getElementById("videos_videos");
|
||||
const container =
|
||||
document.getElementById("videos_videos") ||
|
||||
document.getElementById("favorites_favorites");
|
||||
|
||||
const source = placeholder.querySelector("source");
|
||||
const source = placeholderVid.querySelector("source");
|
||||
const ext = vsrc.split(".")[vsrc.split(".").length - 1];
|
||||
placeholder.src = `${endpoint}/${bucket}/${prefix}/${vsrc}`;
|
||||
placeholder.preload = "metadata";
|
||||
placeholderVid.src = `${endpoint}/${bucket}/${prefix}/${vsrc}`;
|
||||
placeholderVid.preload = "metadata";
|
||||
source.src = `${endpoint}/${bucket}/${prefix}/${vsrc}`;
|
||||
source.type = `video/${ext}`;
|
||||
|
||||
const isFav = getFavorites().find((el) => el.vid == vid) || false;
|
||||
favoriteButton.addEventListener("click", () => {
|
||||
addFavorites(vid, "video");
|
||||
favoriteButton.classList.add("hidden");
|
||||
unfavoriteButton.classList.remove("hidden");
|
||||
});
|
||||
unfavoriteButton.addEventListener("click", () => {
|
||||
removeFavorites(vid, "video");
|
||||
favoriteButton.classList.remove("hidden");
|
||||
unfavoriteButton.classList.add("hidden");
|
||||
});
|
||||
if (!isFav) {
|
||||
favoriteButton.classList.remove("hidden");
|
||||
} else {
|
||||
unfavoriteButton.classList.remove("hidden");
|
||||
}
|
||||
|
||||
if (
|
||||
view == "masonry" &&
|
||||
["/videos", "/videos/", "/videos/index.html"].includes(
|
||||
window.location.pathname
|
||||
)
|
||||
[
|
||||
"/videos",
|
||||
"/videos/",
|
||||
"/videos/index.html",
|
||||
"/favorites",
|
||||
"/favorites/",
|
||||
"/favorites/index.html",
|
||||
].includes(window.location.pathname)
|
||||
) {
|
||||
container.classList.remove(
|
||||
"xl:grid-cols-[repeat(auto-fill,minmax(20%,1fr))]"
|
||||
|
|
@ -144,24 +179,34 @@ function renderVideo(endpoint, bucket, prefix, vsrc, placeholder) {
|
|||
container.classList.add("xl:grid-cols-[repeat(6,minmax(180px,1fr))]");
|
||||
container.classList.add("xl:[grid-auto-flow:_row_dense]");
|
||||
|
||||
placeholder.addEventListener("loadedmetadata", () => {
|
||||
const aspect = getAspectVid(placeholder);
|
||||
placeholderVid.addEventListener("loadedmetadata", () => {
|
||||
const aspect = getAspectVid(placeholderVid);
|
||||
|
||||
if (aspect < 0.95) {
|
||||
placeholder.classList.remove("aspect-square");
|
||||
placeholder.classList.add("aspect-[1/2]");
|
||||
placeholder.classList.add("w-full");
|
||||
placeholder.classList.add("h-full");
|
||||
placeholder.classList.add("[grid-row:span_2]");
|
||||
placeholderVid.classList.remove("aspect-square");
|
||||
placeholderRoot.classList.remove("aspect-square");
|
||||
placeholderVid.classList.add("aspect-[1/2]");
|
||||
placeholderRoot.classList.add("aspect-[1/2]");
|
||||
placeholderVid.classList.add("w-full");
|
||||
placeholderRoot.classList.add("w-full");
|
||||
placeholderVid.classList.add("h-full");
|
||||
placeholderRoot.classList.add("h-full");
|
||||
placeholderVid.classList.add("[grid-row:span_2]");
|
||||
placeholderRoot.classList.add("[grid-row:span_2]");
|
||||
} else if (aspect > 1.05) {
|
||||
placeholder.classList.remove("aspect-square");
|
||||
placeholder.classList.add("aspect-[2/1]");
|
||||
placeholder.classList.add("w-full");
|
||||
placeholder.classList.add("h-full");
|
||||
placeholder.classList.add("[grid-column:span_2]");
|
||||
placeholderVid.classList.remove("aspect-square");
|
||||
placeholderRoot.classList.remove("aspect-square");
|
||||
placeholderVid.classList.add("aspect-[2/1]");
|
||||
placeholderRoot.classList.add("aspect-[2/1]");
|
||||
placeholderVid.classList.add("w-full");
|
||||
placeholderRoot.classList.add("w-full");
|
||||
placeholderVid.classList.add("h-full");
|
||||
placeholderRoot.classList.add("h-full");
|
||||
placeholderVid.classList.add("[grid-column:span_2]");
|
||||
placeholderRoot.classList.add("[grid-column:span_2]");
|
||||
}
|
||||
|
||||
placeholder.removeEventListener("loadedmetadata", this);
|
||||
placeholderVid.removeEventListener("loadedmetadata", this);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -181,16 +226,30 @@ function setFavorites(favs) {
|
|||
|
||||
function addFavorites(iid, type) {
|
||||
const favs = getFavorites();
|
||||
const newFav = {
|
||||
let newFav;
|
||||
if (type == "image") {
|
||||
newFav = {
|
||||
iid,
|
||||
type,
|
||||
};
|
||||
} else {
|
||||
newFav = {
|
||||
vid: iid,
|
||||
type,
|
||||
};
|
||||
}
|
||||
|
||||
const newFavs = [...favs, newFav];
|
||||
setFavorites(newFavs);
|
||||
}
|
||||
|
||||
function removeFavorites(iid) {
|
||||
const idx = getFavorites().findIndex((el) => el.iid == iid);
|
||||
function removeFavorites(iid, type) {
|
||||
let idx;
|
||||
if (type == "image") {
|
||||
idx = getFavorites().findIndex((el) => el.iid == iid);
|
||||
} else {
|
||||
idx = getFavorites().findIndex((el) => el.vid == iid);
|
||||
}
|
||||
const favs = getFavorites();
|
||||
if (idx > -1) {
|
||||
favs.splice(idx, 1);
|
||||
|
|
|
|||
|
|
@ -1,17 +1,38 @@
|
|||
export default function PlaceholderVid(props: { isMobileHidden?: boolean }) {
|
||||
return (
|
||||
<video
|
||||
data-type="placeholder__video"
|
||||
controls={true}
|
||||
className={`relative aspect-square w-full h-full max-w-48 max-h-48 sm:max-w-none sm:max-h-none rounded-sm [&:not(:fullscreen)]:object-cover ${
|
||||
<div
|
||||
data-type="placeholder__video__container"
|
||||
className={`relative aspect-square w-full h-full max-w-48 max-h-48 sm:max-w-none sm:max-h-none rounded-sm ${
|
||||
props.isMobileHidden ? "hidden xl:block" : ""
|
||||
}`}
|
||||
>
|
||||
<video
|
||||
data-type="placeholder__video"
|
||||
className={`w-full h-full absolute inset-0 [&:not(:fullscreen)]:object-cover ${
|
||||
props.isMobileHidden ? "hidden xl:block" : ""
|
||||
}`}
|
||||
controls={true}
|
||||
>
|
||||
<div
|
||||
data-type="placeholder__video__loader"
|
||||
className="w-full h-full absolute inset-0 bg-gray-400 opacity-30 animate-pulse z-[3]"
|
||||
></div>
|
||||
<source className={`${props.isMobileHidden ? "hidden xl:block" : ""}`}></source>
|
||||
<source
|
||||
className={`${props.isMobileHidden ? "hidden xl:block" : ""}`}
|
||||
></source>
|
||||
</video>
|
||||
<button
|
||||
data-type="video__fav"
|
||||
className="hidden absolute right-2 top-2 w-8 h-8 cursor-pointer"
|
||||
>
|
||||
<div className="text-[#faebeb] hover:text-orange-500 transition-colors material-symbols--favorite-outline-rounded w-full h-full"></div>
|
||||
</button>
|
||||
<button
|
||||
data-type="video__unfav"
|
||||
className="hidden absolute right-2 top-2 w-8 h-8 cursor-pointer"
|
||||
>
|
||||
<div className="text-[#faebeb] hover:text-orange-500 transition-colors material-symbols--favorite-rounded w-full h-full"></div>
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue