From c8145dba792461da109e620e5ae9f5397dd0ed08 Mon Sep 17 00:00:00 2001
From: atompi <atompi@foxmail.com>
Date: Tue, 7 Mar 2023 20:00:35 +0800
Subject: [PATCH] feat: add local video support

Support single video moment, like WeChat friend cycle.
Just use the `video` key
---
 layouts/partials/after-content-js.html | 5 ++++-
 layouts/partials/head.html             | 6 ++++--
 layouts/partials/row.html              | 9 ++++++++-
 3 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/layouts/partials/after-content-js.html b/layouts/partials/after-content-js.html
index 2892009..b15454c 100644
--- a/layouts/partials/after-content-js.html
+++ b/layouts/partials/after-content-js.html
@@ -14,13 +14,16 @@
 <!-- fancybox -->
 <script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.umd.js"></script>
 
+<!-- videojs -->
+<script src="https://vjs.zencdn.net/8.0.4/video.min.js"></script>
+
 {{/* a pangu support */}}
 {{ if .Site.Params.features.pangu }}
 <!-- pangu.js -->
 <script>
     pangu.spacingElementByClassName('moment-note');
     pangu.spacingElementByClassName('context');
-    
+
     document.addEventListener('DOMContentLoaded', () => {
         // listen to any DOM change and automatically perform spacing via MutationObserver()
         pangu.autoSpacingPage();
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index d298689..96eb0b2 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -1,6 +1,6 @@
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
-{{/* 
+{{/*
     <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> -->
@@ -39,6 +39,9 @@
 <!-- fancybox css (js in the end before the body closing tag) -->
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.css"/>
 
+<!-- videojs -->
+<link href="https://vjs.zencdn.net/8.0.4/video-js.min.css" rel="stylesheet" />
+
 <!-- pure.css -->
 <link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/base-min.css">
 <link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/grids-min.css">
@@ -64,4 +67,3 @@
 
 <!-- website title -->
 <title>{{ .Site.Params.title }}</title>
-
diff --git a/layouts/partials/row.html b/layouts/partials/row.html
index 66b8fd5..a3606b4 100644
--- a/layouts/partials/row.html
+++ b/layouts/partials/row.html
@@ -58,7 +58,7 @@
                     <div class="context heti">
                         {{ .Content }}
                     </div>
-                    
+
                     {{/* add-on info 1: pictures */}}
                     {{/* new pictures API `pictures` (combine single & multiple pictures)*/}}
                     {{ $pictures_set := slice}}
@@ -71,6 +71,13 @@
                         {{ end }}
                     {{ end }}
 
+                    {{ $video_caption := .Plain}}
+                    {{ with .Params.video }}
+                        <a data-src="{{ . }}" data-fancybox="video-gallery" data-caption={{ $video_caption }}>
+                            <video class="video-js" src="{{ . }}"></video>
+                        </a>
+                    {{ end }}
+
                     {{ if (eq (len $pictures_set) 1) }}
                         {{ range $pictures_set }}
                             <img src="{{ . }}" class="single-pic" alt="Responsive image" data-fancybox="gallery" data-caption={{ $picture_caption }}></img>