Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

If a content is formed of a single video, play in feed #75

Merged
merged 2 commits into from
Jan 5, 2025
Merged

If a content is formed of a single video, play in feed #75

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5eadb9c
If a content is formed of a single video, play in feed
thekid Jan 5, 2025
06a45b6
Consistently ark videos in collapsed list with "play" icon
thekid Jan 5, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
56 changes: 43 additions & 13 deletions src/main/handlebars/feed.handlebars
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,20 +42,35 @@
{{> partials/weather in=.}}
</div>

<a class="images is-preview is-{{size-class (size images)}}" href="{{route this}}">
{{#with images.0}}
<div class="{{#if is.video}}is-video{{/if}} image">
<img alt="{{title}}, {{date meta.dateTime format='d.m.Y H:i'}}" {{#unless first}}loading="lazy"{{/unless}} {{&dataset meta}} src="/image/{{slug}}/thumb-{{name}}.webp" width="1024">
</div>
{{/with}}
<div class="more">
{{#each images}}
{{#unless (equals @index 0)}}
<img alt="{{title}}, {{date meta.dateTime format='d.m.Y H:i'}}" {{#unless ../@first}}loading="lazy"{{/unless}} style="z-index: -{{@index}}" src="/image/{{slug}}/thumb-{{name}}.webp" width="192">
{{/unless}}
{{/each}}
{{! Content formed of a single video can be played back inline directly }}
{{#if (all (equals 1 (size images)) images.0.is.video)}}
<div class="images is-single">
{{#with images.0}}
<div class="image">
<video controls playsinline preload="metadata" width="100%" poster="/image/{{slug}}/thumb-{{name}}.webp" data-slug="{{slug}}">
<source src="/image/{{slug}}/video-{{name}}.mp4" type="video/mp4">
</video>
</div>
{{/with}}
</div>
</a>
{{else}}
<a class="images is-preview is-{{size-class (size images)}}" href="{{route this}}">
{{#with images.0}}
<div class="{{#if is.video}}is-video{{/if}} image">
<img alt="{{title}}, {{date meta.dateTime format='d.m.Y H:i'}}" {{#unless first}}loading="lazy"{{/unless}} {{&dataset meta}} src="/image/{{slug}}/thumb-{{name}}.webp" width="1024">
</div>
{{/with}}
<div class="more">
{{#each images}}
{{#unless (equals @index 0)}}
<div class="{{#if is.video}}is-video{{/if}} image" style="z-index: -{{@index}}">
<img alt="{{title}}, {{date meta.dateTime format='d.m.Y H:i'}}" {{#unless ../@first}}loading="lazy"{{/unless}} src="/image/{{slug}}/thumb-{{name}}.webp" width="192">
</div>
{{/unless}}
{{/each}}
</div>
</a>
{{/if}}

<div class="content">
{{& content}}
Expand All @@ -75,5 +90,20 @@
</div>
{{/inline}}
{{#*inline "scripts"}}
<script type="module">
{{&use 'statistics'}}
const statistics = new Statistics();
{{#each elements}}
{{#if (all (equals 1 (size images)) images.0.is.video)}}
statistics.add('{{slug}}', '{{sign slug}}', 1500);
{{/if}}
{{/each}}

// Content formed of a single video has been watched once it's played back for more than 1.5 seconds
for (const $video of document.querySelectorAll('video')) {
$video.addEventListener('play', e => statistics.schedule($video.dataset['slug']));
$video.addEventListener('pause', e => statistics.withdraw($video.dataset['slug']));
}
</script>
{{/inline}}
{{/layout}}
18 changes: 11 additions & 7 deletions src/main/handlebars/layout.handlebars
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -598,22 +598,26 @@
display: flex;
isolation: isolate;

img {
display: block;
.image {
position: relative;
border: .25rem solid white;
border-radius: .35rem;
width: var(--_size);
aspect-ratio: 1 / 1;
object-fit: cover;
box-shadow: .5rem .5rem 1rem rgb(0 0 0 / .2);
transition: margin ease-in-out 150ms;
width: var(--_size);
height: var(--_size);
}

.image img {
width: 100%;
height: 100%;
}

img:not(:first-child) {
.image:not(:first-child) {
margin-left: calc(-1 * var(--_overlap));
}

&:hover img:not(:first-child) {
&:hover .image:not(:first-child) {
margin-left: 1rem;
}
}
Expand Down
Loading