jeawin-astro 3.0.38 → 3.0.40

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "jeawin-astro",
-    "version": "3.0.38",
+    "version": "3.0.40",
     "author": "chaegumi <chaegumi@qq.com>",
     "description": "",
     "license": "MIT",

package/src/components/detail_images.astro

@@ -15,6 +15,7 @@ import Youtube from "./youtube.astro";
 import Vimeo from "./vimeo.astro";
 import { img_add_link, render_value,img_change_attrs } from "../scripts/util.js";
 import view360img from "../assets/images/360_view.svg";
+import IframeVideo from "./iframe_video.astro";
 
 type JWVIDEO = {
   poster: string; // 图片
@@ -40,6 +41,12 @@ const { node_title, nodepics = [], video, view360 } = Astro.props;
     x-data={`{
       isVideoPoppedUp:false,
       closeVideo(){
+        if(this.$refs.video){
+          const iframe = this.$refs.video.querySelector('iframe');
+          if(iframe){
+            iframe.src = iframe.src;
+          }
+        }
         this.isVideoPoppedUp = false;
       },
       openVideo(){
@@ -150,7 +157,7 @@ const { node_title, nodepics = [], video, view360 } = Astro.props;
         </swiper-container>
         {
           video ? (
-            <div
+            <div x-ref="video" 
               x-bind:class="{ 'flex': isVideoPoppedUp, 'hidden': !isVideoPoppedUp }"
               class="fixed inset-0 w-full h-full flex items-center justify-center hidden z-10"
             >
@@ -186,17 +193,7 @@ const { node_title, nodepics = [], video, view360 } = Astro.props;
                             ) : video.platform == 'vimeo' ? (
                               <Vimeo id={render_value(video, 'id')} />
                             ) : (
-                              <iframe
-                                x-ref="video"
-                                width="560"
-                                height="315"
-                                src={video.id}
-                                title="video player"
-                                frameborder="0"
-                                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-                                referrerpolicy="strict-origin-when-cross-origin"
-                                allowfullscreen>
-                              </iframe>
+                              <IframeVideo id={render_value(video, 'id')} />
                             )
                           }                          
                         </Fragment>
@@ -206,7 +203,7 @@ const { node_title, nodepics = [], video, view360 } = Astro.props;
                   ) : video.type == 'code' ? (
                     <Fragment set:html={video.code} />
                   ) : (
-                    <video x-ref="video" class="rounded-lg w-full max-w-2xl" controls>
+                    <video class="rounded-lg w-full max-w-2xl" controls>
                       <source src={video.local_url} type="video/mp4" />
                     </video>
                   )

package/src/components/flip_card.astro

@@ -0,0 +1,18 @@
+---
+const {wrapper_class, inner_class} = Astro.props
+---
+<!-- 图片翻转卡片 -->
+<div class:list={["w-full h-full perspective-midrange", wrapper_class]} data-aos="flip-left">
+    <div class:list={["relative !w-full !h-full text-center transition-transform transform-3d duration-700 hover:rotate-y-180", inner_class]}>
+        <div class="absolute w-full h-full backface-hidden flex items-center justify-center">
+            <slot name="flip-card-front-html">
+                <p>正面内容</p>
+            </slot>
+        </div>
+        <div class="absolute w-full h-full backface-hidden flex items-center justify-center rotate-y-180">
+            <slot name="flip-card-back-html">
+               <p>背面内容</p> 
+            </slot>
+        </div>
+    </div>
+</div>

package/src/components/iframe_video.astro

@@ -0,0 +1,21 @@
+---
+import dayjs from 'dayjs';
+const { id, width = 560, height = 315, title = 'Video player' } = Astro.props;
+let url = id;
+
+const currenttime = dayjs().unix();
+---
+
+<div id={`iframe-video-placeholder${currenttime}`} style={`width:${width}px;height:${height}px;`}></div>
+
+<script is:inline define:vars={{currenttime, url: url, width, height, title}}>
+  window.addEventListener('load', function() {
+    let iframe = document.createElement('iframe');
+    iframe.src = url;
+    iframe.width = width;
+    iframe.height = height;
+    iframe.title = title;
+    iframe.allowFullscreen = true;
+    document.getElementById(`iframe-video-placeholder${currenttime}`).appendChild(iframe);
+  });
+</script>

package/src/components/index.ts

@@ -57,7 +57,9 @@ export {default as Tabs} from "./tabs.astro";
 export {default as TagsCategoryList} from "./tags_category_list.astro";
 export {default as Vimeo} from "./vimeo.astro";
 export {default as Youtube} from "./youtube.astro";
+export {default as IframeVideo} from "./iframe_video.astro";
 export {default as Chatbot} from "./chatbot.astro";
+export {default as FlipCard} from "./flip_card.astro";
 
 export * from "./bgs/index.ts";
 export * from "./blocks/index.ts";

package/src/components/vimeo.astro

@@ -1,5 +1,6 @@
 ---
-const { id } = Astro.props;
+import dayjs from 'dayjs';
+const { id, width = 640, height = 360, title = 'Vimeo player' } = Astro.props;
 let url = "";
 if (id.indexOf("https") !== -1) {
   // 是url形式
@@ -8,12 +9,18 @@ if (id.indexOf("https") !== -1) {
   // 是id形式
   url = `https://player.vimeo.com/video/${id}`;
 }
+const currenttime = dayjs().unix();
 ---
+<div id={`vimeo-placeholder${currenttime}`} style={`width:${width}px;height:${height}px;`}></div>
 
-<iframe
-  title="vimeo-player"
-  src={url}
-  width="640"
-  height="360"
-  frameborder="0"
-  allowfullscreen></iframe>
+<script is:inline define:vars={{currenttime, url: url, width, height, title}}>
+  window.addEventListener('load', function() {
+    let iframe = document.createElement('iframe');
+    iframe.src = url;
+    iframe.width = width;
+    iframe.height = height;
+    iframe.title = title;
+    iframe.allowFullscreen = true;
+    document.getElementById(`vimeo-placeholder${currenttime}`).appendChild(iframe);
+  });
+</script>

package/src/components/youtube.astro

@@ -1,5 +1,6 @@
 ---
-const { id } = Astro.props;
+import dayjs from 'dayjs';
+const { id, width = 560, height = 315, title = 'Youtube video player' } = Astro.props;
 let url = "";
 if (id.indexOf("https") !== -1) {
   // 是url形式
@@ -8,14 +9,20 @@ if (id.indexOf("https") !== -1) {
   // 是id形式
   url = `https://www.youtube.com/embed/${id}`;
 }
+
+const currenttime = dayjs().unix();
 ---
 
-<iframe
-  width="560"
-  height="315"
-  src={url}
-  title="YouTube video player"
-  frameborder="0"
-  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-  referrerpolicy="strict-origin-when-cross-origin"
-  allowfullscreen></iframe>
+<div id={`youtube-placeholder${currenttime}`} style={`width:${width}px;height:${height}px;`}></div>
+
+<script is:inline define:vars={{currenttime, url: url, width, height, title}}>
+  window.addEventListener('load', function() {
+    let iframe = document.createElement('iframe');
+    iframe.src = url;
+    iframe.width = width;
+    iframe.height = height;
+    iframe.title = title;
+    iframe.allowFullscreen = true;
+    document.getElementById(`youtube-placeholder${currenttime}`).appendChild(iframe);
+  });
+</script>