Skip to content

Commit 4287ea8

Browse files
IMZCCIMZCC
committed
feat: 增加了显示 Live 图功 shortcodes
1 parent 6b0e4ed commit 4287ea8

2 files changed

Lines changed: 251 additions & 0 deletions

File tree

‎content/posts/30.测试Live.md‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
---
2+
title: '测试Live图'
3+
date: 2025-10-15T21:02:59+08:00
4+
draft: false
5+
slug: live-pic
6+
description: 测试Live
7+
summary:
8+
tags:
9+
- Live 图
10+
categories:
11+
- Live 图
12+
---
13+
<center>
14+
{{< motionPhotos
15+
video="https://list.v4.imzcc.com:65348/d/hi168/img/IMG_4493.mp4"
16+
image="https://list.v4.imzcc.com:65348/d/hi168/img/IMG_4493.jpg"
17+
alt="我的实况照片" >}}
18+
19+
</center>
20+
21+
22+
> 文章来源：https://blog.dejavu.moe/posts/show-live-photos-in-hugo/

‎layouts/shortcodes/motionPhotos.html‎

Lines changed: 229 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,229 @@
1+
<!-- Hugo 根目录路径 layouts/shortcodes/motionPhotos.html -->
2+
{{- $videoSrc := .Get "video" -}}
3+
{{- $imageSrc := .Get "image" -}}
4+
{{- $altText := .Get "alt" | default "Motion Photos" -}}
5+
{{- $uniqueId := now.UnixNano | string | md5 -}}
6+
{{- $imageResource := "" -}}
7+
{{- $localResource := "" -}}
8+
{{- if $imageSrc -}}
9+
{{- if hugo.IsProduction -}}
10+
{{- $localResource = resources.Get $imageSrc -}}
11+
{{- end -}}
12+
{{- if $localResource -}}
13+
{{- $imageResource = $localResource -}}
14+
{{- else -}}
15+
{{- $imageResource = resources.GetRemote $imageSrc -}}
16+
{{- end -}}
17+
{{- end -}}
18+
<div class="live-photo-container" id="mp-{{ $uniqueId }}" {{- with $imageResource -}} {{- if and .Width .Height -}}
19+
style="aspect-ratio: {{ .Width }} / {{ .Height }}; max-width: min(100%, {{ .Width }}px);" {{- else -}}
20+
style="aspect-ratio: 4/3; max-width: min(100%, 700px);" {{- end -}} {{- else -}}
21+
style="aspect-ratio: 4/3; max-width: min(100%, 700px);" {{- end -}}>
22+
<video class="live-photo-video" data-src="{{ $videoSrc }}" poster="{{ $imageSrc }}" muted playsinline loop>
23+
您的浏览器不支持 HTML5 视频。
24+
</video>
25+
<div class="live-photo-controls-group">
26+
<button class="live-photo-control-btn live-photo-toggle-btn" data-state="static"
27+
aria-label="Toggle Motion Photo">
28+
<i class="icon-live"></i><span>LIVE</span>
29+
</button>
30+
<button class="live-photo-control-btn live-photo-mute-btn" data-muted="true" aria-label="Toggle Mute">
31+
<i class="icon-muted"></i>
32+
</button>
33+
</div>
34+
</div>
35+
<script>
36+
document.addEventListener('DOMContentLoaded', function () {
37+
var container = document.getElementById('mp-{{ $uniqueId }}');
38+
if (!container) return;
39+
var video = container.querySelector('.live-photo-video');
40+
var toggleBtn = container.querySelector('.live-photo-toggle-btn');
41+
var muteBtn = container.querySelector('.live-photo-mute-btn');
42+
var playTimeout;
43+
const HOVER_DELAY = 500;
44+
var isManuallyControlled = false;
45+
function updateMuteButtonUI(isMuted) {
46+
muteBtn.setAttribute('data-muted', isMuted.toString());
47+
var icon = muteBtn.querySelector('i');
48+
icon.className = isMuted ? 'icon-muted' : 'icon-unmuted';
49+
}
50+
function updateLiveButtonUI(state) {
51+
var icon = toggleBtn.querySelector('i');
52+
if (state === 'playing') {
53+
icon.className = 'icon-live-playing';
54+
} else {
55+
icon.className = 'icon-live';
56+
}
57+
}
58+
function startVideo(autoUnmute) {
59+
if (toggleBtn.getAttribute('data-state') === 'static') {
60+
if (!video.src) {
61+
video.src = video.getAttribute('data-src');
62+
video.load();
63+
}
64+
video.style.opacity = 1;
65+
if (autoUnmute) {
66+
video.muted = false;
67+
updateMuteButtonUI(false);
68+
}
69+
video.play().catch(e => {
70+
if (e.name !== 'AbortError') { console.error("Video play failed:", e); }
71+
});
72+
toggleBtn.setAttribute('data-state', 'playing');
73+
updateLiveButtonUI('playing');
74+
}
75+
}
76+
function stopVideo() {
77+
if (toggleBtn.getAttribute('data-state') === 'playing') {
78+
video.pause();
79+
video.currentTime = 0;
80+
toggleBtn.setAttribute('data-state', 'static');
81+
if (!video.muted) {
82+
video.muted = true;
83+
updateMuteButtonUI(true);
84+
}
85+
updateLiveButtonUI('static');
86+
}
87+
}
88+
container.addEventListener('mouseenter', function () {
89+
clearTimeout(playTimeout);
90+
if (isManuallyControlled) return;
91+
playTimeout = setTimeout(() => startVideo(true), HOVER_DELAY);
92+
});
93+
container.addEventListener('mouseleave', function () {
94+
clearTimeout(playTimeout);
95+
if (!isManuallyControlled) stopVideo();
96+
});
97+
toggleBtn.addEventListener('click', function (event) {
98+
event.stopPropagation();
99+
var state = toggleBtn.getAttribute('data-state');
100+
if (state === 'static') {
101+
isManuallyControlled = true;
102+
startVideo(true);
103+
} else {
104+
isManuallyControlled = false;
105+
stopVideo();
106+
}
107+
});
108+
muteBtn.addEventListener('click', function (event) {
109+
event.stopPropagation();
110+
video.muted = !video.muted;
111+
updateMuteButtonUI(video.muted);
112+
});
113+
video.addEventListener('ended', function () {
114+
isManuallyControlled = false;
115+
stopVideo();
116+
});
117+
});
118+
</script>
119+
<style>
120+
.live-photo-container {
121+
position: relative;
122+
margin: var(--gap) auto;
123+
overflow: hidden;
124+
border-radius: var(--radius);
125+
cursor: pointer;
126+
background-color: var(--code-block-bg);
127+
max-height: 70vh;
128+
}
129+
130+
.live-photo-video {
131+
position: absolute;
132+
top: 0;
133+
left: 0;
134+
width: 100%;
135+
height: 100%;
136+
display: block;
137+
object-fit: cover;
138+
}
139+
140+
.live-photo-controls-group {
141+
position: absolute;
142+
bottom: 8px;
143+
right: 8px;
144+
display: flex;
145+
align-items: center;
146+
gap: 5px;
147+
}
148+
149+
.live-photo-control-btn {
150+
position: static;
151+
background-color: rgba(0, 0, 0, 0.6);
152+
border: none;
153+
color: white;
154+
cursor: pointer;
155+
transition: background-color 0.2s, opacity 0.2s;
156+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
157+
display: flex;
158+
align-items: center;
159+
justify-content: center;
160+
white-space: nowrap;
161+
}
162+
163+
.live-photo-control-btn:hover {
164+
background-color: rgba(0, 0, 0, 0.8);
165+
}
166+
167+
.live-photo-toggle-btn {
168+
border-radius: 20px;
169+
padding: 5px 9px;
170+
font-size: 0.85em;
171+
}
172+
173+
.live-photo-toggle-btn i.icon-live-playing {
174+
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAB4CAMAAAAOusbgAAAAM1BMVEX///+OjpOOjpOOjpOOjpOOjpOOjpOOjpOOjpOOjpOOjpOOjpOOjpOOjpOOjpOOjpOOjpMym3PHAAAAEXRSTlMAMEAQsP/AIKDggHDQkPBQYHOKyH4AAAUWSURBVHgBYhg6gJEJQgNoMcPsWEEYCguQCKiB/a/2lecp1hgm4sx8v3La1huSG0CdB0C3x3b+vm4AiKYGCX4INTKxBl9mqXKxRlgjrNFao+VbghhMk4OzMLTIBPxwAhsA0LxXGoDqj3KNco2oRttPMNMefBCopN9nl91RW9h9Vn6zSlD5jvDklmQvRk+Lm94W5o+cm3/spGDhh7VG85LMO7qtiAaB0qSSCNAcDXkOtVkdoVnwOW1QBsF3mx2bp8ZIbZt5iIltPx7C4b6xDuMCrXmXfmjOeR+BvMbgRntkp7exox4B1c0D7oaPCZuSPK7wnxV9yuZjwr5bapMQrpBfTLfUfsRcCTELqluELjEJ15CMmNz0JmUFBZbs2Bz19uQS4Qax9Pbw4PQ5Krrsilv6z4asDquVzxrAB5uzQTigwI1kF09w4N2DrRskGyZo0NYZnRwObeKt9rrwdp0jh4d5yk3zBXedqk27TfqzrqEmq99AsHX6XBjrh2+fpflVkWUmJN6Sp7rp7jxuUGGzoSUbnKw7dLba2FF2AWK+d4IVNiAazI1FP2vbzIi6afw03DHXUd1uCBu9WYo1yFyEk36CzaTp6sqru3HWWn8+wVZdV1f27Ky1k0pS+qsRHuZt4N17l4cKzdMYyHs0jIus2BIbn9XC5oFjk8cIENEn+/Juy+zk8DRRC6+qo1cNtoHgDxTsK5vES+cXVtfOv3ByhAsxvyh2kS8azQd0WbC0kBlBBCUT5Uv+dG67ZXUtLTFOIehApWvRwkpp/3bNF/52ClY0YZ9N9BdbQfHBKjOM/c2/Q+gt2QxtOlnX1ZVLpxYyJFu6gEpRnsUoaXGsMUKWhkBB2iC3S63dkspRwVX4Wway0Q0p5xTYUKPsl8ROvXD8qrDzMHYLza66GV8XO7J8cluW5TnJPolwQMvpKk5wELV389RG1dG5slbMPMMBmRfdz2Kl7Ln25GqYCaiwEwO4S3xXlyl7scnLafOj3H19Ar7fw8EifrdvOPnDrw5K7sx943LLZ/l5Oqi8qfIH88QSb5IuLJeGrYj6u90OijnLnw8x3xcOsrC7Ldw+MyIzsSgsV1LuhSI879lxIVW4yML/qjeLHAliGIqGisL3P+2smtyy5F9J2pqsCx0w/OcufnF8rH21F9PscZmpaT7szysCiyuML669nl5rO+kfIPpH5riTMGInYa9fu8XLGs1AQC30GQz2HBLsPZ9j9cJbIKDfJgf0C1IYaukKJW1uRtLWoKTN0Q25JE3lE/ODeTOcmGcmMedKEefCUgRefLFI8cXxxRe+3MS6lC4uNxmu3PT5nvBdYEvTC2yBPLZQFCAx5wFSUrRkb5OSIjMyXY/w8PlpV42y8QazbZEaCr9fyJe5fYE0sH9KA8GZ34ghlYohIt2pLZF/AMELf3N83ijVnfZvL46vbR+kEt/zKAye8Ub5wMAkVtQUG68840rUzFufJCBnB2i4jJeEpHp3S6q/GKkegROOLCRb+hvFIIMTABzj4nAMWypNNCAcg4nK80ck32nulM7KByM00ACRmypFbq52C7nxgYGMfKxjkFHwK7Eqfg+tBMnKOEgGo3PbPgmdw2DBjsGC+nikPhBKPNhQB4S1BCBSgX7xsY9gzlkf7NZH2XF43++imKLXbfcz4H3jYrzXrhCjm9+gYYEGjSUtKWdZ2JJCm3AK14RzAk04Om1H+o1W+NlQ7TMSPh+F8t0sH9Z52kznnTX/ZvwBSmxeg6qlDAUAAAAASUVORK5CYII");
175+
background-size: 16px 16px;
176+
background-repeat: no-repeat;
177+
background-position: center center;
178+
display: inline-block;
179+
width: 16px;
180+
height: 16px;
181+
flex-shrink: 0;
182+
margin-right: 4px;
183+
content: none;
184+
font-size: 0;
185+
}
186+
187+
.live-photo-toggle-btn i.icon-live {
188+
background-image: url("data:image/svg+xml;base64,PHN2ZyB0PSIxNzYwNTM0NDUyMzk4IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjcxOTciIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIj48cGF0aCBkPSJNNDY5LjE4NjkwOSA5MzguMzE3OTI1YTQyLjY1MDgxNSA0Mi42NTA4MTUgMCAwIDEgNDIuMzk0OTEgMzcuNjYwNjdsMC4yNTU5MDUgNS40MTY2NTNhNDIuNjUwODE1IDQyLjY1MDgxNSAwIDAgMS04NS4wMDMwNzQgNC45OTAxNDVMNDI2LjUzNjA5NCA5ODAuOTY4NzRhNDIuNjUwODE1IDQyLjY1MDgxNSAwIDAgMSA0Mi42NTA4MTUtNDIuNjUwODE1ek02OC44MjM3MTEgOC45NTY2NzFsNC4wMDkxNzYgMy41NDAwMTggOTM4LjMxNzkyNiA5MzguMzE3OTI1YTQyLjY1MDgxNSA0Mi42NTA4MTUgMCAwIDEtNTYuMjk5MDc2IDYzLjg0ODI3bC00LjAwOTE3Ni0zLjU0MDAxOC05MzguMzE3OTI2LTkzOC4zMTc5MjVBNDIuNjUwODE1IDQyLjY1MDgxNSAwIDAgMSA2OC44MjM3MTEgOC45NTY2NzF6IG02NDIuNTc3MTc1IDkyNi44MDIyMDVsMS44MzM5ODUgNS4xMTgwOThhNDIuNjUwODE1IDQyLjY1MDgxNSAwIDAgMS04MC4wMTI5MjggMjkuMTczMTU3bC0xLjgzMzk4NS01LjExODA5N2E0Mi42NTA4MTUgNDIuNjUwODE1IDAgMCAxIDgwLjAxMjkyOC0yOS4xNzMxNTh6IG0tMzQ3LjczMjA5My0yMy45MjcxMDdhNDIuNjUwODE1IDQyLjY1MDgxNSAwIDAgMSAyOS43NzAyNjkgNDguMjgwNzIzbC0xLjI3OTUyNCA1LjI0NjA1YTQyLjY1MDgxNSA0Mi42NTA4MTUgMCAwIDEtODIuODcwNTMzLTE5LjYxOTM3NWwxLjI3OTUyNC01LjMzMTM1MmE0Mi42NTA4MTUgNDIuNjUwODE1IDAgMCAxIDUzLjEwMDI2NC0yOC41NzYwNDZ6IG0tMTI3LjY1Mzg4OC03NC42ODE1NzZhNDIuNjUwODE1IDQyLjY1MDgxNSAwIDAgMSAxMS40NzMwNjkgNTUuMjMyODA1bC0zLjE5ODgxMSA0LjgxOTU0MmE0Mi42NTA4MTUgNDIuNjUwODE1IDAgMCAxLTcxLjIyNjg2MS00Ni43MDI2NDJsMy4yNDE0NjItNC44MTk1NDNhNDIuNjUwODE1IDQyLjY1MDgxNSAwIDAgMSA1OS43MTExNDEtOC41MzAxNjJ6IG0tMjMuMDMxNDQtMzY0LjgzNTA3YTQyLjY1MDgxNSA0Mi42NTA4MTUgMCAwIDEgNDMuMTE5OTc0IDQyLjIyNDMwNyAyNTUuNjkxNjM1IDI1NS42OTE2MzUgMCAwIDAgMjUzLjAwNDYzMyAyNTMuMDA0NjMzIDQyLjY1MDgxNSA0Mi42NTA4MTUgMCAwIDEtMC44OTU2NjcgODUuMzAxNjI5IDM0MC45OTMyNjQgMzQwLjk5MzI2NCAwIDAgMS0zMzcuMzY3OTQ1LTMzNy40MTA1OTUgNDIuNjUwODE1IDQyLjY1MDgxNSAwIDAgMSA0Mi4xODE2NTYtNDMuMDc3MzIzeiBtLTcxLjczODY3MSAyNTAuNDg4MjM1YTQyLjY1MDgxNSA0Mi42NTA4MTUgMCAwIDEtNy44NDc3NSA1Ni4xNzExMjNsLTQuMzkzMDMzIDMuMjQxNDYyYTQyLjY1MDgxNSA0Mi42NTA4MTUgMCAwIDEtNTEuMzA4OTMxLTY3Ljk4NTM5OWw0LjM5MzAzNC0zLjI0MTQ2MmE0Mi42NTA4MTUgNDIuNjUwODE1IDAgMCAxIDU5LjE1NjY4IDExLjgxNDI3NnogbTgzNS44NzA2NjgtMTcxLjg4Mjc4M2w1LjM3NDAwMyAwLjgxMDM2NWE0Mi42NTA4MTUgNDIuNjUwODE1IDAgMCAxLTExLjgxNDI3NiA4NC4zMjA2NjFsLTUuMzc0MDAyLTAuNzY3NzE1YTQyLjY1MDgxNSA0Mi42NTA4MTUgMCAwIDEgMTEuODE0Mjc1LTg0LjM2MzMxMXogbS04ODUuMjYwMzExIDM0LjE2MzMwMmE0Mi42NTA4MTUgNDIuNjUwODE1IDAgMCAxLTI4LjYxODY5NyA0OC45MjA0ODVsLTUuMjQ2MDUgMS4zNjQ4MjZhNDIuNjUwODE1IDQyLjY1MDgxNSAwIDAgMS0yMS41ODEzMTItODIuNDAxMzc0bDUuMjQ2MDUtMS4zMjIxNzZhNDIuNjUwODE1IDQyLjY1MDgxNSAwIDAgMSA1MC4yMDAwMDkgMzMuNDM4MjM5eiBtNDIzLjY1MDU0My00MTQuMzEwMDE1YTM0MC45OTMyNjQgMzQwLjk5MzI2NCAwIDAgMSAzMzcuMzY3OTQ1IDMzNy40MTA1OTYgNDIuNjUwODE1IDQyLjY1MDgxNSAwIDAgMS04NS4zMDE2MyAwLjg5NTY2N0EyNTUuNjkxNjM1IDI1NS42OTE2MzUgMCAwIDAgNTE0LjYxMDAyNyAyNTYuMTE4MTQzYTQyLjY1MDgxNSA0Mi42NTA4MTUgMCAwIDEgMC44NTMwMTYtODUuMzAxNjN6TTUzLjA0MjkwOSAzODcuOTk0NDYybDUuMzc0MDAzIDAuNzY3NzE1YTQyLjY1MDgxNSA0Mi42NTA4MTUgMCAwIDEtMTEuODE0Mjc2IDg0LjM2MzMxMWwtNS4zNzQwMDItMC44MTAzNjVhNDIuNjUwODE1IDQyLjY1MDgxNSAwIDAgMSAxMS44MTQyNzUtODQuMzIwNjYxeiBtOTYyLjg4NDc5NSAzNC4xMjA2NTJhNDIuNjUwODE1IDQyLjY1MDgxNSAwIDAgMS0yOC42MTg2OTcgNDguOTYzMTM1bC01LjI0NjA1IDEuMzIyMTc2YTQyLjY1MDgxNSA0Mi42NTA4MTUgMCAwIDEtMjEuNTgxMzEyLTgyLjM1ODcyNGw1LjI0NjA1LTEuMzY0ODI2YTQyLjY1MDgxNSA0Mi42NTA4MTUgMCAwIDEgNTAuMjAwMDA5IDMzLjQ4MDg5eiBtLTYyLjA5OTU4Ni0xNjguNDcwNzE5YTQyLjY1MDgxNSA0Mi42NTA4MTUgMCAwIDEtNy44NDc3NSA1Ni4xNzExMjRsLTQuMzUwMzgzIDMuMjQxNDYxYTQyLjY1MDgxNSA0Mi42NTA4MTUgMCAwIDEtNTEuMzA4OTMxLTY3Ljk4NTM5OGw0LjM5MzAzNC0zLjI0MTQ2MmE0Mi42NTA4MTUgNDIuNjUwODE1IDAgMCAxIDU5LjExNDAzIDExLjgxNDI3NXogbS0xMTQuNzMwNjkyLTEzNS4zMzEwMzVhNDIuNjUwODE1IDQyLjY1MDgxNSAwIDAgMSAxMS41MTU3MiA1NS4yMzI4MDVsLTMuMTk4ODExIDQuODE5NTQyYTQyLjY1MDgxNSA0Mi42NTA4MTUgMCAwIDEtNzEuMjI2ODYxLTQ2LjcwMjY0MmwzLjI0MTQ2Mi00LjgxOTU0MmE0Mi42NTA4MTUgNDIuNjUwODE1IDAgMCAxIDU5LjcxMTE0MS04LjUzMDE2M3pNMzkwLjQ5NjE1NiA1My45OTU5MzJsMS44MzM5ODUgNS4xMTgwOTdhNDIuNjUwODE1IDQyLjY1MDgxNSAwIDAgMS04MC4wMTI5MjkgMjkuMTczMTU4bC0xLjgzMzk4NS01LjExODA5OGE0Mi42NTA4MTUgNDIuNjUwODE1IDAgMCAxIDgwLjAxMjkyOS0yOS4xNzMxNTd6IG0yOTQuMTYyNjctMjMuODg0NDU3YTQyLjY1MDgxNSA0Mi42NTA4MTUgMCAwIDEgMjkuNzcwMjY4IDQ4LjE5NTQyMWwtMS4yNzk1MjQgNS4yODg3MDFhNDIuNjUwODE1IDQyLjY1MDgxNSAwIDAgMS04Mi44NzA1MzMtMTkuNjE5Mzc1bDEuMjc5NTI0LTUuMjg4NzAxQTQyLjY1MDgxNSA0Mi42NTA4MTUgMCAwIDEgNjg0LjYxNjE3NSAzMC4wNjg4MjR6IG0tMTcyLjczNTgtMzAuMTExNDc1YTQyLjY1MDgxNSA0Mi42NTA4MTUgMCAwIDEgNDIuMzUyMjU5IDM3LjY2MDY2OWwwLjI1NTkwNSA1LjQxNjY1NGE0Mi42NTA4MTUgNDIuNjUwODE1IDAgMCAxLTg1LjAwMzA3NCA0Ljk5MDE0NUw0NjkuMTg2OTA5IDQyLjY1MDgxNWE0Mi42NTA4MTUgNDIuNjUwODE1IDAgMCAxIDQyLjY1MDgxNS00Mi42NTA4MTV6IiBmaWxsPSIjODc4NzhCIiBwLWlkPSI3MTk4Ij48L3BhdGg+PC9zdmc+");
189+
background-size: 16px 16px;
190+
background-repeat: no-repeat;
191+
background-position: center center;
192+
display: inline-block;
193+
width: 16px;
194+
height: 16px;
195+
flex-shrink: 0;
196+
margin-right: 4px;
197+
content: none;
198+
font-size: 0;
199+
}
200+
201+
.live-photo-mute-btn {
202+
border-radius: 50%;
203+
width: 32px;
204+
height: 32px;
205+
padding: 0;
206+
opacity: 0.9;
207+
display: flex;
208+
}
209+
210+
.live-photo-mute-btn i {
211+
display: block;
212+
width: 100%;
213+
height: 100%;
214+
font-size: 0;
215+
content: none;
216+
color: transparent;
217+
background-repeat: no-repeat;
218+
background-position: center center;
219+
background-size: 18px 18px;
220+
}
221+
222+
.live-photo-mute-btn[data-muted="true"] i.icon-muted {
223+
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20width%3D%2724%27%20height%3D%2724%27%3E%3Cpath%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%20stroke-width%3D%272%27%20d%3D%27M15%208a5%205%200%200%201%201.912%204.934m-1.377%202.602A5%205%200%200%201%2015%2016m2.7-11a9%209%200%200%201%202.362%2011.086m-1.676%202.299A9%209%200%200%201%2017.7%2019M9.069%205.054L9.5%204.5A.8.8%200%200%201%2011%205v2m0%204v8a.8.8%200%200%201-1.5.5L6%2015H4a1%201%200%200%201-1-1v-4a1%201%200%200%201%201-1h2l1.294-1.664M3%203l18%2018%27%2F%3E%3C%2Fsvg%3E");
224+
}
225+
226+
.live-photo-mute-btn[data-muted="false"] i.icon-unmuted {
227+
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20width%3D%2724%27%20height%3D%2724%27%3E%3Cpath%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%20stroke-width%3D%272%27%20d%3D%27M15%208a5%205%200%200%201%200%208m2.7-11a9%209%200%200%201%200%2014M6%2015H4a1%201%200%200%201-1-1v-4a1%201%200%200%201%201-1h2l3.5-4.5A.8.8%200%200%201%2011%205v14a.8.8%200%200%201-1.5.5z%27%2F%3E%3C%2Fsvg%3E");
228+
}
229+
</style>

0 commit comments

Comments
 (0)