zz-shopify-components 0.0.21 → 0.0.22

package/blocks/zz-responsive-width-video.liquid

@@ -1,166 +1,166 @@
-{% schema %}
-{
-  "name": "Responsive Width Video",
-  "class": "responsive-width-video",
-  "settings": [
-    {
-      "type": "header",
-      "content": "PC端设置"
-    },
-    {
-      "type": "text",
-      "id": "video_url_pc",
-      "label": "Video url PC",
-      "info": "使用cdn视频时，填写视频url。防止大屏幕视频模糊"
-    },
-    {
-      "type": "video",
-      "id": "video_pc",
-      "label": "PC端视频"
-    },
-    {
-      "type": "image_picker",
-      "id": "poster_pc",
-      "label": "PC端视频 封面"
-    },
-
-    {
-      "type": "number",
-      "id": "desktop_width_xl",
-      "label": "PC端宽度 大屏xl屏幕",
-      "default": 800,
-      "info": "单位：px"
-    },
-    {
-      "type": "number",
-      "id": "desktop_width_lg",
-      "label": "PC端宽度 中等屏lg屏幕",
-      "default": 600,
-      "info": "单位：px"
-    },
-    {
-      "type": "number",
-      "id": "desktop_border_radius",
-      "label": "PC端圆角",
-      "default": 16,
-      "info": "单位：px"
-    },
-    {
-      "type": "header",
-      "content": "移动端设置"
-    },
-    {
-      "type": "video",
-      "id": "video_mb",
-      "label": "移动端视频"
-    },
-    {
-      "type": "image_picker",
-      "id": "poster_mb",
-      "label": "移动端视频封面"
-    },
-    {
-      "type": "checkbox",
-      "id": "mb_use_padding",
-      "label": "是否使用内边距限制宽度",
-      "default": true
-    },
-    {
-      "type": "number",
-      "id": "mobile_padding_x",
-      "label": "移动端左右内边距",
-      "default": 0,
-      "info": "单位：px",
-      "visible_if": "{{ block.settings.mb_use_padding == true }}"
-    },
-    {
-      "type": "range",
-      "id": "mobile_width",
-      "min": 0,
-      "max": 100,
-      "step": 1,
-      "unit": "%",
-      "label": "移动端占父容器的百分比，单位%",
-      "default": 100,
-      "visible_if": "{{ block.settings.mb_use_padding == false }}"
-    },
-    {
-      "type": "number",
-      "id": "mobile_border_radius",
-      "label": "移动端圆角",
-      "default": 10,
-      "info": "单位：px"
-    },
-   
-  ],
-  "presets": [
-    {
-      "name": "Responsive Width Video"
-    },
-    {
-      "name": "宽度响应式视频",
-     
-    }
-  ]
-}
-{% endschema %}
-
-
-  <div class="content-video-container tw-box-border tw-overflow-hidden">
-    {% if block.settings.video_url_pc != blank %}
-      {% assign pc_video = block.settings.video_url_pc %}
-    {% else %}
-      {% assign pc_video = block.settings.video_pc %}
-    {% endif %}
-    {% render 'zz-video',
-      pc_video: pc_video,
-      pc_poster: block.settings.poster_pc,
-      mb_video: block.settings.video_mb,
-      mb_poster: block.settings.poster_mb,
-      lazy: true,
-      class: 'tw-w-full tw-h-auto',
-      autoplay: true,
-      loop: true,
-      muted: true
-    %}
-   
-  </div>
-
-
-<style>
- 
-  #shopify-block-{{ block.id }} .content-video-container {
-    box-sizing: border-box;
-    overflow: hidden;
-  }
-
-  @media screen and (max-width: 1023px) {
-    #shopify-block-{{ block.id }} {
-      {% if block.settings.mb_use_padding %}
-        width: 100%;
-      {% else %}
-        width: {{ block.settings.mobile_width }}%
-      {% endif %}
-    }
-    #shopify-block-{{ block.id }} .content-video-container {
-      border-radius: {{ block.settings.mobile_border_radius }}px;
-      {% if block.settings.mb_use_padding %}
-        padding: 0 {{ block.settings.mobile_padding_x }}px;
-      {% endif %}
-    }
-  
-  }
-  @media screen and (min-width: 1024px) {
-    #shopify-block-{{ block.id }} .content-video-container {
-      padding: 0px;
-      width: {{ block.settings.desktop_width_lg }}px;
-      border-radius: {{ block.settings.desktop_border_radius }}px;
-    }
-  }
-  @media screen and (min-width: 1280px) {
-    #shopify-block-{{ block.id }} .content-video-container {
-      width: {{ block.settings.desktop_width_xl }}px;
-    }
-  }
-
-</style>
+{% schema %}
+{
+  "name": "Responsive Width Video",
+  "class": "responsive-width-video",
+  "settings": [
+    {
+      "type": "header",
+      "content": "PC端设置"
+    },
+    {
+      "type": "text",
+      "id": "video_url_pc",
+      "label": "Video url PC",
+      "info": "使用cdn视频时，填写视频url。防止大屏幕视频模糊"
+    },
+    {
+      "type": "video",
+      "id": "video_pc",
+      "label": "PC端视频"
+    },
+    {
+      "type": "image_picker",
+      "id": "poster_pc",
+      "label": "PC端视频 封面"
+    },
+
+    {
+      "type": "number",
+      "id": "desktop_width_xl",
+      "label": "PC端宽度 大屏xl屏幕",
+      "default": 800,
+      "info": "单位：px"
+    },
+    {
+      "type": "number",
+      "id": "desktop_width_lg",
+      "label": "PC端宽度 中等屏lg屏幕",
+      "default": 600,
+      "info": "单位：px"
+    },
+    {
+      "type": "number",
+      "id": "desktop_border_radius",
+      "label": "PC端圆角",
+      "default": 16,
+      "info": "单位：px"
+    },
+    {
+      "type": "header",
+      "content": "移动端设置"
+    },
+    {
+      "type": "video",
+      "id": "video_mb",
+      "label": "移动端视频"
+    },
+    {
+      "type": "image_picker",
+      "id": "poster_mb",
+      "label": "移动端视频封面"
+    },
+    {
+      "type": "checkbox",
+      "id": "mb_use_padding",
+      "label": "是否使用内边距限制宽度",
+      "default": true
+    },
+    {
+      "type": "number",
+      "id": "mobile_padding_x",
+      "label": "移动端左右内边距",
+      "default": 0,
+      "info": "单位：px",
+      "visible_if": "{{ block.settings.mb_use_padding == true }}"
+    },
+    {
+      "type": "range",
+      "id": "mobile_width",
+      "min": 0,
+      "max": 100,
+      "step": 1,
+      "unit": "%",
+      "label": "移动端占父容器的百分比，单位%",
+      "default": 100,
+      "visible_if": "{{ block.settings.mb_use_padding == false }}"
+    },
+    {
+      "type": "number",
+      "id": "mobile_border_radius",
+      "label": "移动端圆角",
+      "default": 10,
+      "info": "单位：px"
+    },
+   
+  ],
+  "presets": [
+    {
+      "name": "Responsive Width Video"
+    },
+    {
+      "name": "宽度响应式视频",
+     
+    }
+  ]
+}
+{% endschema %}
+
+
+  <div class="content-video-container tw-box-border tw-overflow-hidden">
+    {% if block.settings.video_url_pc != blank %}
+      {% assign pc_video = block.settings.video_url_pc %}
+    {% else %}
+      {% assign pc_video = block.settings.video_pc %}
+    {% endif %}
+    {% render 'zz-video',
+      pc_video: pc_video,
+      pc_poster: block.settings.poster_pc,
+      mb_video: block.settings.video_mb,
+      mb_poster: block.settings.poster_mb,
+      lazy: true,
+      class: 'tw-w-full tw-h-auto',
+      autoplay: true,
+      loop: true,
+      muted: true
+    %}
+   
+  </div>
+
+
+<style>
+ 
+  #shopify-block-{{ block.id }} .content-video-container {
+    box-sizing: border-box;
+    overflow: hidden;
+  }
+
+  @media screen and (max-width: 1023px) {
+    #shopify-block-{{ block.id }} {
+      {% if block.settings.mb_use_padding %}
+        width: 100%;
+      {% else %}
+        width: {{ block.settings.mobile_width }}%
+      {% endif %}
+    }
+    #shopify-block-{{ block.id }} .content-video-container {
+      border-radius: {{ block.settings.mobile_border_radius }}px;
+      {% if block.settings.mb_use_padding %}
+        padding: 0 {{ block.settings.mobile_padding_x }}px;
+      {% endif %}
+    }
+  
+  }
+  @media screen and (min-width: 1024px) {
+    #shopify-block-{{ block.id }} .content-video-container {
+      padding: 0px;
+      width: {{ block.settings.desktop_width_lg }}px;
+      border-radius: {{ block.settings.desktop_border_radius }}px;
+    }
+  }
+  @media screen and (min-width: 1280px) {
+    #shopify-block-{{ block.id }} .content-video-container {
+      width: {{ block.settings.desktop_width_xl }}px;
+    }
+  }
+
+</style>