Enhance Bilibili video support (redo of mmistakes#2522) (mmistakes#2599)

* Enhance support for bilibili videos in responsive video helper, and add corresponding doc * Apply @iBug's review in mmistakes#2522 * Fix danmaku in page hero video * Update video to use case..when for iframe src * Update CHANGELOG and history Co-authored-by: Anran <51769728+ALeafWolf@users.noreply.github.com> Co-authored-by: Michael Rose <mmistakes@users.noreply.github.com>
chukycheese · Sep 18, 2023 · 3f3b970 · 3f3b970
1 parent ca4bf33
commit 3f3b970
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 16 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,6 +10,7 @@
 - Update link to wtfpl license in README. [#2571](https://github.com/mmistakes/minimal-mistakes/pull/2571)
 - Ignore teaser headline in table of contents when including posts list in another page. [#2558](https://github.com/mmistakes/minimal-mistakes/pull/2558)
 - Replace Font Awesome Kits with CSS from jsDelivr CDN. [#2583](https://github.com/mmistakes/minimal-mistakes/pull/2583)
+- Add `danmaku` option to Bilibili video provider and add corresponding documentation/ [#2599](https://github.com/mmistakes/minimal-mistakes/pull/2599)
 
 ## [4.19.3](https://github.com/mmistakes/minimal-mistakes/releases/tag/4.19.3)
 

diff --git a/_includes/page__hero_video.html b/_includes/page__hero_video.html
@@ -1,4 +1,2 @@
-{% capture video_id %}{{ page.header.video.id }}{% endcapture %}
-{% capture video_provider %}{{ page.header.video.provider }}{% endcapture %}
-
-{% include video id=video_id provider=video_provider %}
+{% assign video = page.header.video %}
+{% include video id=video.id provider=video.provider danmaku=video.danmaku %}
diff --git a/_includes/video b/_includes/video
@@ -1,15 +1,24 @@
 {% capture video_id %}{{ include.id }}{% endcapture %}
 {% capture video_provider %}{{ include.provider }}{% endcapture %}
+{% capture video_danmaku %}{{ include.danmaku | default: 0 }}{% endcapture %}
+
+{% capture video_src %}
+  {% case video_provider %}
+  {% when "vimeo" %}
+    https://player.vimeo.com/video/{{ video_id }}?dnt=true
+  {% when "youtube" %}
+    https://www.youtube-nocookie.com/embed/{{ video_id }}
+  {% when "google-drive" %}
+    https://drive.google.com/file/d/{{ video_id }}/preview
+  {% when "bilibili" %}
+    https://player.bilibili.com/player.html?bvid={{ video_id }}&page=1&as_wide=1&high_quality=1&danmaku={{ video_danmaku }}
+  {% endcase %}
+{% endcapture %}
+{% assign video_src = video_src | strip %}
 
 <!-- Courtesy of embedresponsively.com //-->
-<div class="responsive-video-container">
-{% if video_provider == "vimeo" %}
-  <iframe src="https://player.vimeo.com/video/{{ video_id }}?dnt=true" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
-{% elsif video_provider == "youtube" %}
-  <iframe src="https://www.youtube-nocookie.com/embed/{{ video_id }}" frameborder="0" allowfullscreen></iframe>
-{% elsif video_provider == "google-drive" %}
-  <iframe src="https://drive.google.com/file/d/{{ video_id }}/preview" frameborder="0" allowfullscreen></iframe>
-{% elsif video_provider == "bilibili" %}
-  <iframe src="https://player.bilibili.com/player.html?bvid={{ video_id }}&page=1&as_wide=1&high_quality=1&danmaku=0" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>
-{% endif %}
-</div>
+{% unless video_src == "" %}
+  <div class="responsive-video-container">
+    <iframe src="{{ video_src }}" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowfullscreen></iframe>
+  </div>
+{% endunless %}
diff --git a/docs/_docs/14-helpers.md b/docs/_docs/14-helpers.md
@@ -179,6 +179,7 @@ Embed a video from YouTube, Vimeo, Google Drive, or bilibili that responsively s
 | ---------- | ------------ | ---------------------------------------------------------- |
 | `id`       | **Required** | ID of the video                                            |
 | `provider` | **Required** | Hosting provider of the video: `youtube`, `vimeo`, `google-drive`, or `bilibili` |
+| `danmaku`  | Optional     | Bilibili only, [details below](#Bilibili)                  |
 
 ### YouTube
 
@@ -240,6 +241,30 @@ header:
     provider: google-drive
 ```
 
+### Bilibili
+
+To embed the following Bilibili video at url `https://www.bilibili.com/video/BV1E7411e7hC` into a post or page's main content you'd use:
+
+```liquid
+{% raw %}{% include video id="BV1E7411e7hC" provider="bilibili" %}{% endraw %}
+```
+
+If you want to enable danmaku (弹幕) for the embeded video, which is disabled by default, you can supply an additional parameter `danmaku="1"` as shown below: 
+
+```liquid
+{% raw %}{% include video id="BV1E7411e7hC" provider="bilibili" danmaku="1" %}{% endraw %}
+```
+
+To embed it as a video header you'd use the following YAML Front Matter:
+
+```yaml
+header:
+  video:
+    id: BV1E7411e7hC
+    provider: bilibili
+    danmaku: 1
+```
+
 ## Table of contents
 
 Auto-generated table of contents list for your posts and pages can be enabled using two methods.

diff --git a/docs/_docs/18-history.md b/docs/_docs/18-history.md
@@ -5,7 +5,7 @@ permalink: /docs/history/
 excerpt: "Change log of enhancements and bug fixes made to the theme."
 sidebar:
   nav: docs
-last_modified_at: 2020-07-22T15:36:16-04:00
+last_modified_at: 2020-07-11T12:31:08+08:00
 toc: false
 ---
 
@@ -21,6 +21,7 @@ toc: false
 - Update link to wtfpl license in README. [#2571](https://github.com/mmistakes/minimal-mistakes/pull/2571)
 - Ignore teaser headline in table of contents when including posts list in another page. [#2558](https://github.com/mmistakes/minimal-mistakes/pull/2558)
 - Replace Font Awesome Kits with CSS from jsDelivr CDN. [#2583](https://github.com/mmistakes/minimal-mistakes/pull/2583)
+- Add `danmaku` option to Bilibili video provider and add corresponding documentation/ [#2599](https://github.com/mmistakes/minimal-mistakes/pull/2599)
 
 ## [4.19.3](https://github.com/mmistakes/minimal-mistakes/releases/tag/4.19.3)