feat(media): support audio and video tag with multi sources #1618

MrMurdock11 · 2024-03-18T19:10:45Z

Type of change

Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Improvement (refactoring and improving code)
Breaking change (fix or feature that would cause existing functionality to not work as expected)
Documentation update

Description

Summary: Support for audio with multiple sources and extends the existing video functionality to support multiple sources as well.
Motivation: I aim to enhance user experience by introducing a feature that allows content to be listened to. Recognizing the complexity of this feature, I've divided its development into several phases: embedding audio, creating custom audio controls, and integrating the feature into the front matter block. Currently, I've implemented audio embedding with support for multiple sources and have also upgraded the video functionality to accommodate multiple sources.

kungfux

@MrMurdock11 I'm looking forward to use this feature in my blog💪

_posts/2019-08-08-write-a-new-post.md

_includes/convert-media-type.html

_includes/multi-sources.html

_includes/embed/audio.html

_includes/multi-sources.html

_includes/embed/audio.html

cotes2020

Thanks @MrMurdock11, I understand your motivation and am in favor of this new feature.

But this PR contains some unnecessary files. It's not a good practice to overuse {% include %}, it will slow down the Jekyll build.

MrMurdock11 · 2024-03-26T20:50:49Z

Ok, I get it @cotes2020. I'll take a look at it and try to minimize the {% include %} calls.

cotes2020 · 2024-03-26T21:05:54Z

BTW, please make good use of git rebase and git force push when updating your feature branch, as this will facilitate code review.

MrMurdock11 · 2024-03-27T00:32:58Z

@cotes2020 I removed unnecessary files from embed directory and {% include %} tags. I decided to work with _data and move extensions and MIME types to allow us to dynamically reference and override extensions and MIME types as needed.

kungfux

Having media.yml makes it super easy to override and extend to support more media types. I like it 🫶

_includes/embed/video.html

_posts/2019-08-08-write-a-new-post.md

_includes/embed/audio.html

_data/media.yml

kungfux

Thank you for your patience and commitment.

Please wait for @cotes2020 approval as he may have good insights.

_includes/embed/audio.html

kungfux · 2024-04-03T19:28:18Z

@cotes2020 Don't get me wrong, I'm not pushing anyone, but I would like to ask who should merge this? Does @MrMurdock11 already have enough permissions? I ask in case you're all waiting for my action. 😊

cotes2020 · 2024-04-03T20:01:00Z

@kungfux As per @MrMurdock11‘s idea he is going to close this PR and reopen a new one. I will be involved in another code review when that happens, as the changes are a bit much.

MrMurdock11 · 2024-04-03T20:05:06Z

@cotes2020 Not really, I meant that we will finish this query and merge it, and then I will create a new one with img-url and img_cdn.

kungfux · 2024-04-03T20:11:34Z

I'm glad we cleared that up, because I had a different understanding of the answer too.

cotes2020 · 2024-04-03T20:19:33Z

That was a misunderstanding on my part. 😂

So hold on a bit longer and I'll review this PR in depth.

_posts/2019-08-08-write-a-new-post.md

_data/media.yml

_includes/embed/video.html

_includes/embed/audio.html

_includes/embed/video.html

MrMurdock11 · 2024-04-04T15:38:11Z

@cotes2020 @kungfux Thank you for your feedback

_includes/embed/video.html

cotes2020

LGTM

## [7.0.0](v6.5.5...v7.0.0) (2024-05-11) ### ⚠ BREAKING CHANGES * optimize the resource hints (#1717) * rename media-url file and related parameters (#1651) * rename comment setting parameter (#1563) * **analytics:** add post pageviews for GoatCounter (#1543) ### Features * add cloudflare web analytics ([#1723](#1723)) ([c17fba4](c17fba4)) * add support for embed video files ([#1558](#1558)) ([9592146](9592146)) * add support for giscus strict title matching ([#1614](#1614)) ([700fd5b](700fd5b)) * **analytics:** add post pageviews for GoatCounter ([#1543](#1543)) ([b641b3f](b641b3f)) * **analytics:** add Umami and Matomo tracking codes ([#1658](#1658)) ([61bdca2](61bdca2)) * change site verification settings ([#1561](#1561)) ([e436387](e436387)) * **deps:** move `MathJax` configuration to a separate file ([#1670](#1670)) ([44f552c](44f552c)) * display theme version in footer ([#1611](#1611)) ([8349314](8349314)) * **i18n:** allow `page.lang` to override `site.lang` ([#1586](#1586)) ([547b95c](547b95c)) * make post description customizable ([#1602](#1602)) ([f865336](f865336)) * **media:** support audio and video tag with multi sources ([#1618](#1618)) ([23be416](23be416)) ### Bug Fixes * make TOC title and entries visible at the same time ([#1711](#1711)) ([e0950fc](e0950fc)) * mode toggle not outlined when receiving keyboard focus ([#1690](#1690)) ([cd37f63](cd37f63)) * prevent footnote back arrow from becoming an emoji ([#1716](#1716)) ([8608147](8608147)) * **pwa:** skip range requests in service worker ([#1672](#1672)) ([76d58fe](76d58fe)) * search result prompt is empty ([#1583](#1583)) ([8a2afae](8a2afae)) * use `https` for Weibo sharing URL ([#1612](#1612)) ([8e5fbb7](8e5fbb7)) ### Improvements * improve <hr> visibility in dark mode ([#1565](#1565)) ([4ddd5c4](4ddd5c4)) * lean bootstrap javascript ([#1734](#1734)) ([ddb48ed](ddb48ed)) * rename comment setting parameter ([#1563](#1563)) ([f8390d4](f8390d4)) * replace jQuery with Vanilla JS ([#1681](#1681)) ([fe7afa3](fe7afa3)) * simplify mode toggle script ([#1692](#1692)) ([d4a6d64](d4a6d64)) * tree shaking Bootstrap CSS ([#1736](#1736)) ([363a3d9](363a3d9)) ### Changes * optimize the resource hints ([#1717](#1717)) ([dcb0add](dcb0add)) * rename media-url file and related parameters ([#1651](#1651)) ([9f8aeaa](9f8aeaa))

github-actions · 2024-05-11T07:32:16Z

🎉 This PR is included in version 7.0.0 🎉

The release is available on:

v7.0.0
GitHub release

Your semantic-release bot 📦🚀

…0#1618)

## [7.0.0](cotes2020/jekyll-theme-chirpy@v6.5.5...v7.0.0) (2024-05-11) ### ⚠ BREAKING CHANGES * optimize the resource hints (cotes2020#1717) * rename media-url file and related parameters (cotes2020#1651) * rename comment setting parameter (cotes2020#1563) * **analytics:** add post pageviews for GoatCounter (cotes2020#1543) ### Features * add cloudflare web analytics ([cotes2020#1723](cotes2020#1723)) ([c17fba4](cotes2020@c17fba4)) * add support for embed video files ([cotes2020#1558](cotes2020#1558)) ([9592146](cotes2020@9592146)) * add support for giscus strict title matching ([cotes2020#1614](cotes2020#1614)) ([700fd5b](cotes2020@700fd5b)) * **analytics:** add post pageviews for GoatCounter ([cotes2020#1543](cotes2020#1543)) ([b641b3f](cotes2020@b641b3f)) * **analytics:** add Umami and Matomo tracking codes ([cotes2020#1658](cotes2020#1658)) ([61bdca2](cotes2020@61bdca2)) * change site verification settings ([cotes2020#1561](cotes2020#1561)) ([e436387](cotes2020@e436387)) * **deps:** move `MathJax` configuration to a separate file ([cotes2020#1670](cotes2020#1670)) ([44f552c](cotes2020@44f552c)) * display theme version in footer ([cotes2020#1611](cotes2020#1611)) ([8349314](cotes2020@8349314)) * **i18n:** allow `page.lang` to override `site.lang` ([cotes2020#1586](cotes2020#1586)) ([547b95c](cotes2020@547b95c)) * make post description customizable ([cotes2020#1602](cotes2020#1602)) ([f865336](cotes2020@f865336)) * **media:** support audio and video tag with multi sources ([cotes2020#1618](cotes2020#1618)) ([23be416](cotes2020@23be416)) ### Bug Fixes * make TOC title and entries visible at the same time ([cotes2020#1711](cotes2020#1711)) ([e0950fc](cotes2020@e0950fc)) * mode toggle not outlined when receiving keyboard focus ([cotes2020#1690](cotes2020#1690)) ([cd37f63](cotes2020@cd37f63)) * prevent footnote back arrow from becoming an emoji ([cotes2020#1716](cotes2020#1716)) ([8608147](cotes2020@8608147)) * **pwa:** skip range requests in service worker ([cotes2020#1672](cotes2020#1672)) ([76d58fe](cotes2020@76d58fe)) * search result prompt is empty ([cotes2020#1583](cotes2020#1583)) ([8a2afae](cotes2020@8a2afae)) * use `https` for Weibo sharing URL ([cotes2020#1612](cotes2020#1612)) ([8e5fbb7](cotes2020@8e5fbb7)) ### Improvements * improve <hr> visibility in dark mode ([cotes2020#1565](cotes2020#1565)) ([4ddd5c4](cotes2020@4ddd5c4)) * lean bootstrap javascript ([cotes2020#1734](cotes2020#1734)) ([ddb48ed](cotes2020@ddb48ed)) * rename comment setting parameter ([cotes2020#1563](cotes2020#1563)) ([f8390d4](cotes2020@f8390d4)) * replace jQuery with Vanilla JS ([cotes2020#1681](cotes2020#1681)) ([fe7afa3](cotes2020@fe7afa3)) * simplify mode toggle script ([cotes2020#1692](cotes2020#1692)) ([d4a6d64](cotes2020@d4a6d64)) * tree shaking Bootstrap CSS ([cotes2020#1736](cotes2020#1736)) ([363a3d9](cotes2020@363a3d9)) ### Changes * optimize the resource hints ([cotes2020#1717](cotes2020#1717)) ([dcb0add](cotes2020@dcb0add)) * rename media-url file and related parameters ([cotes2020#1651](cotes2020#1651)) ([9f8aeaa](cotes2020@9f8aeaa))

…0#1618)

## [7.0.0](cotes2020/jekyll-theme-chirpy@v6.5.5...v7.0.0) (2024-05-11) ### ⚠ BREAKING CHANGES * optimize the resource hints (cotes2020#1717) * rename media-url file and related parameters (cotes2020#1651) * rename comment setting parameter (cotes2020#1563) * **analytics:** add post pageviews for GoatCounter (cotes2020#1543) ### Features * add cloudflare web analytics ([cotes2020#1723](cotes2020#1723)) ([c17fba4](cotes2020@c17fba4)) * add support for embed video files ([cotes2020#1558](cotes2020#1558)) ([9592146](cotes2020@9592146)) * add support for giscus strict title matching ([cotes2020#1614](cotes2020#1614)) ([700fd5b](cotes2020@700fd5b)) * **analytics:** add post pageviews for GoatCounter ([cotes2020#1543](cotes2020#1543)) ([b641b3f](cotes2020@b641b3f)) * **analytics:** add Umami and Matomo tracking codes ([cotes2020#1658](cotes2020#1658)) ([61bdca2](cotes2020@61bdca2)) * change site verification settings ([cotes2020#1561](cotes2020#1561)) ([e436387](cotes2020@e436387)) * **deps:** move `MathJax` configuration to a separate file ([cotes2020#1670](cotes2020#1670)) ([44f552c](cotes2020@44f552c)) * display theme version in footer ([cotes2020#1611](cotes2020#1611)) ([8349314](cotes2020@8349314)) * **i18n:** allow `page.lang` to override `site.lang` ([cotes2020#1586](cotes2020#1586)) ([547b95c](cotes2020@547b95c)) * make post description customizable ([cotes2020#1602](cotes2020#1602)) ([f865336](cotes2020@f865336)) * **media:** support audio and video tag with multi sources ([cotes2020#1618](cotes2020#1618)) ([23be416](cotes2020@23be416)) ### Bug Fixes * make TOC title and entries visible at the same time ([cotes2020#1711](cotes2020#1711)) ([e0950fc](cotes2020@e0950fc)) * mode toggle not outlined when receiving keyboard focus ([cotes2020#1690](cotes2020#1690)) ([cd37f63](cotes2020@cd37f63)) * prevent footnote back arrow from becoming an emoji ([cotes2020#1716](cotes2020#1716)) ([8608147](cotes2020@8608147)) * **pwa:** skip range requests in service worker ([cotes2020#1672](cotes2020#1672)) ([76d58fe](cotes2020@76d58fe)) * search result prompt is empty ([cotes2020#1583](cotes2020#1583)) ([8a2afae](cotes2020@8a2afae)) * use `https` for Weibo sharing URL ([cotes2020#1612](cotes2020#1612)) ([8e5fbb7](cotes2020@8e5fbb7)) ### Improvements * improve <hr> visibility in dark mode ([cotes2020#1565](cotes2020#1565)) ([4ddd5c4](cotes2020@4ddd5c4)) * lean bootstrap javascript ([cotes2020#1734](cotes2020#1734)) ([ddb48ed](cotes2020@ddb48ed)) * rename comment setting parameter ([cotes2020#1563](cotes2020#1563)) ([f8390d4](cotes2020@f8390d4)) * replace jQuery with Vanilla JS ([cotes2020#1681](cotes2020#1681)) ([fe7afa3](cotes2020@fe7afa3)) * simplify mode toggle script ([cotes2020#1692](cotes2020#1692)) ([d4a6d64](cotes2020@d4a6d64)) * tree shaking Bootstrap CSS ([cotes2020#1736](cotes2020#1736)) ([363a3d9](cotes2020@363a3d9)) ### Changes * optimize the resource hints ([cotes2020#1717](cotes2020#1717)) ([dcb0add](cotes2020@dcb0add)) * rename media-url file and related parameters ([cotes2020#1651](cotes2020#1651)) ([9f8aeaa](cotes2020@9f8aeaa))

…0#1618)

## [7.0.0](cotes2020/jekyll-theme-chirpy@v6.5.5...v7.0.0) (2024-05-11) ### ⚠ BREAKING CHANGES * optimize the resource hints (cotes2020#1717) * rename media-url file and related parameters (cotes2020#1651) * rename comment setting parameter (cotes2020#1563) * **analytics:** add post pageviews for GoatCounter (cotes2020#1543) ### Features * add cloudflare web analytics ([cotes2020#1723](cotes2020#1723)) ([c17fba4](cotes2020@c17fba4)) * add support for embed video files ([cotes2020#1558](cotes2020#1558)) ([9592146](cotes2020@9592146)) * add support for giscus strict title matching ([cotes2020#1614](cotes2020#1614)) ([700fd5b](cotes2020@700fd5b)) * **analytics:** add post pageviews for GoatCounter ([cotes2020#1543](cotes2020#1543)) ([b641b3f](cotes2020@b641b3f)) * **analytics:** add Umami and Matomo tracking codes ([cotes2020#1658](cotes2020#1658)) ([61bdca2](cotes2020@61bdca2)) * change site verification settings ([cotes2020#1561](cotes2020#1561)) ([e436387](cotes2020@e436387)) * **deps:** move `MathJax` configuration to a separate file ([cotes2020#1670](cotes2020#1670)) ([44f552c](cotes2020@44f552c)) * display theme version in footer ([cotes2020#1611](cotes2020#1611)) ([8349314](cotes2020@8349314)) * **i18n:** allow `page.lang` to override `site.lang` ([cotes2020#1586](cotes2020#1586)) ([547b95c](cotes2020@547b95c)) * make post description customizable ([cotes2020#1602](cotes2020#1602)) ([f865336](cotes2020@f865336)) * **media:** support audio and video tag with multi sources ([cotes2020#1618](cotes2020#1618)) ([23be416](cotes2020@23be416)) ### Bug Fixes * make TOC title and entries visible at the same time ([cotes2020#1711](cotes2020#1711)) ([e0950fc](cotes2020@e0950fc)) * mode toggle not outlined when receiving keyboard focus ([cotes2020#1690](cotes2020#1690)) ([cd37f63](cotes2020@cd37f63)) * prevent footnote back arrow from becoming an emoji ([cotes2020#1716](cotes2020#1716)) ([8608147](cotes2020@8608147)) * **pwa:** skip range requests in service worker ([cotes2020#1672](cotes2020#1672)) ([76d58fe](cotes2020@76d58fe)) * search result prompt is empty ([cotes2020#1583](cotes2020#1583)) ([8a2afae](cotes2020@8a2afae)) * use `https` for Weibo sharing URL ([cotes2020#1612](cotes2020#1612)) ([8e5fbb7](cotes2020@8e5fbb7)) ### Improvements * improve <hr> visibility in dark mode ([cotes2020#1565](cotes2020#1565)) ([4ddd5c4](cotes2020@4ddd5c4)) * lean bootstrap javascript ([cotes2020#1734](cotes2020#1734)) ([ddb48ed](cotes2020@ddb48ed)) * rename comment setting parameter ([cotes2020#1563](cotes2020#1563)) ([f8390d4](cotes2020@f8390d4)) * replace jQuery with Vanilla JS ([cotes2020#1681](cotes2020#1681)) ([fe7afa3](cotes2020@fe7afa3)) * simplify mode toggle script ([cotes2020#1692](cotes2020#1692)) ([d4a6d64](cotes2020@d4a6d64)) * tree shaking Bootstrap CSS ([cotes2020#1736](cotes2020#1736)) ([363a3d9](cotes2020@363a3d9)) ### Changes * optimize the resource hints ([cotes2020#1717](cotes2020#1717)) ([dcb0add](cotes2020@dcb0add)) * rename media-url file and related parameters ([cotes2020#1651](cotes2020#1651)) ([9f8aeaa](cotes2020@9f8aeaa))

kungfux requested changes Mar 25, 2024

View reviewed changes

cotes2020 reviewed Mar 26, 2024

View reviewed changes

kungfux requested changes Mar 31, 2024

View reviewed changes

kungfux requested changes Apr 2, 2024

View reviewed changes

kungfux approved these changes Apr 2, 2024

View reviewed changes

cotes2020 reviewed Apr 2, 2024

View reviewed changes

_includes/embed/audio.html Show resolved Hide resolved

cotes2020 changed the title ~~feat(embed): support audio and video tag with multi sources~~ feat(media): support audio and video tag with multi sources Apr 2, 2024

MrMurdock11 added 7 commits April 3, 2024 05:39

feat(embed): support audio and video tag with multi sources

f17d6d3

chore(embed): rename filenames

566ec6e

chore(post): update information in documentation

a38a611

chore(embed): implement all code review suggestions

68099e7

chore(embed): remove many include calls and use instead data

f5fbb57

chore(embed): change extnames prop to types and update documentation

9850488

chore(embed): extend media list, remove img_path from video and typo fix

e257438

cotes2020 force-pushed the feature/support-audio-with-multi-sources branch from 034ab5a to e257438 Compare April 2, 2024 21:39

cotes2020 requested changes Apr 3, 2024

View reviewed changes

MrMurdock11 added 2 commits April 4, 2024 15:15

chore(media): change media_type prop, typo fix, refactor templates

9e0ae20

chore(media): change push method to prepend for types

a2f6cc7

cotes2020 requested changes Apr 4, 2024

View reviewed changes

_includes/embed/video.html Outdated Show resolved Hide resolved

chore(media): change the sources render implementation

e83bdce

cotes2020 approved these changes Apr 4, 2024

View reviewed changes

cotes2020 merged commit 23be416 into cotes2020:master Apr 4, 2024
6 checks passed

MrMurdock11 deleted the feature/support-audio-with-multi-sources branch April 4, 2024 17:03

MrMurdock11 mentioned this pull request Apr 5, 2024

refactor: rename img-url to media-url and site.img_cdn to site.cdn #1651

Merged

5 tasks

github-actions bot added the released label May 11, 2024

kungfux mentioned this pull request May 13, 2024

Use media_subpath for media embed #1745

Merged

1 task

kimbob13 pushed a commit to kimbob13/kimbob13.github.io that referenced this pull request May 25, 2024

feat(media): support audio and video tag with multi sources (cotes202…

7feb286

…0#1618)

gudtldn pushed a commit to gudtldn/gudtldn.github.io that referenced this pull request Jul 26, 2024

feat(media): support audio and video tag with multi sources (cotes202…

b2bf371

…0#1618)

thejae-u pushed a commit to thejae-u/thejae-u.github.io that referenced this pull request Oct 16, 2024

feat(media): support audio and video tag with multi sources (cotes202…

af54e5c

…0#1618)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(media): support audio and video tag with multi sources #1618

feat(media): support audio and video tag with multi sources #1618

MrMurdock11 commented Mar 18, 2024

kungfux left a comment

cotes2020 left a comment

MrMurdock11 commented Mar 26, 2024 •

edited

Loading

cotes2020 commented Mar 26, 2024

MrMurdock11 commented Mar 27, 2024

kungfux left a comment

kungfux left a comment

kungfux commented Apr 3, 2024

cotes2020 commented Apr 3, 2024

MrMurdock11 commented Apr 3, 2024

kungfux commented Apr 3, 2024

cotes2020 commented Apr 3, 2024

MrMurdock11 commented Apr 4, 2024

cotes2020 left a comment

github-actions bot commented May 11, 2024

feat(media): support audio and video tag with multi sources #1618

feat(media): support audio and video tag with multi sources #1618

Conversation

MrMurdock11 commented Mar 18, 2024

Type of change

Description

kungfux left a comment

Choose a reason for hiding this comment

cotes2020 left a comment

Choose a reason for hiding this comment

MrMurdock11 commented Mar 26, 2024 • edited Loading

cotes2020 commented Mar 26, 2024

MrMurdock11 commented Mar 27, 2024

kungfux left a comment

Choose a reason for hiding this comment

kungfux left a comment

Choose a reason for hiding this comment

kungfux commented Apr 3, 2024

cotes2020 commented Apr 3, 2024

MrMurdock11 commented Apr 3, 2024

kungfux commented Apr 3, 2024

cotes2020 commented Apr 3, 2024

MrMurdock11 commented Apr 4, 2024

cotes2020 left a comment

Choose a reason for hiding this comment

github-actions bot commented May 11, 2024

MrMurdock11 commented Mar 26, 2024 •

edited

Loading