jeawin-astro 3.0.52 → 3.0.53

package/package.json

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

package/src/components/newsletter.astro

@@ -12,7 +12,7 @@ import { render_value, render_lang } from "../scripts/util.js";
 import Input from "./formitem/input.astro";
 const { btn_class, siteinfo, jeawin_form_api_domain, all_langs } = Astro.locals;
 
-const {other_btn_class} = Astro.props;
+const {other_btn_class, max_width = 'max-w-md'} = Astro.props;
 ---
 
 <form
@@ -24,7 +24,7 @@ const {other_btn_class} = Astro.props;
   <input type="hidden" name="site_id" value={siteinfo.id} />
   <input type="hidden" name="captchaId" id="captchaIdSubscribe" value="" />
   <input type="hidden" name="captcha_code" id="captchaCodeSubscribe" value="" />
-  <div class="max-w-md">
+  <div class:list={max_width}>
     <div class="flex flex-wrap gap-2 -mx-2">
       <div class="px-2 grow-[9999] basis-64">
         <Input

package/src/scripts/util.d.ts

@@ -46,3 +46,7 @@ export function render_lang(all_langs: any, key: any): any;
  * 去除内容中的toc
  */
 export function without_toc(content: any): string;
+/**
+ * 显示视频栏目内容
+ */
+export function render_video_content(content: any, picurl: any, node_title: any): string;

package/src/scripts/util.js

@@ -354,4 +354,97 @@ export function without_toc(content){
     $('script')?.remove();
     $('.toc-anchor')?.remove();
     return $.html();
-}
+}
+
+/**
+ * 显示视频栏目内容
+ */
+export function render_video_content(content, picurl, node_title){
+
+    let return_html = '';
+  
+    const $ = cheerio.load(content);
+  
+    const iframes = $('iframe');
+  
+    let hasVideo = false;
+  
+    iframes.each(function(i, elem){
+      const src = $(this).attr('src');
+      // console.log(src);
+      if(src.indexOf('youtube')!== -1 || src.indexOf('vimeo') !== -1){
+        // 是视频
+        hasVideo = true;
+        // 修改元素
+        $(this).wrap(`<div class="video-wrapper">
+    <img src="${picurl}" alt="${node_title}" class="video-poster">
+    <button class="play-button" type="button">▶</button>
+    <iframe src="" data-src="${src}" 
+            allowfullscreen class="video-frame" title="${node_title}" width="100%" height="100%"></iframe>
+  </div>`);
+  
+      }
+    });
+  
+    return_html = $.html();
+    // console.log(return_html);
+  
+    if(hasVideo){
+      // 包含视频
+      return_html += `<style>
+  .video-wrapper {
+    position: relative;
+    width: 100%;
+    max-width: 800px;
+    aspect-ratio: 16/9;
+    margin:0 auto;
+  }
+  
+  .video-poster {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
+  
+  .play-button {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 80px;
+    height: 80px;
+    border-radius: 50%;
+    background: rgba(255, 0, 0, 0.8);
+    border: none;
+    color: white;
+    font-size: 24px;
+    cursor: pointer;
+    z-index: 1;
+  }
+  
+  .video-frame {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    display: none;
+  }
+  </style>
+  
+  <script>
+  document.querySelector('.play-button').addEventListener('click', function() {
+    const wrapper = this.parentElement;
+    const iframe = wrapper.querySelector('.video-frame');
+    const poster = wrapper.querySelector('.video-poster');
+    
+    iframe.src = iframe.dataset.src;
+    iframe.style.display = 'block';
+    poster.style.display = 'none';
+    this.style.display = 'none';
+  });
+  </script>`;
+    }
+  
+    return return_html;
+  }