@dropi/ui 0.1.21 → 0.1.22

package/dist/cjs/dropi-youtube-lazy-video.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-077kM98l.js');
+var index = require('./index-C8kwDvpf.js');
 
 const dropiYoutubeLazyVideoCss = () => `:host{display:block;width:100%}.video-wrapper{position:relative;width:100%;padding-bottom:56.25%;background:var(--Neutral-Black);overflow:hidden;border-radius:12px}.video-wrapper iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:none}.thumbnail{position:absolute;top:0;left:0;width:100%;height:100%;cursor:pointer;display:flex;align-items:center;justify-content:center;overflow:hidden}.thumbnail img{width:100%;height:100%;object-fit:cover;transition:transform 0.3s ease}.thumbnail:hover img{transform:scale(1.05)}.play-button{position:absolute;color:white;border:none;border-radius:50%;width:70px;height:70px;cursor:pointer;transition:background 0.3s ease;background:rgba(14, 17, 26, 0.6);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center}.play-button:hover{background:rgba(0, 0, 0, 0.8)}@media screen and (max-width: 768px){.play-button{width:40px;height:40px}}`;
 
@@ -25,7 +25,7 @@ const DropiYoutubeLazyVideo = class {
         return `https://www.youtube.com/embed/${this.videoId}?autoplay=1&rel=0&modestbranding=1`;
     }
     render() {
-        return (index.h("div", { key: '6279fe0a6bea1280c1f11970acaccefefb1cb217', class: `video-wrapper${this.isPlaying ? ' playing' : ''}` }, !this.isPlaying && (index.h("div", { key: '3a10666782aa544a9a8803eb9971502f9d7d49eb', class: "thumbnail", onClick: () => { this.isPlaying = true; } }, index.h("img", { key: 'c359f64ca794e0c881b4d86815afef5232ec39d1', src: this.thumbnail, alt: `Video thumbnail ${this.videoId}` }), index.h("button", { key: '0e0ece4ad0e4b7f3eefb908eb41e8d115846cf49', class: "play-button", "aria-label": "Reproducir video" }, index.h("dropi-icon", { key: '7303be2f675d2b51f7333889392fb291669210c7', name: "Play", width: "17px", height: "21px", color: "Neutral-White" })))), this.isPlaying && (index.h("iframe", { key: '166b4405676d578959188f0f50c882773f9afe63', src: this.videoUrl, title: this.videoTitle, frameborder: "0", allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture", allowFullScreen: true, loading: "lazy" }))));
+        return (index.h("div", { key: '0732bc87e7be10e422e80751a17527132301eb99', class: `video-wrapper${this.isPlaying ? ' playing' : ''}` }, !this.isPlaying && (index.h("div", { key: '540c46b66da3f67ec45614e0891827b7cc0be4e5', class: "thumbnail", onClick: () => { this.isPlaying = true; } }, index.h("img", { key: '843241c72688ca88ccd5d9391b542501575ea476', src: this.thumbnail, alt: `Video thumbnail ${this.videoId}` }), index.h("button", { key: 'b068f79fb6b2140e1419e9d72a24f6e66eaab69d', class: "play-button", "aria-label": "Reproducir video" }, index.h("dropi-icon", { key: 'ad254e3067ef72e2d97064cd47132cbf5961f06a', name: "Play", width: "17px", height: "21px", color: "Neutral-White" })))), this.isPlaying && (index.h("iframe", { key: '5fd8f89fa322577b49e373710216b731685cb5f5', src: this.videoUrl, title: this.videoTitle, frameborder: "0", allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture", allowFullScreen: true, loading: "lazy" }))));
     }
 };
 DropiYoutubeLazyVideo.style = dropiYoutubeLazyVideoCss();