@fynd-design-engineering/fynd-one-v2 3.3.65 → 3.3.66
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";(()=>{document.addEventListener("DOMContentLoaded",()=>{document.querySelectorAll("[custom-video]").forEach(a=>{let e=a.querySelector("video"),o=a.querySelector("img");if(!e||!o)return;e.muted=!0,e.loop=!0,e.autoplay=!0,e.preload="auto";let t=()=>{o.style.display="none",e.play().catch(()=>{e.muted=!0,e.play().catch(()=>{})}),e.removeEventListener("loadeddata",t)};e.readyState>=2?t():e.addEventListener("loadeddata",t)})});})();
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../bin/live-reload.js", "../../src/global/custom-bg-video.ts"],
|
|
4
|
+
"sourcesContent": ["// Only enable live reload when running on localhost\nif (\n window.location.hostname === \"localhost\" ||\n window.location.hostname === \"127.0.0.1\"\n) {\n new EventSource(`${SERVE_ORIGIN}/esbuild`).addEventListener(\"change\", () =>\n location.reload()\n );\n} else {\n // console.log(\"Live reload disabled: not running on localhost\");\n}\n", "document.addEventListener(\"DOMContentLoaded\", () => {\n const wrappers = document.querySelectorAll<HTMLElement>(\"[custom-video]\");\n\n wrappers.forEach(wrapper => {\n const video = wrapper.querySelector<HTMLVideoElement>(\"video\");\n const img = wrapper.querySelector<HTMLImageElement>(\"img\");\n\n if (!video || !img) return;\n\n video.muted = true;\n video.loop = true;\n video.autoplay = true;\n video.preload = \"auto\"; // plays nicely with <link preload>\n\n const startPlayback = () => {\n img.style.display = \"none\";\n video.play().catch(() => {\n // autoplay might fail on some browsers if not muted early enough\n video.muted = true;\n video.play().catch(() => { });\n });\n video.removeEventListener(\"loadeddata\", startPlayback);\n };\n\n if (video.readyState >= 2) {\n startPlayback();\n } else {\n video.addEventListener(\"loadeddata\", startPlayback);\n }\n });\n});"],
|
|
5
|
+
"mappings": ";;;AACA,MACE,OAAO,SAAS,aAAa,eAC7B,OAAO,SAAS,aAAa,aAC7B;AACA,QAAI,YAAY,GAAG,uBAAY,UAAU,EAAE;AAAA,MAAiB;AAAA,MAAU,MACpE,SAAS,OAAO;AAAA,IAClB;AAAA,EACF,OAAO;AAAA,EAEP;;;ACVA,WAAS,iBAAiB,oBAAoB,MAAM;AAChD,UAAM,WAAW,SAAS,iBAA8B,gBAAgB;AAExE,aAAS,QAAQ,aAAW;AACxB,YAAM,QAAQ,QAAQ,cAAgC,OAAO;AAC7D,YAAM,MAAM,QAAQ,cAAgC,KAAK;AAEzD,UAAI,CAAC,SAAS,CAAC,IAAK;AAEpB,YAAM,QAAQ;AACd,YAAM,OAAO;AACb,YAAM,WAAW;AACjB,YAAM,UAAU;AAEhB,YAAM,gBAAgB,MAAM;AACxB,YAAI,MAAM,UAAU;AACpB,cAAM,KAAK,EAAE,MAAM,MAAM;AAErB,gBAAM,QAAQ;AACd,gBAAM,KAAK,EAAE,MAAM,MAAM;AAAA,UAAE,CAAC;AAAA,QAChC,CAAC;AACD,cAAM,oBAAoB,cAAc,aAAa;AAAA,MACzD;AAEA,UAAI,MAAM,cAAc,GAAG;AACvB,sBAAc;AAAA,MAClB,OAAO;AACH,cAAM,iBAAiB,cAAc,aAAa;AAAA,MACtD;AAAA,IACJ,CAAC;AAAA,EACL,CAAC;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";(()=>{document.addEventListener("DOMContentLoaded",()=>{document.querySelectorAll("[media-card]").forEach(s=>{let e=s.getAttribute("media-card"),n=s.getAttribute("media-card-hover")!=="false";e==="image"?u(s,n):e==="video-on-hover"?f(s,n):e==="video-on-loop"&&p(s,n)})});function u(t,s){let e=t.querySelector("img");e&&(e.style.transition="transform 200ms ease",s&&(t.addEventListener("mouseenter",()=>{e.style.transform="scale(1.05)"}),t.addEventListener("mouseleave",()=>{e.style.transform="scale(1)"})))}function l(t,s=4){return t.play().catch(()=>new Promise((e,o)=>{if(s<=0){o();return}setTimeout(()=>{l(t,s-1).then(e).catch(o)},120)}))}function f(t,s){let e=t.querySelector("video"),o=t.querySelector("img");if(!e||!o||!!!(e.currentSrc||e.src))return;e.muted=!0,e.playsInline=!0,o.style.transition="opacity 200ms ease",e.style.transition="opacity 200ms ease, transform 200ms ease",e.style.transform="scale(1)",e.style.opacity="0",e.style.display="block",o.style.opacity="1";let a=!1,c=!1,i=()=>e.readyState>=HTMLMediaElement.HAVE_FUTURE_DATA,r=()=>{o.style.opacity="0",e.style.opacity="1"},m=()=>{o.style.opacity="1",e.style.opacity="0"},d=()=>{c=!0,a&&(e.loop=!0,l(e).catch(()=>{}))};e.addEventListener("ended",d),s&&(t.addEventListener("mouseenter",()=>{if(a=!0,e.style.transform="scale(1.05)",r(),i())l(e).catch(()=>{});else{let y=()=>{e.removeEventListener("canplay",y),r(),l(e).catch(()=>{})};e.addEventListener("canplay",y,{once:!0}),e.load()}}),t.addEventListener("mouseleave",()=>{a=!1,e.style.transform="scale(1)",e.loop=!1,e.pause(),m()}))}function p(t,s){let e=t.querySelector("video"),o=t.querySelector("img");if(!e||!!!(e.currentSrc||e.src))return;e.muted=!0,e.playsInline=!0,e.loop=!0,o&&(o.style.transition="opacity 200ms ease",o.style.opacity="1"),e.style.transition="opacity 200ms ease, transform 200ms ease",e.style.transform="scale(1)",e.style.opacity="0",e.style.display="block";let a=()=>e.readyState>=HTMLMediaElement.HAVE_FUTURE_DATA,c=()=>{o&&(o.style.opacity="0"),e.style.opacity="1"},i=()=>{c(),l(e).catch(()=>{})};if(a())i();else{let r=()=>{e.removeEventListener("canplay",r),i()};e.addEventListener("canplay",r,{once:!0}),e.load()}s&&(t.addEventListener("mouseenter",()=>{e.style.transform="scale(1.05)"}),t.addEventListener("mouseleave",()=>{e.style.transform="scale(1)"}))}})();
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../bin/live-reload.js", "../../src/global/media-card.ts"],
|
|
4
|
+
"sourcesContent": ["// Only enable live reload when running on localhost\nif (\n window.location.hostname === \"localhost\" ||\n window.location.hostname === \"127.0.0.1\"\n) {\n new EventSource(`${SERVE_ORIGIN}/esbuild`).addEventListener(\"change\", () =>\n location.reload()\n );\n} else {\n // console.log(\"Live reload disabled: not running on localhost\");\n}\n", "document.addEventListener(\"DOMContentLoaded\", () => {\n const cards = document.querySelectorAll<HTMLElement>(\"[media-card]\");\n\n cards.forEach(card => {\n const type = card.getAttribute(\"media-card\");\n const hoverAttr = card.getAttribute(\"media-card-hover\");\n const enableHover = hoverAttr !== \"false\";\n\n if (type === \"image\") {\n setupImageHover(card, enableHover);\n } else if (type === \"video-on-hover\") {\n setupVideoHover(card, enableHover);\n } else if (type === \"video-on-loop\") {\n setupVideoLoop(card, enableHover);\n }\n });\n});\n\nfunction setupImageHover(card: HTMLElement, enableHover: boolean) {\n const img = card.querySelector<HTMLImageElement>(\"img\");\n if (!img) return;\n\n img.style.transition = \"transform 200ms ease\";\n\n if (!enableHover) return;\n\n card.addEventListener(\"mouseenter\", () => {\n img.style.transform = \"scale(1.05)\";\n });\n\n card.addEventListener(\"mouseleave\", () => {\n img.style.transform = \"scale(1)\";\n });\n}\n\n// Retry helper to make play() more reliable\nfunction attemptVideoPlay(video: HTMLVideoElement, retries = 4): Promise<void> {\n return video.play().catch(() => {\n return new Promise<void>((resolve, reject) => {\n if (retries <= 0) {\n reject();\n return;\n }\n\n setTimeout(() => {\n attemptVideoPlay(video, retries - 1).then(resolve).catch(reject);\n }, 120);\n });\n });\n}\n\nfunction setupVideoHover(card: HTMLElement, enableHover: boolean) {\n const video = card.querySelector<HTMLVideoElement>(\"video\");\n const img = card.querySelector<HTMLImageElement>(\"img\");\n if (!video || !img) return;\n\n const hasSrc = Boolean(video.currentSrc || video.src);\n if (!hasSrc) return;\n\n // Help autoplay and mobile behavior\n video.muted = true;\n video.playsInline = true;\n\n img.style.transition = \"opacity 200ms ease\";\n video.style.transition = \"opacity 200ms ease, transform 200ms ease\";\n video.style.transform = \"scale(1)\";\n\n video.style.opacity = \"0\";\n video.style.display = \"block\";\n img.style.opacity = \"1\";\n\n let hovering = false;\n let firstFullPlayDone = false;\n\n const isVideoReady = () =>\n video.readyState >= HTMLMediaElement.HAVE_FUTURE_DATA;\n\n const showVideo = () => {\n img.style.opacity = \"0\";\n video.style.opacity = \"1\";\n };\n\n const showImage = () => {\n img.style.opacity = \"1\";\n video.style.opacity = \"0\";\n };\n\n // After first full play, loop if user is still hovering\n const onEnded = () => {\n firstFullPlayDone = true;\n if (hovering) {\n video.loop = true;\n attemptVideoPlay(video).catch(() => { });\n }\n };\n\n video.addEventListener(\"ended\", onEnded);\n\n if (!enableHover) {\n // No hover behavior at all if disabled\n return;\n }\n\n card.addEventListener(\"mouseenter\", () => {\n hovering = true;\n video.style.transform = \"scale(1.05)\";\n showVideo();\n\n // If already loaded enough, try to play with retries\n if (isVideoReady()) {\n attemptVideoPlay(video).catch(() => { });\n } else {\n const onCanPlay = () => {\n video.removeEventListener(\"canplay\", onCanPlay);\n showVideo();\n attemptVideoPlay(video).catch(() => { });\n };\n\n video.addEventListener(\"canplay\", onCanPlay, { once: true });\n\n // Force loading to start if it has not yet\n video.load();\n }\n });\n\n card.addEventListener(\"mouseleave\", () => {\n hovering = false;\n video.style.transform = \"scale(1)\";\n video.loop = false;\n\n // Pause, but keep currentTime so next hover resumes\n video.pause();\n showImage();\n });\n}\n\nfunction setupVideoLoop(card: HTMLElement, enableHover: boolean) {\n const video = card.querySelector<HTMLVideoElement>(\"video\");\n const img = card.querySelector<HTMLImageElement>(\"img\");\n if (!video) return;\n\n const hasSrc = Boolean(video.currentSrc || video.src);\n if (!hasSrc) return;\n\n video.muted = true;\n video.playsInline = true;\n video.loop = true;\n\n if (img) {\n img.style.transition = \"opacity 200ms ease\";\n img.style.opacity = \"1\";\n }\n\n video.style.transition = \"opacity 200ms ease, transform 200ms ease\";\n video.style.transform = \"scale(1)\";\n video.style.opacity = \"0\";\n video.style.display = \"block\";\n\n const isVideoReady = () =>\n video.readyState >= HTMLMediaElement.HAVE_FUTURE_DATA;\n\n const showVideo = () => {\n if (img) {\n img.style.opacity = \"0\";\n }\n video.style.opacity = \"1\";\n };\n\n const startPlayback = () => {\n showVideo();\n attemptVideoPlay(video).catch(() => { });\n };\n\n if (isVideoReady()) {\n startPlayback();\n } else {\n const onCanPlay = () => {\n video.removeEventListener(\"canplay\", onCanPlay);\n startPlayback();\n };\n\n video.addEventListener(\"canplay\", onCanPlay, { once: true });\n video.load();\n }\n\n // Video still plays on loop; hover only controls scaling\n if (enableHover) {\n card.addEventListener(\"mouseenter\", () => {\n video.style.transform = \"scale(1.05)\";\n });\n\n card.addEventListener(\"mouseleave\", () => {\n video.style.transform = \"scale(1)\";\n });\n }\n}"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/package.json
CHANGED