From f17d6d3824e1bca0863f203a9236b783fd447ad9 Mon Sep 17 00:00:00 2001 From: Azamat Mambetov Date: Mon, 18 Mar 2024 13:28:49 +0000 Subject: [PATCH 01/10] feat(embed): support audio and video tag with multi sources --- _includes/convert_media_type.html | 13 +++++++++++++ _includes/embed/audio.html | 20 ++++++++++++++++++++ _includes/embed/video.html | 7 ++++++- _includes/multi_sources.html | 26 ++++++++++++++++++++++++++ _sass/addon/commons.scss | 7 +++++++ 5 files changed, 72 insertions(+), 1 deletion(-) create mode 100644 _includes/convert_media_type.html create mode 100644 _includes/embed/audio.html create mode 100644 _includes/multi_sources.html diff --git a/_includes/convert_media_type.html b/_includes/convert_media_type.html new file mode 100644 index 00000000000..6de32c3fca3 --- /dev/null +++ b/_includes/convert_media_type.html @@ -0,0 +1,13 @@ +{% assign media_type_extension = include.type %} +{% case media_type_extension %} + {% when 'mp3' %} + {{- 'mpeg' -}} + {% when 'mov' %} + {{- 'quicktime' -}} + {% when 'avi' %} + {{- 'x-msvideo' -}} + {% when 'mkv' %} + {{- 'x-matroska' -}} + {% else %} + {{- media_type_extension -}} +{% endcase %} diff --git a/_includes/embed/audio.html b/_includes/embed/audio.html new file mode 100644 index 00000000000..4ee1639ccde --- /dev/null +++ b/_includes/embed/audio.html @@ -0,0 +1,20 @@ +{% assign supported_audio_extensions = 'mp3|ogg|wav|aac|webm|flac' %} + +{% assign additional_types = include.additional_types | default: '' | strip | split: '|' %} + +{% assign extensions = supported_audio_extensions | split: '|' %} +{% assign src = include.src | strip %} +{% unless src contains '://' %} + {%- capture src -%} + {% include img-url.html src=src %} + {%- endcapture -%} +{% endunless %} + +

+ + {% if include.title %} + {{ include.title }} + {% endif %} +

diff --git a/_includes/embed/video.html b/_includes/embed/video.html index f0389385f26..d9a941a4472 100644 --- a/_includes/embed/video.html +++ b/_includes/embed/video.html @@ -1,6 +1,10 @@ +{% assign supported_audio_extensions = 'mp4|ogg|webm|mov|avi|mkv' %} + {% assign video_url = include.src %} {% assign poster_url = include.poster %} +{% assign additional_types = include.additional_types | default: '' | strip | split: '|' %} +{% assign extensions = supported_audio_extensions | split: '|' %} {% unless video_url contains '://' %} {%- capture video_url -%} {% include img-url.html src=video_url img_path=page.img_path %} @@ -31,7 +35,8 @@ {% endif %}

-

{% if include.title %} {{ include.title }} diff --git a/_includes/embed/video.html b/_includes/embed/video.html index d9a941a4472..1b85cf51b8d 100644 --- a/_includes/embed/video.html +++ b/_includes/embed/video.html @@ -1,10 +1,9 @@ -{% assign supported_audio_extensions = 'mp4|ogg|webm|mov|avi|mkv' %} +{% assign supported_video_extensions = 'mp4|ogg|webm|mov|avi|mkv' %} {% assign video_url = include.src %} {% assign poster_url = include.poster %} {% assign additional_types = include.additional_types | default: '' | strip | split: '|' %} -{% assign extensions = supported_audio_extensions | split: '|' %} {% unless video_url contains '://' %} {%- capture video_url -%} {% include img-url.html src=video_url img_path=page.img_path %} @@ -36,8 +35,15 @@

- {{ include.title }} + {% if include.title %} + {{ include.title }} + {% endif %}

diff --git a/_includes/multi_sources.html b/_includes/multi-sources.html similarity index 76% rename from _includes/multi_sources.html rename to _includes/multi-sources.html index fd5e03d363a..c317d2aa1fa 100644 --- a/_includes/multi_sources.html +++ b/_includes/multi-sources.html @@ -1,14 +1,15 @@ {% assign tag = include.tag %} {% assign src = include.src %} {% assign additional_types = include.additional_types %} -{% assign extensions = include.extensions %} +{% assign supported_extensions = include.supported_extensions %} +{% assign extensions = supported_extensions | split: '|' %} {% assign path_struct = src | split: '.' %} {% assign base_path = path_struct.first %} {% assign original_media_type = path_struct.last | downcase %} {% capture media_type %} - {% include convert_media_type.html type=original_media_type %} + {% include convert-media-type.html type=original_media_type %} {% endcapture %} @@ -16,7 +17,7 @@ {% if extensions contains type %} {% assign file_extension = '.' | append: type %} {% capture media_type %} - {% include convert_media_type.html type=type %} + {% include convert-media-type.html type=type %} {% endcapture %} {% endif %} From a38a61197f344bd972c70fe12e878108048b4174 Mon Sep 17 00:00:00 2001 From: Azamat Mambetov Date: Mon, 18 Mar 2024 18:06:16 +0000 Subject: [PATCH 03/10] chore(post): update information in documentation --- _posts/2019-08-08-write-a-new-post.md | 48 +++++++++++++++++++++++++-- 1 file changed, 46 insertions(+), 2 deletions(-) diff --git a/_posts/2019-08-08-write-a-new-post.md b/_posts/2019-08-08-write-a-new-post.md index aab434c9fab..d020becc5c9 100644 --- a/_posts/2019-08-08-write-a-new-post.md +++ b/_posts/2019-08-08-write-a-new-post.md @@ -472,13 +472,57 @@ You can also specify additional attributes for the embedded video file. Here is - `autoplay=true` - video automatically begins to play back as soon as it can - `loop=true` - automatically seek back to the start upon reaching the end of the video - `muted=true` - audio will be initially silenced +- `additional_types` - specify the extensions of additional video formats separated by |. Ensure these files exist in the same directory as your primary video file. Consider an example utilizing all of the above: ```liquid -{% include embed/video.html src='video.mp4' poster='poster.png' title='Demo video' - autoplay=true loop=true muted=true %} +{% + include embed/video.html + src='/path/to/video/video.mp4' + additional_types='ogg|mov' + poster='poster.png' + title='Demo video' + autoplay=true + loop=true + muted=true +%} ``` +## Audio + +### Basic Audio Embedding + +To embed an audio file, use the following code snippet: + +```liquid +{% include embed/audio.html src='/path/to/audio/audio.mp3' title='Demo audio' %} +``` +- `src`: The path to your audio file. +- `title`: A descriptive title for your audio content. + +### Adding Additional Audio Formats + +For broader compatibility across browsers and devices, it's a good idea to provide your audio in multiple formats. You can specify additional audio formats using the additional_types attribute. + +```liquid +{% include embed/audio.html src='/path/to/audio/audio.mp3' additional_types='ogg|wav|aac' title='Demo audio' %} +``` +- `additional_types`: Specify the extensions of additional audio formats separated by |. Ensure these files exist in the same directory as your primary audio file. + +### Supported Audio Extensions + +|Extension|Media Type for HTML Audio| +| ----------- | ----------- | +|.mp3|audio/mpeg| +|.wav|audio/wav| +|.ogg|audio/ogg| +|.aac|audio/aac| +|.webm|audio/webm| +|.flac|audio/flac| + +> It's not recommended to host audio files in `assets` folder as they cannot be cached by PWA and may cause issues. +> Instead, use CDN to host audio files. Alternatively, use a separate folder that is excluded from PWA (see `pwa.deny_paths` setting in `_config.yml`). +{: .prompt-warning } ## Learn More From 68099e724125018dcc7d847f947927ed81ebb3e3 Mon Sep 17 00:00:00 2001 From: Azamat Mambetov Date: Tue, 26 Mar 2024 15:49:05 +0000 Subject: [PATCH 04/10] chore(embed): implement all code review suggestions --- _includes/embed/audio.html | 9 +++---- _includes/{ => embed}/convert-media-type.html | 6 ++--- _includes/embed/multi-sources.html | 20 ++++++++++++++ _includes/embed/source.html | 8 ++++++ _includes/embed/video.html | 9 +++---- _includes/multi-sources.html | 27 ------------------- _posts/2019-08-08-write-a-new-post.md | 25 +++++++---------- 7 files changed, 46 insertions(+), 58 deletions(-) rename _includes/{ => embed}/convert-media-type.html (63%) create mode 100644 _includes/embed/multi-sources.html create mode 100644 _includes/embed/source.html delete mode 100644 _includes/multi-sources.html diff --git a/_includes/embed/audio.html b/_includes/embed/audio.html index 8fa12ae0640..b5caa5ea58f 100644 --- a/_includes/embed/audio.html +++ b/_includes/embed/audio.html @@ -1,6 +1,4 @@ -{% assign supported_audio_extensions = 'mp3|ogg|wav|aac|webm|flac' %} - -{% assign additional_types = include.additional_types | default: '' | strip | split: '|' %} +{% assign extnames = include.extnames | default: '' | strip | split: '|' %} {% assign src = include.src | strip %} {% unless src contains '://' %} @@ -12,11 +10,10 @@

{% if include.title %} diff --git a/_includes/convert-media-type.html b/_includes/embed/convert-media-type.html similarity index 63% rename from _includes/convert-media-type.html rename to _includes/embed/convert-media-type.html index 6de32c3fca3..cd43b7a78e3 100644 --- a/_includes/convert-media-type.html +++ b/_includes/embed/convert-media-type.html @@ -1,5 +1,5 @@ -{% assign media_type_extension = include.type %} -{% case media_type_extension %} +{% assign extname = include.extname %} +{% case extname %} {% when 'mp3' %} {{- 'mpeg' -}} {% when 'mov' %} @@ -9,5 +9,5 @@ {% when 'mkv' %} {{- 'x-matroska' -}} {% else %} - {{- media_type_extension -}} + {{- extname -}} {% endcase %} diff --git a/_includes/embed/multi-sources.html b/_includes/embed/multi-sources.html new file mode 100644 index 00000000000..331e7ae994d --- /dev/null +++ b/_includes/embed/multi-sources.html @@ -0,0 +1,20 @@ +{% assign tag = include.tag %} +{% assign src = include.src %} +{% assign extnames = include.extnames %} + +{% assign parts = src | split: '/' %} +{% assign filename = parts | last %} +{% assign extname = filename | split: '.' | last %} +{% assign basename = filename | split: '.' | pop | join: '.' %} +{% assign path = parts | pop | join: '/' %} + +{% include embed/source.html src=src tag=tag extname=extname %} + +{% for extra_extname in extnames %} + {% assign filename = basename | append: '.' | append: extra_extname %} + {% assign extra_src = path | append: '/' | append: filename %} + {% include embed/source.html src=extra_src tag=tag extname=extra_extname %} +{% endfor %} + +Your browser does not support the {{ tag }} tag. Here is a +link to the {{ tag }} file instead. diff --git a/_includes/embed/source.html b/_includes/embed/source.html new file mode 100644 index 00000000000..89fb27873b3 --- /dev/null +++ b/_includes/embed/source.html @@ -0,0 +1,8 @@ +{% assign src = include.src %} +{% assign tag = include.tag %} +{% assign extname = include.extname %} + +{% capture media_type %} + {% include embed/convert-media-type.html extname=extname %} +{% endcapture %} + diff --git a/_includes/embed/video.html b/_includes/embed/video.html index 1b85cf51b8d..e5afc7c5770 100644 --- a/_includes/embed/video.html +++ b/_includes/embed/video.html @@ -1,8 +1,6 @@ -{% assign supported_video_extensions = 'mp4|ogg|webm|mov|avi|mkv' %} - {% assign video_url = include.src %} {% assign poster_url = include.poster %} -{% assign additional_types = include.additional_types | default: '' | strip | split: '|' %} +{% assign extnames = include.extnames | default: '' | strip | split: '|' %} {% unless video_url contains '://' %} {%- capture video_url -%} @@ -36,11 +34,10 @@

{% if include.title %} diff --git a/_includes/multi-sources.html b/_includes/multi-sources.html deleted file mode 100644 index c317d2aa1fa..00000000000 --- a/_includes/multi-sources.html +++ /dev/null @@ -1,27 +0,0 @@ -{% assign tag = include.tag %} -{% assign src = include.src %} -{% assign additional_types = include.additional_types %} -{% assign supported_extensions = include.supported_extensions %} - -{% assign extensions = supported_extensions | split: '|' %} -{% assign path_struct = src | split: '.' %} -{% assign base_path = path_struct.first %} -{% assign original_media_type = path_struct.last | downcase %} - -{% capture media_type %} - {% include convert-media-type.html type=original_media_type %} -{% endcapture %} - - -{% for type in additional_types %} - {% if extensions contains type %} - {% assign file_extension = '.' | append: type %} - {% capture media_type %} - {% include convert-media-type.html type=type %} - {% endcapture %} - - {% endif %} -{% endfor %} - -Your browser does not support the {{ tag }} tag. Here is a -link to the {{ tag }} file instead. diff --git a/_posts/2019-08-08-write-a-new-post.md b/_posts/2019-08-08-write-a-new-post.md index d020becc5c9..ed031e5d94d 100644 --- a/_posts/2019-08-08-write-a-new-post.md +++ b/_posts/2019-08-08-write-a-new-post.md @@ -472,7 +472,7 @@ You can also specify additional attributes for the embedded video file. Here is - `autoplay=true` - video automatically begins to play back as soon as it can - `loop=true` - automatically seek back to the start upon reaching the end of the video - `muted=true` - audio will be initially silenced -- `additional_types` - specify the extensions of additional video formats separated by |. Ensure these files exist in the same directory as your primary video file. +- `extnames` - specify the extensions of additional video formats separated by `|`. Ensure these files exist in the same directory as your primary video file. Consider an example utilizing all of the above: @@ -480,7 +480,7 @@ Consider an example utilizing all of the above: {% include embed/video.html src='/path/to/video/video.mp4' - additional_types='ogg|mov' + extnames='ogg|mov' poster='poster.png' title='Demo video' autoplay=true @@ -488,6 +488,10 @@ Consider an example utilizing all of the above: muted=true %} ``` +> It's not recommended to host video files in `assets` folder as they cannot be cached by PWA and may cause issues. +> Instead, use CDN to host video files. Alternatively, use a separate folder that is excluded from PWA (see `pwa.deny_paths` setting in `_config.yml`). +{: .prompt-warning } + ## Audio ### Basic Audio Embedding @@ -502,23 +506,12 @@ To embed an audio file, use the following code snippet: ### Adding Additional Audio Formats -For broader compatibility across browsers and devices, it's a good idea to provide your audio in multiple formats. You can specify additional audio formats using the additional_types attribute. +For broader compatibility across browsers and devices, it's a good idea to provide your audio in multiple formats. You can specify additional audio formats using the extnames attribute. ```liquid -{% include embed/audio.html src='/path/to/audio/audio.mp3' additional_types='ogg|wav|aac' title='Demo audio' %} +{% include embed/audio.html src='/path/to/audio/audio.mp3' extnames='ogg|wav|aac' title='Demo audio' %} ``` -- `additional_types`: Specify the extensions of additional audio formats separated by |. Ensure these files exist in the same directory as your primary audio file. - -### Supported Audio Extensions - -|Extension|Media Type for HTML Audio| -| ----------- | ----------- | -|.mp3|audio/mpeg| -|.wav|audio/wav| -|.ogg|audio/ogg| -|.aac|audio/aac| -|.webm|audio/webm| -|.flac|audio/flac| +- `extnames`: Specify the extensions of additional audio formats separated by `|`. Ensure these files exist in the same directory as your primary audio file. > It's not recommended to host audio files in `assets` folder as they cannot be cached by PWA and may cause issues. > Instead, use CDN to host audio files. Alternatively, use a separate folder that is excluded from PWA (see `pwa.deny_paths` setting in `_config.yml`). From f5fbb5711b3eb9afe24a9c4099881e6a65a0c5df Mon Sep 17 00:00:00 2001 From: Azamat Mambetov Date: Wed, 27 Mar 2024 00:22:46 +0000 Subject: [PATCH 05/10] chore(embed): remove many include calls and use instead data --- _data/media.yml | 8 +++++ _includes/embed/audio.html | 39 +++++++++++++++++++------ _includes/embed/convert-media-type.html | 13 --------- _includes/embed/multi-sources.html | 20 ------------- _includes/embed/source.html | 8 ----- _includes/embed/video.html | 37 ++++++++++++++++++----- 6 files changed, 67 insertions(+), 58 deletions(-) create mode 100644 _data/media.yml delete mode 100644 _includes/embed/convert-media-type.html delete mode 100644 _includes/embed/multi-sources.html delete mode 100644 _includes/embed/source.html diff --git a/_data/media.yml b/_data/media.yml new file mode 100644 index 00000000000..862f2d55c7b --- /dev/null +++ b/_data/media.yml @@ -0,0 +1,8 @@ +- extension: mp3 + mimeType: mpeg +- extension: mov + mimeType: quicktime +- extension: avi + mimeType: x-msvideo +- extension: mkv + mimeType: x-matroska diff --git a/_includes/embed/audio.html b/_includes/embed/audio.html index b5caa5ea58f..c1f63a1bd00 100644 --- a/_includes/embed/audio.html +++ b/_includes/embed/audio.html @@ -1,6 +1,7 @@ +{% assign src = include.src | strip %} +{% assign title = include.title | strip %} {% assign extnames = include.extnames | default: '' | strip | split: '|' %} -{% assign src = include.src | strip %} {% unless src contains '://' %} {%- capture src -%} {% include img-url.html src=src %} @@ -9,14 +10,34 @@

- {% if include.title %} - {{ include.title }} + {% if title %} + {{ title }} {% endif %}

diff --git a/_includes/embed/convert-media-type.html b/_includes/embed/convert-media-type.html deleted file mode 100644 index cd43b7a78e3..00000000000 --- a/_includes/embed/convert-media-type.html +++ /dev/null @@ -1,13 +0,0 @@ -{% assign extname = include.extname %} -{% case extname %} - {% when 'mp3' %} - {{- 'mpeg' -}} - {% when 'mov' %} - {{- 'quicktime' -}} - {% when 'avi' %} - {{- 'x-msvideo' -}} - {% when 'mkv' %} - {{- 'x-matroska' -}} - {% else %} - {{- extname -}} -{% endcase %} diff --git a/_includes/embed/multi-sources.html b/_includes/embed/multi-sources.html deleted file mode 100644 index 331e7ae994d..00000000000 --- a/_includes/embed/multi-sources.html +++ /dev/null @@ -1,20 +0,0 @@ -{% assign tag = include.tag %} -{% assign src = include.src %} -{% assign extnames = include.extnames %} - -{% assign parts = src | split: '/' %} -{% assign filename = parts | last %} -{% assign extname = filename | split: '.' | last %} -{% assign basename = filename | split: '.' | pop | join: '.' %} -{% assign path = parts | pop | join: '/' %} - -{% include embed/source.html src=src tag=tag extname=extname %} - -{% for extra_extname in extnames %} - {% assign filename = basename | append: '.' | append: extra_extname %} - {% assign extra_src = path | append: '/' | append: filename %} - {% include embed/source.html src=extra_src tag=tag extname=extra_extname %} -{% endfor %} - -Your browser does not support the {{ tag }} tag. Here is a -link to the {{ tag }} file instead. diff --git a/_includes/embed/source.html b/_includes/embed/source.html deleted file mode 100644 index 89fb27873b3..00000000000 --- a/_includes/embed/source.html +++ /dev/null @@ -1,8 +0,0 @@ -{% assign src = include.src %} -{% assign tag = include.tag %} -{% assign extname = include.extname %} - -{% capture media_type %} - {% include embed/convert-media-type.html extname=extname %} -{% endcapture %} - diff --git a/_includes/embed/video.html b/_includes/embed/video.html index e5afc7c5770..9975ec4c24f 100644 --- a/_includes/embed/video.html +++ b/_includes/embed/video.html @@ -1,4 +1,5 @@ {% assign video_url = include.src %} +{% assign title = include.title %} {% assign poster_url = include.poster %} {% assign extnames = include.extnames | default: '' | strip | split: '|' %} @@ -33,14 +34,34 @@

- {% if include.title %} - {{ include.title }} + {% if title %} + {{ title }} {% endif %}

From 98504884e5d844994d4418ed484b836dddf625a7 Mon Sep 17 00:00:00 2001 From: Azamat Mambetov Date: Sun, 31 Mar 2024 20:43:22 +0000 Subject: [PATCH 06/10] chore(embed): change extnames prop to types and update documentation --- _includes/embed/audio.html | 16 +++++++------- _includes/embed/video.html | 20 +++++++++--------- _posts/2019-08-08-write-a-new-post.md | 30 ++++++++++++++++----------- 3 files changed, 36 insertions(+), 30 deletions(-) diff --git a/_includes/embed/audio.html b/_includes/embed/audio.html index c1f63a1bd00..d2016c3f067 100644 --- a/_includes/embed/audio.html +++ b/_includes/embed/audio.html @@ -1,6 +1,6 @@ {% assign src = include.src | strip %} {% assign title = include.title | strip %} -{% assign extnames = include.extnames | default: '' | strip | split: '|' %} +{% assign types = include.types | default: '' | strip | split: '|' %} {% unless src contains '://' %} {%- capture src -%} @@ -12,25 +12,25 @@