Add embedded video support

11 files changed, 78 insertions, 18 deletions

diff --git a/README.md b/README.md
index 57bef0a..0ece5ff 100644
--- a/README.md
+++ b/README.md
@@ -2,6 +2,8 @@
 
 This responsive grid theme provides a beautiful layout to showcase your photograghy and manage your gallery with ease.
 
+2021-01-30: Added embedded video support
+
 ## Distinguishing Features
 
 - Easy photo management
@@ -21,7 +23,7 @@ Photo Grid is based on [Hugird](http://themes.gohugo.io/theme/hugrid/), a respon
 
 ## Screenshot
 
-![Hugrid screenshot](https://github.com/Chen-Zhe/photo-grid/blob/master/images/screenshot.png)
+![Photogrid screenshot](https://github.com/Chen-Zhe/photo-grid/blob/master/images/screenshot.jpg)
 
 
 ## Contents
@@ -65,6 +67,15 @@ All photos are stored in the [`photo`](https://github.com/Chen-Zhe/photo-grid/bl
 
 Within [`index.md`](https://github.com/Chen-Zhe/photo-grid/blob/master/exampleSite/content/photo/1-trip1/index.md) file, you can specify each photo's name, description and other properties. Take a look at the descriptions to understand what can be customized.
 
+#### Video Playback
+
+To add a video, simply put its thumbnail in the same way as a regular photo and
+specify `video_embed_link` (refer to  [`index.md`](https://github.com/Chen-Zhe/photo-grid/blob/master/exampleSite/content/photo/1-trip1/index.md), which should be the URL in the `src` attribute of an embedded iframe provided by
+video-sharing sites such as YouTube.
+
+A video icon will appear on the thumbnail in the gallery view and expanding it will reveal the embedded video
+player.
+
 ### Nearly finished
 
 In order to see your site in action, run Hugo's built-in local server. 
diff --git a/assets/icons/video.svg b/assets/icons/video.svg
new file mode 100644
index 0000000..9105e48
--- /dev/null
+++ b/assets/icons/video.svg
@@ -0,0 +1,6 @@
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 485 485" xml:space="preserve">
+<g>
+  <path d="M 439.6 0 L 49.6 0 C 22.2 0 0 22.2 0 49.6 L 0 439.6 C 0 467 22.2 489.2 49.6 489.2 L 439.6 489.2 C 467 489.2 489.2 467 489.2 439.6 L 489.2 49.7 C 489.3 22.3 467 0 439.6 0 Z M 300.6 47.8 L 343.1 47.8 L 343.1 90.3 L 300.6 90.3 L 300.6 47.8 Z M 223.4 47.8 L 265.9 47.8 L 265.9 90.3 L 223.4 90.3 L 223.4 47.8 Z M 146.1 47.8 L 188.6 47.8 L 188.6 90.3 L 146.1 90.3 L 146.1 47.8 Z M 111.3 441.6 L 68.8 441.6 L 68.8 399.1 L 111.3 399.1 L 111.3 441.6 Z M 111.3 90.3 L 68.8 90.3 L 68.8 47.8 L 111.3 47.8 L 111.3 90.3 Z M 188.6 441.6 L 146.1 441.6 L 146.1 399.1 L 188.6 399.1 L 188.6 441.6 Z M 265.8 441.6 L 223.3 441.6 L 223.3 399.1 L 265.8 399.1 L 265.8 441.6 Z M 343.1 441.6 L 300.6 441.6 L 300.6 399.1 L 343.1 399.1 L 343.1 441.6 Z M 168.6 338.9 L 189.4 350.9 C 180.2 356.2 168.6 349.6 168.6 338.9 Z M 420.4 441.6 L 377.9 441.6 L 377.9 399.1 L 420.4 399.1 L 420.4 441.6 Z M 420.4 90.3 L 377.9 90.3 L 377.9 47.8 L 420.4 47.8 L 420.4 90.3 Z" style="fill: rgb(61, 61, 61);"></path>
+  <path d="M 352.479 256.794 L 189.379 350.994 C 180.179 356.294 168.579 349.694 168.579 338.994 L 168.579 150.594 C 168.579 139.894 180.179 133.294 189.379 138.594 L 352.479 232.794 C 361.779 238.094 361.779 251.494 352.479 256.794 Z" style="fill: rgb(245,245,245);"></path>
+</g>
+</svg>
diff --git a/exampleSite/content/photo/1-trip1/index.md b/exampleSite/content/photo/1-trip1/index.md
index 180e0a0..c62facd 100644
--- a/exampleSite/content/photo/1-trip1/index.md
+++ b/exampleSite/content/photo/1-trip1/index.md
@@ -34,6 +34,7 @@ resources:
   name: Square
   params:
     order: 5
-    description: Some description 4.
+    video_embed_link: https://www.youtube.com/embed/ScAM-XXEeHk
+    description: a video
 
 ---
diff --git a/images/screenshot.jpg b/images/screenshot.jpg
new file mode 100644
index 0000000..a049f05
--- /dev/null
+++ b/images/screenshot.jpg
diff --git a/images/screenshot.png b/images/screenshot.png
deleted file mode 100644
index 0e38cab..0000000
--- a/images/screenshot.png
+++ /dev/null
diff --git a/images/tn.png b/images/tn.png
deleted file mode 100644
index ee2efce..0000000
--- a/images/tn.png
+++ /dev/null
diff --git a/layouts/index.html b/layouts/index.html
index 3a41a46..0958352 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -9,14 +9,16 @@
 				{{ partial "header.html" . }}
 			<div class="main">
 				<ul id="og-grid" class="og-grid">
-					{{ range $page := sort (where .Site.RegularPages "Type" "photo") ".File.Dir" }}
-					{{ range $index, $image := sort ($page.Resources.ByType "image") "Params.order" }}
+					{{- range $page := sort (where .Site.RegularPages "Type" "photo") ".File.Dir" }}
+					{{- range $index, $image := sort ($page.Resources.ByType "image") "Params.order" }}
+					{{- $isVideo := isset $image.Params "video_embed_link" }}
 					<li>
-						<a href="{{ if isset $image.Params "button_url" }}{{ $image.Params.button_url }}{{ else }}#{{ end }}" data-largesrc="{{ $image.RelPermalink }}"
+						<a href="{{ if isset $image.Params "button_url" }}{{ $image.Params.button_url }}{{ else }}#{{ end }}" data-largesrc="{{ if $isVideo }}{{ $image.Params.video_embed_link }}{{ else }}{{ $image.RelPermalink }}{{ end }}"
 						data-title="{{ $image.Name }}"
+						data-is-video="{{ $isVideo }}"
 						data-description="{{ $image.Params.description | markdownify }}"
 						{{ if isset $image.Params "button_text" }}data-buttontext="{{ $image.Params.button_text }}"{{ end }} data-collection="{{ $page.Title }}"
-						{{ if not $.Site.Params.no_exif }}
+						{{ if and (not $.Site.Params.no_exif) (not $isVideo) -}}
 						data-exif="{{ if in (slice "jpg" "jpeg" "tiff" "tif") $image.MediaType.SubType }}
 						{{- with $image.Exif -}}
 							{{- with .Tags -}}
@@ -34,12 +36,15 @@
 								<li>Taken at {{ if isset $image.Params "timestamp" }} {{ $image.Params.timestamp }} {{ else }}{{ .Date.Format "2006-1-2 15:04" }}{{ end }}</li>
 							{{- end }}
 							{{- end }}"{{ end }}>
-							{{ $.Scratch.Set "thumbnail" ($image.Resize "x250") }}
+							{{- if $isVideo -}}
+							<span class="video-icon">{{ partial "helper/icon" "video" }}</span>
+							{{- end -}}
+							{{- $.Scratch.Set "thumbnail" ($image.Resize "x250") -}}
 							<img class="lazy" data-src="{{ ($.Scratch.Get "thumbnail").RelPermalink }}" style="width:{{ ($.Scratch.Get "thumbnail").Width }}px;" alt="Thumbnail of {{ $image.Name }}"/>
 						</a>
 					</li>
-					{{ end }}
-					{{ end }}
+					{{- end -}}
+					{{- end -}}
 				</ul>
 				{{ partial "footer.html" . }}
 			</div>
diff --git a/layouts/partials/helper/icon.html b/layouts/partials/helper/icon.html
new file mode 100644
index 0000000..72162e8
--- /dev/null
+++ b/layouts/partials/helper/icon.html
@@ -0,0 +1,6 @@
+{{- $iconFile := resources.GetMatch (printf "icons/%s.svg" .) -}}
+{{- if $iconFile -}}
+    {{- $iconFile.Content | safeHTML -}}
+{{- else -}}
+    {{- errorf "Error: icon '%s.svg' is not found under 'assets/icons' folder" . -}}
+{{- end -}}
\ No newline at end of file
diff --git a/static/css/component.css b/static/css/component.css
index ed9ecf3..bff9219 100644
--- a/static/css/component.css
+++ b/static/css/component.css
@@ -105,12 +105,19 @@
 	text-align: center;
 }
 
-.og-fullimg img {
+.og-fullimg img,
+.og-fullimg iframe {
 	display: inline-block;
 	max-height: 100%;
 	max-width: 100%;
 }
 
+.og-fullimg iframe {
+	border: none;
+	height: 100%;
+	width: 100%;
+}
+
 .og-details h3 {
 	font-weight: 300;
 	font-size: 40px;
diff --git a/static/css/default.css b/static/css/default.css
index 1104b28..afee627 100644
--- a/static/css/default.css
+++ b/static/css/default.css
@@ -77,4 +77,23 @@ img.lazy{
 
 footer {
 	padding: 0.5em;
-}
\ No newline at end of file
+}
+
+span.video-icon svg {
+	z-index: 1;
+	position: absolute;
+	left: 50%;
+	top: 50%;
+	width: 60px;
+	height: 60px;
+	margin-top: -30px;
+	margin-left: -30px;
+	opacity: 86%;
+	transition: 0.2s;
+}
+
+.og-grid li > a:hover span.video-icon svg,
+.og-grid li > a:focus span.video-icon svg{
+	filter: invert(90%) contrast(97%);
+}
+
diff --git a/static/js/main.js b/static/js/main.js
index 124131f..9fdc43e 100644
--- a/static/js/main.js
+++ b/static/js/main.js
@@ -314,7 +314,8 @@ var Grid = (function() {
           description : $itemEl.data( 'description' ),
           exif : $itemEl.data( 'exif' ),
           buttontext : $itemEl.data( 'buttontext' ),
-          collectionName : $itemEl.data( 'collection' )
+          collectionName : $itemEl.data( 'collection' ),
+          isVideo: $itemEl.data( 'is-video' )
         };
 
       this.$title.html( eldata.title );
@@ -345,17 +346,21 @@ var Grid = (function() {
 
       if( self.$fullimage.is( ':visible' ) ) {
         this.$loading.show();
-        $( '<img/>' ).on("load", function() {
-          var $img = $( this );
-          if( $img.attr( 'src' ) === self.$item.children('a').data( 'largesrc' ) ) {
+        if (eldata.isVideo) {
+          // iframe load will only happen when it's appended to page
+          $( '<iframe allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen/>' ).on("load", function() {
+            self.$loading.hide();
+          }).attr( 'src', eldata.largesrc ).fadeIn( 350 ).appendTo(self.$fullimage);
+        } else {
+          $( '<img/>' ).on("load", function() {
+            var $img = $( this );
             self.$loading.hide();
             self.$fullimage.find( 'img' ).remove();
             self.$largeImg = $img.fadeIn( 350 );
             self.$fullimage.append( self.$largeImg );
-          }
-        } ).attr( 'src', eldata.largesrc );
+          }).attr( 'src', eldata.largesrc );
+        }
       }
-
     },
     open : function() {