36 lines
1.7 KiB
HTML
36 lines
1.7 KiB
HTML
{{- $imageRaw := .Get "image" | default (.Get "src") -}}
|
|
{{- $alt := .Get "alt" | default "Live Photo" -}}
|
|
{{- $videoRaw := .Get "video" | default (replaceRE "\\.(avif|webp|jpg|jpeg|png|gif)$" ".mp4" $imageRaw) -}}
|
|
{{- $image := $imageRaw -}}
|
|
{{- $video := $videoRaw -}}
|
|
|
|
{{- if and $imageRaw (not (findRE "^(https?://|/)" $imageRaw)) -}}
|
|
{{- with .Page.Resources.GetMatch $imageRaw -}}
|
|
{{- $image = .RelPermalink -}}
|
|
{{- end -}}
|
|
{{- end -}}
|
|
|
|
{{- if and $videoRaw (not (findRE "^(https?://|/)" $videoRaw)) -}}
|
|
{{- with .Page.Resources.GetMatch $videoRaw -}}
|
|
{{- $video = .RelPermalink -}}
|
|
{{- end -}}
|
|
{{- end -}}
|
|
{{- $style := .Get "style" -}}
|
|
|
|
<div class="live-photo"{{ with $style }}{{ printf " style=%q" (. | safeCSS) | safeHTMLAttr }}{{ end }}>
|
|
<img class="live-photo-poster" src="{{ $image }}" alt="{{ $alt }}" loading="lazy" data-keep="1" no-view>
|
|
<video class="live-photo-video" data-src="{{ $video }}" poster="{{ $image }}" muted playsinline loop preload="metadata" aria-label="{{ $alt }}"></video>
|
|
<div class="live-photo-controls-group">
|
|
<button type="button" class="live-photo-control-btn live-photo-toggle-btn" data-state="static" aria-label="Toggle Live Photo">
|
|
<i class="icon-live" aria-hidden="true"></i>
|
|
<span class="live-photo-live-label">实况</span>
|
|
</button>
|
|
<button type="button" class="live-photo-control-btn live-photo-mute-btn" data-muted="true" aria-label="Toggle Mute">
|
|
<i class="ri-volume-up-line live-photo-mute-icon icon-unmuted" aria-hidden="true"></i>
|
|
<i class="ri-volume-mute-line live-photo-mute-icon icon-muted" aria-hidden="true"></i>
|
|
<span class="live-photo-mute-label">静音</span>
|
|
</button>
|
|
</div>
|
|
<div class="warning" style="opacity: 0;"></div>
|
|
</div>
|