me/offline-twitter
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add UI support for GIFs; make both gifs and regular videos have rounded corners

Browse Source
This commit is contained in:
Alessio 2024-04-19 21:45:54 -07:00
parent a2e7187040
commit 28267a802a
2 changed files with 62 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
internal/webserver/static/styles.css
View File

@ -590,6 +590,32 @@ main {
}
}
/**
* Video module
*/
.video {
position: relative;
display: flex;
width: fit-content;
border-radius: 1.5em;
overflow: hidden;
.video__gif-controls {
position: absolute;
bottom: 1.2em;
left: 1em;
background-color: #999;
font-weight: bold;
padding: 0 0.2em 0 0.4em;
border-radius: 0.3em;
border: 1px solid #444;
.svg-icon {
font-size: 0.6em;
}
}
}
/**
* Retweet info module
*/

48
internal/webserver/tpl/tweet_page_includes/single_tweet.tpl
View File

@ -78,19 +78,43 @@
>
{{end}}
{{range $main_tweet.Videos}}
<video controls hx-trigger="click consume" width="{{.Width}}" height="{{.Height}}"
{{if .IsDownloaded}}
poster="/content/video_thumbnails/{{.ThumbnailLocalPath}}"
{{else}}
poster="{{.ThumbnailRemoteUrl}}"
<div class="video">
{{if .IsGif}}
<div class="video__gif-controls labelled-icon">
<img class="svg-icon" src="/static/icons/play.svg" width="24" height="24" />
<label class="video__gif-label">GIF</label>
</div>
<script>
function gif_on_click(video) {
if (video.paused) {
video.play();
video.parentElement.querySelector(".svg-icon").src = "/static/icons/pause.svg";
} else {
video.pause();
video.parentElement.querySelector(".svg-icon").src = "/static/icons/play.svg";
}
}
</script>
{{end}}
>
{{if .IsDownloaded}}
<source src="/content/videos/{{.LocalFilename}}">
{{else}}
<source src="{{.RemoteURL}}">
{{end}}
</video>
<video hx-trigger="click consume" width="{{.Width}}" height="{{.Height}}"
{{if .IsGif}}
loop muted playsinline onclick="gif_on_click(this)" class="gif"
{{else}}
controls class="video"
{{end}}
{{if .IsDownloaded}}
poster="/content/video_thumbnails/{{.ThumbnailLocalPath}}"
{{else}}
poster="{{.ThumbnailRemoteUrl}}"
{{end}}
>
{{if .IsDownloaded}}
<source src="/content/videos/{{.LocalFilename}}">
{{else}}
<source src="{{.RemoteURL}}">
{{end}}
</video>
</div>
{{end}}
{{range $main_tweet.Urls}}
<div class="click-eater" hx-trigger="click consume">