2017-11-20 06:10:04 +01:00
{{ define "title"}}{{ .entry.Title }}{{ end }}
2024-01-27 09:25:55 +01:00
{{ define "page_header"}}
2024-02-01 09:48:34 +01:00
< section class = "entry" data-id = "{{ .entry.ID }}" aria-labelledby = "page-header-title" >
2024-01-28 04:25:30 +01:00
< header class = "entry-header" >
2024-01-25 07:22:18 +01:00
< h1 id = "page-header-title" dir = "auto" >
2020-01-02 20:06:57 +01:00
< a href = "{{ .entry.URL | safeURL }}" target = "_blank" rel = "noopener noreferrer" referrerpolicy = "no-referrer" > {{ .entry.Title }}< / a >
2017-11-20 06:10:04 +01:00
< / h1 >
2019-10-05 13:30:25 +02:00
{{ if .user }}
2017-12-03 04:32:14 +01:00
< div class = "entry-actions" >
2017-12-11 04:01:38 +01:00
< ul >
2018-08-29 05:44:34 +02:00
< li >
Replace link has button role with button tag
# Change HTML tag to button
Replace the link tag with an HTML button to prevent some screen readers from having confusing announcements. By using the HTML button, users can use the Enter and Space keys to activate actions by default, instead of implementing them in JavaScript.
# Differentiate links and buttons visually
When activating the link element, the user may expect the web page to navigate to the URL and the page will refresh; when activating the button element, the user may expect the web page to still be on the same page, so that their current state, such as: input value, won't disappear.
Links and buttons should have different styles visually, so that users can't expect what will happen when they activate a link or a button.
I added the underline to the links, because that is the common pattern. Buttons have border and background color in a common pattern. But I think that will change the current layout drastically. So I added the focus, hover and active classes to the buttons instead.
2024-02-10 02:09:30 +01:00
< button
class="page-button"
2018-09-22 03:53:29 +02:00
title="{{ t "entry.status.title" }}"
2018-08-29 05:44:34 +02:00
data-toggle-status="true"
2022-02-02 06:06:40 +01:00
data-label-loading="{{ t "entry.state.saving" }}"
2020-12-30 05:47:18 +01:00
data-label-unread="{{ t "entry.status.unread" }}"
data-label-read="{{ t "entry.status.read" }}"
2021-03-07 20:55:43 +01:00
data-toast-unread="{{ t "entry.status.toast.unread" }}"
data-toast-read="{{ t "entry.status.toast.read" }}"
2018-08-29 05:44:34 +02:00
data-value="{{ if eq .entry.Status "read" }}read{{ else }}unread{{ end }}"
Replace link has button role with button tag
# Change HTML tag to button
Replace the link tag with an HTML button to prevent some screen readers from having confusing announcements. By using the HTML button, users can use the Enter and Space keys to activate actions by default, instead of implementing them in JavaScript.
# Differentiate links and buttons visually
When activating the link element, the user may expect the web page to navigate to the URL and the page will refresh; when activating the button element, the user may expect the web page to still be on the same page, so that their current state, such as: input value, won't disappear.
Links and buttons should have different styles visually, so that users can't expect what will happen when they activate a link or a button.
I added the underline to the links, because that is the common pattern. Buttons have border and background color in a common pattern. But I think that will change the current layout drastically. So I added the focus, hover and active classes to the buttons instead.
2024-02-10 02:09:30 +01:00
>{{ if eq .entry.Status "unread" }}{{ icon "read" }}{{ else }}{{ icon "unread" }}{{ end }}< span class = "icon-label" > {{ if eq .entry.Status "unread" }}{{ t "entry.status.read" }}{{ else }}{{ t "entry.status.unread" }}{{ end }}< / span > < / button >
2018-08-29 05:44:34 +02:00
< / li >
2017-12-22 20:33:01 +01:00
< li >
Replace link has button role with button tag
# Change HTML tag to button
Replace the link tag with an HTML button to prevent some screen readers from having confusing announcements. By using the HTML button, users can use the Enter and Space keys to activate actions by default, instead of implementing them in JavaScript.
# Differentiate links and buttons visually
When activating the link element, the user may expect the web page to navigate to the URL and the page will refresh; when activating the button element, the user may expect the web page to still be on the same page, so that their current state, such as: input value, won't disappear.
Links and buttons should have different styles visually, so that users can't expect what will happen when they activate a link or a button.
I added the underline to the links, because that is the common pattern. Buttons have border and background color in a common pattern. But I think that will change the current layout drastically. So I added the focus, hover and active classes to the buttons instead.
2024-02-10 02:09:30 +01:00
< button
class="page-button"
2017-12-22 20:33:01 +01:00
data-toggle-bookmark="true"
data-bookmark-url="{{ route "toggleBookmark" "entryID" .entry.ID }}"
2018-09-22 03:53:29 +02:00
data-label-loading="{{ t "entry.state.saving" }}"
2020-12-30 05:47:18 +01:00
data-label-star="{{ t "entry.bookmark.toggle.on" }}"
data-label-unstar="{{ t "entry.bookmark.toggle.off" }}"
2021-03-07 20:55:43 +01:00
data-toast-star="{{ t "entry.bookmark.toast.on" }}"
data-toast-unstar="{{ t "entry.bookmark.toast.off" }}"
2018-06-29 03:56:04 +02:00
data-value="{{ if .entry.Starred }}star{{ else }}unstar{{ end }}"
Replace link has button role with button tag
# Change HTML tag to button
Replace the link tag with an HTML button to prevent some screen readers from having confusing announcements. By using the HTML button, users can use the Enter and Space keys to activate actions by default, instead of implementing them in JavaScript.
# Differentiate links and buttons visually
When activating the link element, the user may expect the web page to navigate to the URL and the page will refresh; when activating the button element, the user may expect the web page to still be on the same page, so that their current state, such as: input value, won't disappear.
Links and buttons should have different styles visually, so that users can't expect what will happen when they activate a link or a button.
I added the underline to the links, because that is the common pattern. Buttons have border and background color in a common pattern. But I think that will change the current layout drastically. So I added the focus, hover and active classes to the buttons instead.
2024-02-10 02:09:30 +01:00
>{{ if .entry.Starred }}{{ icon "unstar" }}{{ else }}{{ icon "star" }}{{ end }}< span class = "icon-label" > {{ if .entry.Starred }}{{ t "entry.bookmark.toggle.off" }}{{ else }}{{ t "entry.bookmark.toggle.on" }}{{ end }}< / span > < / button >
2017-12-22 20:33:01 +01:00
< / li >
2018-04-30 02:43:40 +02:00
{{ if .hasSaveEntry }}
2024-01-25 07:22:18 +01:00
< li >
Replace link has button role with button tag
# Change HTML tag to button
Replace the link tag with an HTML button to prevent some screen readers from having confusing announcements. By using the HTML button, users can use the Enter and Space keys to activate actions by default, instead of implementing them in JavaScript.
# Differentiate links and buttons visually
When activating the link element, the user may expect the web page to navigate to the URL and the page will refresh; when activating the button element, the user may expect the web page to still be on the same page, so that their current state, such as: input value, won't disappear.
Links and buttons should have different styles visually, so that users can't expect what will happen when they activate a link or a button.
I added the underline to the links, because that is the common pattern. Buttons have border and background color in a common pattern. But I think that will change the current layout drastically. So I added the focus, hover and active classes to the buttons instead.
2024-02-10 02:09:30 +01:00
< button
class="page-button"
2024-01-25 07:22:18 +01:00
title="{{ t "entry.save.title" }}"
data-save-entry="true"
data-save-url="{{ route "saveEntry" "entryID" .entry.ID }}"
data-label-loading="{{ t "entry.state.saving" }}"
data-label-done="{{ t "entry.save.completed" }}"
data-toast-done="{{ t "entry.save.toast.completed" }}"
Replace link has button role with button tag
# Change HTML tag to button
Replace the link tag with an HTML button to prevent some screen readers from having confusing announcements. By using the HTML button, users can use the Enter and Space keys to activate actions by default, instead of implementing them in JavaScript.
# Differentiate links and buttons visually
When activating the link element, the user may expect the web page to navigate to the URL and the page will refresh; when activating the button element, the user may expect the web page to still be on the same page, so that their current state, such as: input value, won't disappear.
Links and buttons should have different styles visually, so that users can't expect what will happen when they activate a link or a button.
I added the underline to the links, because that is the common pattern. Buttons have border and background color in a common pattern. But I think that will change the current layout drastically. So I added the focus, hover and active classes to the buttons instead.
2024-02-10 02:09:30 +01:00
>{{ icon "save" }}< span class = "icon-label" > {{ t "entry.save.label" }}< / span > < / button >
2024-01-25 07:22:18 +01:00
< / li >
2018-04-30 02:43:40 +02:00
{{ end }}
2022-01-03 15:56:29 +01:00
{{ if .entry.ShareCode }}
2024-01-25 07:22:18 +01:00
< li >
< a href = "{{ route " sharedEntry " " shareCode " . entry . ShareCode } } "
title="{{ t "entry.shared_entry.title" }}"
data-share-status="shared"
target="_blank">{{ icon "share" }}< span class = "icon-label" > {{ t "entry.shared_entry.label" }}< / span > < / a >
< / li >
< li >
Replace link has button role with button tag
# Change HTML tag to button
Replace the link tag with an HTML button to prevent some screen readers from having confusing announcements. By using the HTML button, users can use the Enter and Space keys to activate actions by default, instead of implementing them in JavaScript.
# Differentiate links and buttons visually
When activating the link element, the user may expect the web page to navigate to the URL and the page will refresh; when activating the button element, the user may expect the web page to still be on the same page, so that their current state, such as: input value, won't disappear.
Links and buttons should have different styles visually, so that users can't expect what will happen when they activate a link or a button.
I added the underline to the links, because that is the common pattern. Buttons have border and background color in a common pattern. But I think that will change the current layout drastically. So I added the focus, hover and active classes to the buttons instead.
2024-02-10 02:09:30 +01:00
< button
class="page-button"
2024-01-25 07:22:18 +01:00
data-confirm="true"
data-url="{{ route "unshareEntry" "entryID" .entry.ID }}"
data-label-question="{{ t "confirm.question" }}"
data-label-yes="{{ t "confirm.yes" }}"
data-label-no="{{ t "confirm.no" }}"
Replace link has button role with button tag
# Change HTML tag to button
Replace the link tag with an HTML button to prevent some screen readers from having confusing announcements. By using the HTML button, users can use the Enter and Space keys to activate actions by default, instead of implementing them in JavaScript.
# Differentiate links and buttons visually
When activating the link element, the user may expect the web page to navigate to the URL and the page will refresh; when activating the button element, the user may expect the web page to still be on the same page, so that their current state, such as: input value, won't disappear.
Links and buttons should have different styles visually, so that users can't expect what will happen when they activate a link or a button.
I added the underline to the links, because that is the common pattern. Buttons have border and background color in a common pattern. But I think that will change the current layout drastically. So I added the focus, hover and active classes to the buttons instead.
2024-02-10 02:09:30 +01:00
data-label-loading="{{ t "confirm.loading" }}">{{ icon "delete" }}< span class = "icon-label" > {{ t "entry.unshare.label" }}< / span > < / button >
2024-01-25 07:22:18 +01:00
< / li >
2022-01-03 15:56:29 +01:00
{{ else }}
2024-01-25 07:22:18 +01:00
< li >
< a href = "{{ route " shareEntry " " entryID " . entry . ID } } "
Replace link has button role with button tag
# Change HTML tag to button
Replace the link tag with an HTML button to prevent some screen readers from having confusing announcements. By using the HTML button, users can use the Enter and Space keys to activate actions by default, instead of implementing them in JavaScript.
# Differentiate links and buttons visually
When activating the link element, the user may expect the web page to navigate to the URL and the page will refresh; when activating the button element, the user may expect the web page to still be on the same page, so that their current state, such as: input value, won't disappear.
Links and buttons should have different styles visually, so that users can't expect what will happen when they activate a link or a button.
I added the underline to the links, because that is the common pattern. Buttons have border and background color in a common pattern. But I think that will change the current layout drastically. So I added the focus, hover and active classes to the buttons instead.
2024-02-10 02:09:30 +01:00
class="page-link"
2024-01-25 07:22:18 +01:00
title="{{ t "entry.share.title" }}"
data-share-status="share"
target="_blank">{{ icon "share" }}< span class = "icon-label" > {{ t "entry.share.label" }}< / span > < / a >
< / li >
2022-01-03 15:56:29 +01:00
{{ end }}
2020-11-01 02:34:56 +01:00
< li >
< a href = "{{ .entry.URL | safeURL }}"
Replace link has button role with button tag
# Change HTML tag to button
Replace the link tag with an HTML button to prevent some screen readers from having confusing announcements. By using the HTML button, users can use the Enter and Space keys to activate actions by default, instead of implementing them in JavaScript.
# Differentiate links and buttons visually
When activating the link element, the user may expect the web page to navigate to the URL and the page will refresh; when activating the button element, the user may expect the web page to still be on the same page, so that their current state, such as: input value, won't disappear.
Links and buttons should have different styles visually, so that users can't expect what will happen when they activate a link or a button.
I added the underline to the links, because that is the common pattern. Buttons have border and background color in a common pattern. But I think that will change the current layout drastically. So I added the focus, hover and active classes to the buttons instead.
2024-02-10 02:09:30 +01:00
class="page-link"
2020-11-01 02:34:56 +01:00
target="_blank"
rel="noopener noreferrer"
referrerpolicy="no-referrer"
2023-03-17 14:56:17 +01:00
data-original-link="{{ .user.MarkReadOnView }}">{{ icon "external-link" }}< span class = "icon-label" > {{ t "entry.external_link.label" }}< / span > < / a >
2020-11-01 02:34:56 +01:00
< / li >
2017-12-11 04:01:38 +01:00
< li >
Replace link has button role with button tag
# Change HTML tag to button
Replace the link tag with an HTML button to prevent some screen readers from having confusing announcements. By using the HTML button, users can use the Enter and Space keys to activate actions by default, instead of implementing them in JavaScript.
# Differentiate links and buttons visually
When activating the link element, the user may expect the web page to navigate to the URL and the page will refresh; when activating the button element, the user may expect the web page to still be on the same page, so that their current state, such as: input value, won't disappear.
Links and buttons should have different styles visually, so that users can't expect what will happen when they activate a link or a button.
I added the underline to the links, because that is the common pattern. Buttons have border and background color in a common pattern. But I think that will change the current layout drastically. So I added the focus, hover and active classes to the buttons instead.
2024-02-10 02:09:30 +01:00
< button
class="page-button"
2018-09-22 03:53:29 +02:00
title="{{ t "entry.scraper.title" }}"
2017-12-11 04:01:38 +01:00
data-fetch-content-entry="true"
data-fetch-content-url="{{ route "fetchContent" "entryID" .entry.ID }}"
2018-09-22 03:53:29 +02:00
data-label-loading="{{ t "entry.state.loading" }}"
Replace link has button role with button tag
# Change HTML tag to button
Replace the link tag with an HTML button to prevent some screen readers from having confusing announcements. By using the HTML button, users can use the Enter and Space keys to activate actions by default, instead of implementing them in JavaScript.
# Differentiate links and buttons visually
When activating the link element, the user may expect the web page to navigate to the URL and the page will refresh; when activating the button element, the user may expect the web page to still be on the same page, so that their current state, such as: input value, won't disappear.
Links and buttons should have different styles visually, so that users can't expect what will happen when they activate a link or a button.
I added the underline to the links, because that is the common pattern. Buttons have border and background color in a common pattern. But I think that will change the current layout drastically. So I added the focus, hover and active classes to the buttons instead.
2024-02-10 02:09:30 +01:00
>{{ icon "scraper" }}< span class = "icon-label" > {{ t "entry.scraper.label" }}< / span > < / button >
2017-12-11 04:01:38 +01:00
< / li >
2018-04-07 22:50:45 +02:00
{{ if .entry.CommentsURL }}
2024-01-25 07:22:18 +01:00
< li >
< a href = "{{ .entry.CommentsURL | safeURL }}"
Replace link has button role with button tag
# Change HTML tag to button
Replace the link tag with an HTML button to prevent some screen readers from having confusing announcements. By using the HTML button, users can use the Enter and Space keys to activate actions by default, instead of implementing them in JavaScript.
# Differentiate links and buttons visually
When activating the link element, the user may expect the web page to navigate to the URL and the page will refresh; when activating the button element, the user may expect the web page to still be on the same page, so that their current state, such as: input value, won't disappear.
Links and buttons should have different styles visually, so that users can't expect what will happen when they activate a link or a button.
I added the underline to the links, because that is the common pattern. Buttons have border and background color in a common pattern. But I think that will change the current layout drastically. So I added the focus, hover and active classes to the buttons instead.
2024-02-10 02:09:30 +01:00
class="page-link"
2024-01-25 07:22:18 +01:00
title="{{ t "entry.comments.title" }}"
target="_blank"
rel="noopener noreferrer"
referrerpolicy="no-referrer"
data-comments-link="true"
2021-03-07 20:02:52 +01:00
>{{ icon "comment" }}< span class = "icon-label" > {{ t "entry.comments.label" }}< / span > < / a >
2024-01-25 07:22:18 +01:00
< / li >
2018-04-07 22:50:45 +02:00
{{ end }}
2017-12-11 04:01:38 +01:00
< / ul >
2017-12-03 04:32:14 +01:00
< / div >
2019-10-05 13:30:25 +02:00
{{ end }}
2020-06-25 06:46:37 +02:00
< div class = "entry-meta" dir = "auto" >
2017-11-20 06:10:04 +01:00
< span class = "entry-website" >
2019-10-05 13:30:25 +02:00
{{ if and .user (ne .entry.Feed.Icon.IconID 0) }}
2024-01-25 07:22:18 +01:00
< img src = "{{ route " icon " " iconID " . entry . Feed . Icon . IconID } } " width = "16" height = "16" loading = "lazy" alt = "{{ .entry.Feed.Title }}" >
2017-11-20 06:10:04 +01:00
{{ end }}
2020-03-18 04:22:02 +01:00
{{ if .user }}
2024-01-25 07:22:18 +01:00
< a href = "{{ route " feedEntries " " feedID " . entry . Feed . ID } } " > {{ .entry.Feed.Title }}< / a >
2020-03-18 04:22:02 +01:00
{{ else }}
2024-01-25 07:22:18 +01:00
< a href = "{{ .entry.Feed.SiteURL | safeURL }}" > {{ .entry.Feed.Title }}< / a >
2020-03-18 04:22:02 +01:00
{{ end }}
2017-11-20 06:10:04 +01:00
< / span >
{{ if .entry.Author }}
2024-01-25 07:22:18 +01:00
< span class = "entry-author" >
{{ if isEmail .entry.Author }}
- < a href = "mailto:{{ .entry.Author }}" > {{ .entry.Author }}< / a >
{{ else }}
– < em > {{ .entry.Author }}< / em >
{{ end }}
< / span >
2017-11-20 06:10:04 +01:00
{{ end }}
2019-10-05 13:30:25 +02:00
{{ if .user }}
2024-01-25 07:22:18 +01:00
< span class = "category" >
< a href = "{{ route " categoryEntries " " categoryID " . entry . Feed . Category . ID } } " > {{ .entry.Feed.Category.Title }}< / a >
< / span >
2019-10-05 13:30:25 +02:00
{{ end }}
2017-11-20 06:10:04 +01:00
< / div >
2023-06-25 02:44:37 +02:00
{{ if .entry.Tags }}
2024-01-25 07:22:18 +01:00
< div class = "entry-tags" >
{{ t "entry.tags.label" }}
2024-04-05 12:09:29 +02:00
{{range $i, $e := .entry.Tags}}{{if $i}}, {{end}}< a href = "{{ route " tagEntriesAll " " tagName " ( urlEncode $ e ) } } " > < strong > {{ $e }}< / strong > < / a > {{end}}
2024-01-25 07:22:18 +01:00
< / div >
2023-06-25 02:44:37 +02:00
{{ end }}
2017-11-20 06:10:04 +01:00
< div class = "entry-date" >
2019-10-05 13:30:25 +02:00
{{ if .user }}
2024-01-25 07:22:18 +01:00
< time datetime = "{{ isodate .entry.Date }}" title = "{{ isodate .entry.Date }}" > {{ elapsed $.user.Timezone .entry.Date }}< / time >
2019-10-05 13:30:25 +02:00
{{ else }}
2024-01-25 07:22:18 +01:00
< time datetime = "{{ isodate .entry.Date }}" title = "{{ isodate .entry.Date }}" > {{ elapsed "UTC" .entry.Date }}< / time >
2019-10-05 13:30:25 +02:00
{{ end }}
2021-02-25 05:06:11 +01:00
{{ if and .user.ShowReadingTime (gt .entry.ReadingTime 0) }}
·
2022-12-14 13:32:45 +01:00
< span class = "entry-reading-time" >
2021-02-25 05:06:11 +01:00
{{ plural "entry.estimated_reading_time" .entry.ReadingTime .entry.ReadingTime }}
< / span >
{{ end }}
2017-11-20 06:10:04 +01:00
< / div >
2024-01-28 04:25:30 +01:00
< / header >
2024-01-27 09:25:55 +01:00
< / section >
2024-01-25 07:22:18 +01:00
{{ end }}
{{ define "content"}}
{{ if gt (len .entry.Content) 120 }}
{{ if .user }}
< div class = "pagination-entry-top" >
{{ template "entry_pagination" . }}
< / div >
{{ end }}
{{ end }}
2024-02-02 04:15:33 +01:00
< article class = "entry-content gesture-nav-{{ $.user.GestureNav }}" dir = "auto" >
2024-01-25 07:22:18 +01:00
{{ if (and .entry.Enclosures (not .entry.Feed.NoMediaPlayer)) }}
{{ range .entry.Enclosures }}
{{ if ne .URL "" }}
{{ if hasPrefix .MimeType "audio/" }}
< div class = "enclosure-audio" >
< audio controls preload = "metadata"
data-last-position="{{ .MediaProgression }}"
2024-03-16 14:20:02 +01:00
{{ if $.user.MediaPlaybackRate }}data-playback-rate="{{ $.user.MediaPlaybackRate }}"{{ end }}
2024-01-25 07:22:18 +01:00
data-save-url="{{ route "saveEnclosureProgression" "enclosureID" .ID }}"
2024-04-10 17:14:38 +02:00
data-enclosure-id="{{.ID}}"
2024-01-25 07:22:18 +01:00
>
{{ if (and $.user (mustBeProxyfied "audio")) }}
< source src = "{{ proxyURL .URL }}" type = "{{ .Html5MimeType }}" >
{{ else }}
< source src = "{{ .URL | safeURL }}" type = "{{ .Html5MimeType }}" >
Add Media Player and resume to last playback position
In order to ease podcast listening, the player can be put on top of the feed entry as main content.
Use the `Use podcast player` option to enable that. It works on audio and video.
Also, when playing audio or video, progression will be saved in order to be able to resume listening later.
This position saving is done using the original attachement/enclosures player AND podcast player and do not rely on
the podcast player option ti be enabled.
Additionally, I made the player fill the width with the entry container to ease seeking and have a bigger video.
updateEnclosures now keep existing enclosures based on URL
When feeds get updated, enclosures entries are always wiped and re-created. This cause two issue
- enclosure progression get lost in the process
- enclosure ID changes
I used the URL as identifier of an enclosure. Not perfect but hopefully should work.
When an enclosure already exist, I simply do nothing and leave the entry as is in the database.
If anyone is listening/watching to this enclosure during the refresh, the id stay coherent and progression saving still works.
The updateEnclosures function got a bit more complex. I tried to make it the more clear I could.
Some optimisation are possible but would make the function harder to read in my opinion.
I'm not sure if this is often the case, but some feeds may include tracking or simply change the url each
time we update the feed. In those situation, enclosures ids and progression will be lost.
I have no idea how to handle this last situation. Use the size instead/alongside url to define the identity of an enclosure ?
Translation: english as placeholder for every language except French
Aside, I tested a video feed and fixed a few things for it. In fact, the MimeType was not working
at all on my side, and found a pretty old stackoverflow discussion that suggest to use an Apple non-standard MimeType for
m4v video format. I only did one substitution because I only have one feed to test. Any new video feed can make this go away
or evolve depending on the situation. Real video feeds does not tend to be easy to find and test extensively this.
Co-authored-by: toastal
2023-04-13 11:46:43 +02:00
{{ end }}
2024-01-25 07:22:18 +01:00
< / audio >
2024-04-10 17:14:38 +02:00
{{ template "enclosure_media_controls" . }}
2024-01-25 07:22:18 +01:00
< / div >
{{ else if hasPrefix .MimeType "video/" }}
< div class = "enclosure-video" >
< video controls preload = "metadata"
data-last-position="{{ .MediaProgression }}"
2024-03-16 14:20:02 +01:00
{{ if $.user.MediaPlaybackRate }}data-playback-rate="{{ $.user.MediaPlaybackRate }}"{{ end }}
2024-01-25 07:22:18 +01:00
data-save-url="{{ route "saveEnclosureProgression" "enclosureID" .ID }}"
2024-04-10 17:14:38 +02:00
data-enclosure-id="{{.ID}}"
2024-01-25 07:22:18 +01:00
>
{{ if (and $.user (mustBeProxyfied "video")) }}
< source src = "{{ proxyURL .URL }}" type = "{{ .Html5MimeType }}" >
{{ else }}
< source src = "{{ .URL | safeURL }}" type = "{{ .Html5MimeType }}" >
{{ end }}
< / video >
2024-04-10 17:14:38 +02:00
{{ template "enclosure_media_controls" . }}
2024-01-25 07:22:18 +01:00
< / div >
{{ end }}
{{ end }}
{{ end }}
Add Media Player and resume to last playback position
In order to ease podcast listening, the player can be put on top of the feed entry as main content.
Use the `Use podcast player` option to enable that. It works on audio and video.
Also, when playing audio or video, progression will be saved in order to be able to resume listening later.
This position saving is done using the original attachement/enclosures player AND podcast player and do not rely on
the podcast player option ti be enabled.
Additionally, I made the player fill the width with the entry container to ease seeking and have a bigger video.
updateEnclosures now keep existing enclosures based on URL
When feeds get updated, enclosures entries are always wiped and re-created. This cause two issue
- enclosure progression get lost in the process
- enclosure ID changes
I used the URL as identifier of an enclosure. Not perfect but hopefully should work.
When an enclosure already exist, I simply do nothing and leave the entry as is in the database.
If anyone is listening/watching to this enclosure during the refresh, the id stay coherent and progression saving still works.
The updateEnclosures function got a bit more complex. I tried to make it the more clear I could.
Some optimisation are possible but would make the function harder to read in my opinion.
I'm not sure if this is often the case, but some feeds may include tracking or simply change the url each
time we update the feed. In those situation, enclosures ids and progression will be lost.
I have no idea how to handle this last situation. Use the size instead/alongside url to define the identity of an enclosure ?
Translation: english as placeholder for every language except French
Aside, I tested a video feed and fixed a few things for it. In fact, the MimeType was not working
at all on my side, and found a pretty old stackoverflow discussion that suggest to use an Apple non-standard MimeType for
m4v video format. I only did one substitution because I only have one feed to test. Any new video feed can make this go away
or evolve depending on the situation. Real video feeds does not tend to be easy to find and test extensively this.
Co-authored-by: toastal
2023-04-13 11:46:43 +02:00
{{end}}
2019-10-05 13:30:25 +02:00
{{ if .user }}
2024-01-25 07:22:18 +01:00
{{ noescape (proxyFilter .entry.Content) }}
2019-10-05 13:30:25 +02:00
{{ else }}
2024-01-25 07:22:18 +01:00
{{ noescape .entry.Content }}
2019-10-05 13:30:25 +02:00
{{ end }}
2024-01-25 07:22:18 +01:00
< / article >
{{ if .entry.Enclosures }}
< details class = "entry-enclosures" >
< summary > {{ t "page.entry.attachments" }} ({{ len .entry.Enclosures }})< / summary >
{{ range .entry.Enclosures }}
{{ if ne .URL "" }}
< div class = "entry-enclosure" >
{{ if hasPrefix .MimeType "audio/" }}
< div class = "enclosure-audio" >
< audio controls preload = "metadata"
data-last-position="{{ .MediaProgression }}"
2024-03-16 14:20:02 +01:00
{{ if $.user.MediaPlaybackRate }}data-playback-rate="{{ $.user.MediaPlaybackRate }}"{{ end }}
2024-01-25 07:22:18 +01:00
data-save-url="{{ route "saveEnclosureProgression" "enclosureID" .ID }}"
2024-04-10 17:14:38 +02:00
data-enclosure-id="{{.ID}}"
2024-01-25 07:22:18 +01:00
>
{{ if (and $.user (mustBeProxyfied "audio")) }}
< source src = "{{ proxyURL .URL }}" type = "{{ .Html5MimeType }}" >
{{ else }}
< source src = "{{ .URL | safeURL }}" type = "{{ .Html5MimeType }}" >
2017-11-20 06:10:04 +01:00
{{ end }}
2024-01-25 07:22:18 +01:00
< / audio >
2024-04-10 17:14:38 +02:00
{{ template "enclosure_media_controls" . }}
2024-01-25 07:22:18 +01:00
< / div >
{{ else if hasPrefix .MimeType "video/" }}
< div class = "enclosure-video" >
< video controls preload = "metadata"
data-last-position="{{ .MediaProgression }}"
2024-03-16 14:20:02 +01:00
{{ if $.user.MediaPlaybackRate }}data-playback-rate="{{ $.user.MediaPlaybackRate }}"{{ end }}
2024-01-25 07:22:18 +01:00
data-save-url="{{ route "saveEnclosureProgression" "enclosureID" .ID }}"
2024-04-10 17:14:38 +02:00
data-enclosure-id="{{.ID}}"
2024-01-25 07:22:18 +01:00
>
{{ if (and $.user (mustBeProxyfied "video")) }}
< source src = "{{ proxyURL .URL }}" type = "{{ .Html5MimeType }}" >
{{ else }}
< source src = "{{ .URL | safeURL }}" type = "{{ .Html5MimeType }}" >
{{ end }}
< / video >
2024-04-10 17:14:38 +02:00
{{ template "enclosure_media_controls" . }}
2024-01-25 07:22:18 +01:00
< / div >
{{ else if hasPrefix .MimeType "image/" }}
< div class = "enclosure-image" >
{{ if (and $.user (mustBeProxyfied "image")) }}
< img src = "{{ proxyURL .URL }}" title = "{{ .URL }} ({{ .MimeType }})" loading = "lazy" alt = "{{ .URL }} ({{ .MimeType }})" >
{{ else }}
< img src = "{{ .URL | safeURL }}" title = "{{ .URL }} ({{ .MimeType }})" loading = "lazy" alt = "{{ .URL }} ({{ .MimeType }})" >
2020-01-31 06:08:11 +01:00
{{ end }}
2024-01-25 07:22:18 +01:00
< / div >
2017-11-20 06:10:04 +01:00
{{ end }}
2024-01-25 07:22:18 +01:00
< div class = "entry-enclosure-download" >
< a href = "{{ .URL | safeURL }}" title = "{{ t " action . download " } } { { if gt . Size 0 } } - { { formatFileSize . Size } } { { end } } ( { { . MimeType } } ) " target = "_blank" rel = "noopener noreferrer" referrerpolicy = "no-referrer" > {{ .URL | safeURL }}< / a >
< small > {{ if gt .Size 0 }} - < strong > {{ formatFileSize .Size }}< / strong > {{ end }}< / small >
< / div >
< / div >
2017-11-20 06:10:04 +01:00
{{ end }}
2024-01-25 07:22:18 +01:00
{{ end }}
< / details >
{{ end }}
2017-11-20 06:10:04 +01:00
2019-10-05 13:30:25 +02:00
{{ if .user }}
2022-01-17 01:59:23 +01:00
< div class = "pagination-entry-bottom" >
2017-11-20 06:10:04 +01:00
{{ template "entry_pagination" . }}
< / div >
{{ end }}
2019-10-05 13:30:25 +02:00
{{ end }}