bible270 1.7.3 → 1.8.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1fe74d08b4d06ebec2cb3d91955e43f0fc653ffc6bae931c54593153f915663e
-  data.tar.gz: cadca46de142316a8b80aa68ebc6c560e2da54697d990946fe0e2ffcaa14b83d
+  metadata.gz: d8847a6c76ffa4c376eba0f756941756b7bee81ef73006db8eed81dcc536243c
+  data.tar.gz: af808d62015dcae17eb0be8811f20d3f2363854f34416f6e431b55737be34c2d
 SHA512:
-  metadata.gz: 69369323563ab2c5117ef7c2a59fc6b4d66924ddefee34bc72e53e8769abd48dce6043d630fa446d95f201a861d7ded6d18402d2d4da51c222517e9e00579a72
-  data.tar.gz: 0a4c6d9b25fd2bc9f01a0290e661b7ccd6072408e2a9a83b7a1f9c417313a2427655cb6b3b9a406bc311459e40b8aa437b8442fe4bfa84b7b69e71d02b34215c
+  metadata.gz: 0b7794ad79750aa7c6111ffd5662780501690144b675bef3cf6e74cfac042c5e74f0b21ebac9c24bdf582001605db82a4d3d2bbf79f88220478d1ccee828ae1d
+  data.tar.gz: 29ed3d365cdf2dbe514a900d33bbf2db1a100270c8edf5db274f89496f3e29960acd1973f2484c71e7225beb27ca0f702bbedf7d17408ccba5ad1ea1f6c2b1b6

data/CHANGELOG.md

@@ -6,11 +6,13 @@ All notable changes to bible270. Format follows [Keep a Changelog](https://keepa
 
 ### Added
 
+- add a YouTube Video formatting button for reflections and replies, with optional video names, validated click-to-load players in previews and web views, privacy tooltips, new-tab YouTube links, no autoplay or remote thumbnails, and ordinary video links in notification emails
 - show Blue Letter Bible Scripture popups when readers hover over references in rendered reflections, replies, and Markdown previews; popups follow each reader's selected translation, handle original-language choices by testament, and rescan content added by Turbo without forcing a page reload
 - let administrators sort the reader list and Reader Stats report by most or least recent reading activity, while keeping readers with no activity at the end
 
 ### Changed
 
+- shorten the Community introduction and link signed-in readers to today's Day, make recent reflections editable from My Progress, expand the 270-day grids by default on reader and Profile pages, and move Admin completions below translation settings
 - link reader email addresses directly to email composition and link recent-activity day labels to their Day pages with passage tooltips in Admin
 - include each reader's last reading-activity date in the `bible270:readers:list` and Admin Reader Stats reports
 

data/README.md

@@ -287,7 +287,7 @@ their previous visit. Reflection and reply drafts are retained for up to 30 days
 cleared after a successful post. On a shared device, clearing browser storage also removes saved drafts.
 Typing `@` in the composer offers up to five unambiguous reader handles; manual mentions continue to
 work without JavaScript. A quiet **Formatting** disclosure opens a toolbar for bold, italic,
-quotations, bulleted and numbered lists, and links without requiring readers to know Markdown syntax.
+quotations, bulleted and numbered lists, links, and YouTube videos without requiring readers to know Markdown syntax.
 A separate **Preview** control checks the current draft through the same server-side sanitizer used
 after posting; formatting tools stay out of sight until requested. The source remains
 editable in the ordinary textarea, drafts preserve its format, and all rendered HTML is restricted to that small safe
@@ -295,6 +295,31 @@ set. Existing reflections remain literal plain text until a reader intentionally
 them. Upgrading hosts must copy and run migration `20260101000021`, which records whether each body is
 plain text or Markdown; until then, the composer safely falls back to plain text.
 
+The **Video** button accepts YouTube watch, share (`youtu.be`), Shorts, live, and embed URLs,
+then asks for an optional video name. Leave it blank for **View video**, or name it to show
+**View video ‘Name’**. The name is stored as the link text and is also used in notification emails.
+It inserts an explicit Markdown link on its own paragraph, for example:
+
+```markdown
+[YouTube video](https://www.youtube.com/watch?v=aB3_dE-fG12 "bible270-video")
+```
+
+Preview and posted reflections/replies show a small **View video** card. No YouTube player or remote
+thumbnail is requested until the reader loads the video; the player uses `www.youtube-nocookie.com`
+and does not autoplay. Loading it shares the reader's IP address and request metadata with YouTube;
+privacy-enhanced mode does not make playback anonymous. The button tooltip reads “Loads player and
+shares data with YouTube”; the link tooltip reads “Opens YouTube in a new tab.” An **Open on YouTube** link opens in a new
+tab/window with `rel="nofollow ugc noopener"`, and remains available when JavaScript is disabled or
+the provider disallows embedding. Notification emails retain ordinary
+links, and unmarked links never become players automatically. Only validated YouTube URLs become
+cards; unsupported marked links remain links. No uploads, API keys, extra gems, or database migrations
+are needed for this feature. Shared links' start times and playlist parameters are not retained.
+
+Hosts using Content Security Policy must add `https://www.youtube-nocookie.com` to their existing
+`frame-src` directive. Do not replace the rest of the host's policy or broadly allow arbitrary frames.
+Hosts with a custom engine layout should also render `bible270/shared/video_embeds` once, alongside the
+other shared scripts, to enable click-to-load playback.
+
 When `config.mention_notifications` is enabled, each reader can request email for every new reflection
 and reply, only replies to their reflections and mentions of them, or none. Broad notifications are sent
 once with eligible subscribers in BCC; direct reply and mention notices remain individually addressed.
@@ -632,6 +657,7 @@ The engine's CSS rides in a partial its own layout renders. Using your layout? A
 ```bash
 bundle install
 bundle exec rake test
+node --test test/javascript/*.cjs
 bundle exec rubocop --cache false
 ```
 
@@ -643,6 +669,11 @@ subsequent balancing. Set `PARALLEL_WORKERS` to tune the worker count. Use
 `bundle exec rake test:serial` when a serial coverage run is specifically needed; it writes to the same
 project-local `coverage/` directory.
 
+The video UI tests use Node.js 22+ and its built-in test runner, with no npm dependencies. They run the
+actual toolbar/player scripts against a small mocked DOM and also run as a separate CI job. They do
+not contact YouTube; live playback should be checked in a browser on the deployed host, especially
+when a host supplies a Content Security Policy.
+
 ### Get an email link for local testing
 
 in the rails console: `rails c`

data/app/controllers/bible270/readers_controller.rb

@@ -6,6 +6,7 @@ module Bible270
       # Community is a directory of fellow readers, not a leaderboard. Keep the
       # order predictable without implying that progress determines standing.
       @readers = Reader.all.to_a.sort_by(&:sort_name)
+      @today_day = current_reader&.today_day
       @show_admin_progress = Bible270.config.admin?(current_reader)
       @days_completed = Reader.completed_days_by_id if @show_admin_progress
     end

data/app/helpers/bible270/plan_helper.rb

@@ -53,18 +53,18 @@ module Bible270
       end
     end
 
-    # Formats every reflection surface through the same sanitizer. Web views link
-    # resolved mentions; email can opt out because it has no mounted request path.
-    def b270_comment_body(comment, link_mentions: true)
+    # Formats every reflection surface through the same sanitizer. Emails opt out
+    # of interactive video cards and mention links requiring a mounted request path.
+    def b270_comment_body(comment, link_mentions: true, embed_videos: true)
       format = comment.rendered_body_format
       html = if link_mentions
                readers = Bible270::Reader.mentioned_in(comment.body)
-               Bible270::CommentFormatter.html(comment.body, format: format) do |handle|
+               Bible270::CommentFormatter.html(comment.body, format: format, embed_videos: embed_videos) do |handle|
                  reader = readers.find { |candidate| candidate.answers_to?(handle) }
                  reader_path(reader) if reader
                end
              else
-               Bible270::CommentFormatter.html(comment.body, format: format)
+               Bible270::CommentFormatter.html(comment.body, format: format, embed_videos: embed_videos)
              end
       html.html_safe
     end

data/app/views/bible270/admin/show.html.erb

@@ -113,27 +113,6 @@
      numbers and are not touched.</p>
 </div>
 
-<div class="b270-panel">
-  <h2 class="b270-subhead">Completions</h2>
-  <%= form_with url: admin_reader_through_path(@reader), method: :patch, class: "b270-startform" do %>
-    <label class="b270-field">
-      <span>Mark complete through day (0 clears everything)</span>
-      <%= number_field_tag :day, @days_completed, min: 0, max: Bible270::Plan::DAYS %>
-    </label>
-    <%= submit_tag 'Apply', class: 'b270-btn' %>
-  <% end %>
-  <p class="b270-hint">This also clears anything after that day, so it sets their progress exactly.</p>
-
-  <div class="b270-grid" style="margin-top:16px">
-    <% (1..Bible270::Plan::DAYS).each do |d| %>
-      <%= button_to d, admin_reader_day_path(@reader, d), method: :post,
-            class: b270_day_cell_classes(d, reader: @reader),
-            title: b270_day_readings(d),
-            form: { style: 'display:contents', id: "day-#{d}" } %>
-    <% end %>
-  </div>
-  <p class="b270-hint">Click a day to toggle it complete.</p>
-</div>
 
 <div class="b270-panel">
   <%= render "bible270/shared/reflections", comments: @comments, moderate: true %>
@@ -162,6 +141,28 @@
   <% end %>
 </div>
 
+<div class="b270-panel">
+  <h2 class="b270-subhead">Completions</h2>
+  <%= form_with url: admin_reader_through_path(@reader), method: :patch, class: "b270-startform" do %>
+    <label class="b270-field">
+      <span>Mark complete through day (0 clears everything)</span>
+      <%= number_field_tag :day, @days_completed, min: 0, max: Bible270::Plan::DAYS %>
+    </label>
+    <%= submit_tag 'Apply', class: 'b270-btn' %>
+  <% end %>
+  <p class="b270-hint">This also clears anything after that day, so it sets their progress exactly.</p>
+
+  <div class="b270-grid" style="margin-top:16px">
+    <% (1..Bible270::Plan::DAYS).each do |d| %>
+      <%= button_to d, admin_reader_day_path(@reader, d), method: :post,
+            class: b270_day_cell_classes(d, reader: @reader),
+            title: b270_day_readings(d),
+            form: { style: 'display:contents', id: "day-#{d}" } %>
+    <% end %>
+  </div>
+  <p class="b270-hint">Click a day to toggle it complete.</p>
+</div>
+
 <div class="b270-panel">
   <h2 class="b270-subhead">Remove</h2>
   <p class="b270-hint" style="margin-top:0">Deletes the reader together with every check-off and

data/app/views/bible270/comments/_editor.html.erb

@@ -32,6 +32,7 @@
             <button type="button" data-b270-markdown-action="bullet-list" aria-label="Format as a bulleted list" title="Bulleted list">• List</button>
             <button type="button" data-b270-markdown-action="number-list" aria-label="Format as a numbered list" title="Numbered list">1. List</button>
             <button type="button" data-b270-markdown-action="link" aria-label="Add a link" title="Link">Link</button>
+            <button type="button" data-b270-markdown-action="video" aria-label="Add a YouTube video" title="YouTube video">Video</button>
           </div>
         </div>
       </div>

data/app/views/bible270/notice_mailer/comment_notice.html.erb

@@ -10,7 +10,7 @@
       </p>
 
       <blockquote style="margin:0;padding:14px 16px;background:#ece6da;border-left:3px solid #a5812c;border-radius:8px;font-size:15px;line-height:1.55">
-        <%= b270_comment_body(@comment, link_mentions: false) %>
+        <%= b270_comment_body(@comment, link_mentions: false, embed_videos: false) %>
       </blockquote>
 
       <% if @day_url %>

data/app/views/bible270/profiles/edit.html.erb

@@ -1,4 +1,5 @@
 <% content_for :title, "Profile — #{Bible270.config.app_name}" %>
+<% content_for :expand_day_index, "true" %>
 <p class="b270-eyebrow">Profile</p>
 <h1>Your details</h1>
 <p class="lede">This is how you appear beside your reflections and on the community page.</p>

data/app/views/bible270/readers/index.html.erb

@@ -1,7 +1,7 @@
 <% content_for :title, "Community — #{Bible270.config.app_name}" %>
 <p class="b270-eyebrow">Community</p>
 <h1>Reading together</h1>
-<p class="lede">A community walking through the Word, sharing reflections and encouraging one another.</p>
+<p class="lede">Walking through the Word, sharing reflections and encouraging one another.<% if @today_day %> <%= link_to "Go to today (Day #{@today_day})", day_path(@today_day), class: "b270-todaylink" %><% end %></p>
 
 <% if @readers.any? %>
   <div class="b270-list">

data/app/views/bible270/readers/progress.html.erb

@@ -13,7 +13,7 @@
 <% if @reader %>
   <div class="b270-panel">
     <%= render "bible270/shared/reflections", comments: @recent_comments,
-          title: "Your recent reflections",
+          title: "Your recent reflections", editable: true,
           empty_text: "You have not written any reflections yet." %>
   </div>
 <% end %>

data/app/views/bible270/readers/show.html.erb

@@ -20,4 +20,4 @@
         title: "Their reflections", empty_text: "No reflections yet." %>
 </div>
 
-<%= render "bible270/shared/day_index", reader: @reader %>
+<%= render "bible270/shared/day_index", reader: @reader, expanded: true %>

data/app/views/bible270/shared/_day_index.html.erb

@@ -1,8 +1,8 @@
-<%# locals: (reader: nil) %>
+<%# locals: (reader: nil, expanded: false) %>
 <% if Bible270::Plan::DAYS.positive? %>
   <% grid_reader = reader || current_reader %>
   <% today = signed_in? && grid_reader == current_reader ? current_reader.today_day : nil %>
-  <details class="b270-index">
+  <details class="b270-index"<%= " open" if expanded %>>
     <summary>View all <%= Bible270::Plan::DAYS %> days</summary>
     <div class="b270-grid">
       <% (1..Bible270::Plan::DAYS).each do |d| %>

data/app/views/bible270/shared/_markdown_toolbar.html.erb

@@ -105,6 +105,44 @@
       update(editor, textarea, replacement, start, finish, 1, selected.length + 1);
     }
 
+    function youtubeVideoId(href) {
+      if (/[\s\x00-\x1f\x7f]/.test(href) || /%(?![0-9a-f]{2})/i.test(href)) return null;
+      let url;
+      try { url = new URL(href); } catch { return null; }
+      const hosts = ["youtube.com", "www.youtube.com", "m.youtube.com", "youtu.be", "www.youtu.be"];
+      if (!/^https?:\/\//i.test(href) || !hosts.includes(url.hostname) || url.username || url.password || url.port) return null;
+
+      let id;
+      if (url.hostname === "youtu.be" || url.hostname === "www.youtu.be") id = url.pathname.slice(1);
+      else if (url.pathname === "/watch") {
+        const ids = url.searchParams.getAll("v");
+        if (ids.length === 1) id = ids[0];
+      } else id = url.pathname.match(/^\/(?:shorts|live|embed)\/([A-Za-z0-9_-]{11})$/)?.[1];
+      return /^[A-Za-z0-9_-]{11}$/.test(id || "") ? id : null;
+    }
+
+    function addVideo(editor, textarea) {
+      const href = window.prompt("YouTube video address (https://…)");
+      if (!href) return;
+      const id = youtubeVideoId(href.trim());
+      if (!id) {
+        window.alert("Enter a valid YouTube video URL. Use Link for other video sites.");
+        return;
+      }
+
+      const name = window.prompt("Video name (optional — leave blank for View video)");
+      if (name === null) return;
+      // Entity-encode punctuation so a name stays text, not Markdown or HTML.
+      const label = (name.trim().replace(/\s+/g, " ") || "YouTube video")
+        .replace(/[!-/:-@\[-`{-~]/g, (character) => `&#${character.codePointAt(0)};`);
+      const start = textarea.selectionStart;
+      const finish = textarea.selectionEnd;
+      const marker = `[${label}](https://www.youtube.com/watch?v=${id} "bible270-video")`;
+      const before = start > 0 ? "\n\n" : "";
+      const replacement = `${before}${marker}\n\n`;
+      update(editor, textarea, replacement, start, finish, replacement.length, replacement.length);
+    }
+
     function requestPreview(editor, state) {
       const textarea = editor.querySelector("textarea[name='comment[body]']");
       const preview = editor.querySelector("[data-b270-preview-panel]");
@@ -181,6 +219,7 @@
         setFormattingOpen(editor, false, false);
         requestPreview(editor, state);
       } else {
+        window.Bible270Videos?.reset(previewPanel);
         setFormattingOpen(editor, openEditors.has(editorKey(editor)), false);
         const textarea = editor.querySelector("textarea[name='comment[body]']");
         resizeTextarea(textarea);
@@ -198,6 +237,8 @@
         wrap(editor, textarea, "*", "*", "italic text");
       } else if (action === "link") {
         addLink(editor, textarea);
+      } else if (action === "video") {
+        addVideo(editor, textarea);
       } else {
         prefixLines(editor, textarea, action);
       }

data/app/views/bible270/shared/_reflections.html.erb

@@ -1,4 +1,4 @@
-<%# locals: (comments:, title: "Their reflections", moderate: false, empty_text: "None yet.") %>
+<%# locals: (comments:, title: "Their reflections", moderate: false, editable: false, empty_text: "None yet.") %>
 <%#
   A reader's reflections. Three views showed near-identical markup: the admin
   page, a reader's public page, and the progress page, differing only in whether
@@ -21,6 +21,10 @@
           <%= link_to "Day #{comment.day}", day_path(comment.day) %>
           · <%= b270_date(comment.created_at) %>
           <% if moderate && comment.hidden? %><span class="b270-badge">Hidden</span><% end %>
+          <% if editable && b270_can_edit?(comment) %>
+            <%= link_to "edit", day_path(comment.day, edit: comment.id, anchor: "comment-#{comment.id}"),
+                  class: "b270-cedit" %>
+          <% end %>
         </div>
 
         <div class="b270-cbody"><%= b270_comment_body(comment) %></div>

data/app/views/bible270/shared/_styles.html.erb

@@ -265,6 +265,12 @@
   .b270-cbody blockquote{margin:7px 0 0;padding:2px 0 2px 12px;border-left:3px solid var(--line);color:var(--muted)}
   .b270-cbody a{color:var(--teal);text-decoration:underline;text-decoration-color:var(--line)}
   .b270-cbody a:hover{text-decoration-color:currentColor}
+  .b270-video{margin:10px 0;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--paper);width:100%;box-sizing:border-box;white-space:normal}
+
+  .b270 .b270-video button{padding:7px 12px;border:1px solid var(--line);border-radius:7px;background:var(--card);color:var(--ink);font:inherit;cursor:pointer}
+  .b270-video button[hidden]{display:none}
+  .b270-video iframe{display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:6px}
+  .b270-video a{display:block;margin-top:8px;font-size:13px}
   .b270-editform{margin-top:6px}
   .b270-editform textarea{min-height:64px}
   .b270-editerror{margin:0 0 8px;font-size:13px;color:var(--oxblood)}

data/app/views/bible270/shared/_video_embeds.html.erb

@@ -0,0 +1,46 @@
+<script nonce="<%= content_security_policy_nonce %>">
+  (() => {
+    if (window.Bible270Videos) {
+      window.Bible270Videos.scan();
+      return;
+    }
+
+    function scan() {
+      document.querySelectorAll("[data-b270-video-load]").forEach((button) => {
+        button.hidden = !!button.closest(".b270-video")?.querySelector("iframe");
+      });
+    }
+
+    function reset(root = document) {
+      root.querySelectorAll(".b270-video iframe").forEach((frame) => frame.remove());
+      root.querySelectorAll("[data-b270-video-load]").forEach((button) => {
+        button.hidden = false;
+      });
+    }
+
+    document.addEventListener("click", (event) => {
+      const button = event.target.closest?.("[data-b270-video-load]");
+      if (!button) return;
+      const card = button.closest("[data-b270-video-id]");
+      const id = card?.dataset.b270VideoId;
+      if (!/^[A-Za-z0-9_-]{11}$/.test(id || "") || card.querySelector("iframe")) return;
+
+      const frame = document.createElement("iframe");
+      frame.src = `https://www.youtube-nocookie.com/embed/${id}?autoplay=0`;
+      frame.title = "YouTube video player";
+      frame.allow = "encrypted-media; fullscreen; picture-in-picture";
+      frame.allowFullscreen = true;
+      // YouTube requires an origin referrer to identify the embedding site.
+      frame.referrerPolicy = "strict-origin-when-cross-origin";
+      card.insertBefore(frame, button);
+      button.hidden = true;
+      frame.focus();
+    });
+
+    scan();
+    new MutationObserver(scan).observe(document.documentElement, { childList: true, subtree: true });
+    document.addEventListener("turbo:load", scan);
+    document.addEventListener("turbo:before-cache", () => reset());
+    window.Bible270Videos = { scan, reset };
+  })();
+</script>

data/app/views/layouts/bible270/application.html.erb

@@ -20,9 +20,10 @@
     <% if flash[:notice] %><div class="b270-flash notice"><%= flash[:notice] %></div><% end %>
     <%= yield %>
     <%# Pages with their own day grid opt out with content_for :hide_day_index %>
-    <%= render 'bible270/shared/day_index' unless content_for?(:hide_day_index) %>
+    <%= render 'bible270/shared/day_index', expanded: content_for?(:expand_day_index) unless content_for?(:hide_day_index) %>
     <%= b270_footer %>
   </div>
   <%= render "bible270/shared/scripture_popups" %>
+  <%= render "bible270/shared/video_embeds" %>
 </body>
 </html>

data/lib/bible270/comment_formatter.rb

@@ -5,6 +5,7 @@ require 'kramdown'
 require 'nokogiri'
 require 'rails-html-sanitizer'
 require 'bible270/mentions'
+require 'bible270/youtube_video'
 
 module Bible270
   # Converts stored reflection source into a deliberately small, safe subset of
@@ -15,22 +16,28 @@ module Bible270
     MARKDOWN = 'markdown'
     FORMATS = [PLAIN, MARKDOWN].freeze
     ALLOWED_TAGS = %w[p br strong em blockquote ul ol li a].freeze
-    ALLOWED_ATTRIBUTES = %w[href rel].freeze
+    ALLOWED_ATTRIBUTES = %w[href rel title].freeze
+    VIDEO_MARKER = 'bible270-video'
+    VIDEO_PRIVACY = 'Loads player and shares data with YouTube'
     LINK_REL = 'nofollow ugc noopener'
     URL_PATTERN = %r{https?://[^\s<>"]*[^\s<>".,;:!?)\]\}]}i
-    SKIP_MENTIONS_IN = %w[a code pre].freeze
+    SKIP_MENTIONS_IN = %w[a button code pre].freeze
 
   module_function
 
-    def html(body, format: PLAIN, &mention_path)
+    def html(body, format: PLAIN, embed_videos: false, &mention_path)
       source = body.to_s
       rendered = format == MARKDOWN ? markdown_html(source) : plain_html(source)
       fragment = fragment_for(sanitize(rendered))
       if format == MARKDOWN
+        replace_video_markers(fragment) if embed_videos
         normalize_lists(fragment)
         hard_wrap(fragment)
         link_urls(fragment)
       end
+      fragment.css('[title]').each { |node| node.remove_attribute('title') }
+      fragment.css('.b270-video button').each { |node| node['title'] = VIDEO_PRIVACY }
+      fragment.css('.b270-video a').each { |node| node['title'] = 'Opens YouTube in a new tab.' }
       decorate_links(fragment)
       link_mentions(fragment, &mention_path) if mention_path
       fragment.to_html
@@ -135,6 +142,43 @@ module Bible270
     end
     private_class_method :link_urls
 
+    def replace_video_markers(fragment)
+      fragment.css('p').each do |paragraph|
+        children = paragraph.children.reject { |node| node.text? && node.text.strip.empty? }
+        next unless children.one?
+
+        link = children.first
+        next unless link.name == 'a' && link['title'] == VIDEO_MARKER
+
+        id = YouTubeVideo.id_from_url(link['href'].to_s)
+        paragraph.replace(video_card(id, fragment.document, name: link.text.strip)) if id
+      end
+    end
+    private_class_method :replace_video_markers
+
+    # These elements are generated only after sanitization; they are deliberately
+    # not part of the allowlist for user-supplied HTML.
+    def video_card(id, document, name:)
+      card = Nokogiri::XML::Node.new('div', document)
+      card['class'] = 'b270-video'
+      card['data-b270-video-id'] = id
+
+      button = Nokogiri::XML::Node.new('button', document)
+      button['type'] = 'button'
+      button['data-b270-video-load'] = ''
+      button['hidden'] = 'hidden'
+      button.content = name.empty? || name == 'YouTube video' ? 'View video' : "View video ‘#{name}’"
+      card.add_child(button)
+
+      link = Nokogiri::XML::Node.new('a', document)
+      link['href'] = "https://www.youtube.com/watch?v=#{id}"
+      link['target'] = '_blank'
+      link.content = 'Open on YouTube'
+      card.add_child(link)
+      card
+    end
+    private_class_method :video_card
+
     def decorate_links(fragment)
       fragment.css('a:not([href])').each do |link|
         link.replace(Nokogiri::XML::Text.new(link.text, fragment.document))

data/lib/bible270/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Bible270
-  VERSION = '1.7.3'
+  VERSION = '1.8.1'
 end

data/lib/bible270/youtube_video.rb

@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+require 'uri'
+
+module Bible270
+  module YouTubeVideo
+    HOSTS = %w[youtube.com www.youtube.com m.youtube.com youtu.be www.youtu.be].freeze
+    SHORT_HOSTS = %w[youtu.be www.youtu.be].freeze
+    ID_PATTERN = %r{\A[A-Za-z0-9_-]{11}\z}
+
+  module_function
+
+    def id_from_url(url)
+      return if url.match?(%r{[[:space:][:cntrl:]]})
+
+      uri = URI.parse(url)
+      return unless uri.is_a?(URI::HTTP) && HOSTS.include?(uri.host&.downcase)
+      return if uri.userinfo || url.match?(%r{%(?![0-9a-f]{2})}i)
+      # Match the authority literally too: URI accepts empty ports and normalizes
+      # explicit default ports, which would otherwise conceal malformed input.
+      return unless url.match?(%r{\Ahttps?://#{Regexp.escape(uri.host)}(?::#{uri.default_port})?/}i)
+
+      id = candidate_id(uri)
+      id if id&.match?(ID_PATTERN)
+    rescue URI::InvalidURIError, ArgumentError
+      nil
+    end
+
+    def candidate_id(uri)
+      if SHORT_HOSTS.include?(uri.host.downcase)
+        uri.path.delete_prefix('/')
+      elsif uri.path == '/watch'
+        ids = URI.decode_www_form(uri.query.to_s).filter_map { |key, value| value if key == 'v' }
+        ids.first if ids.one?
+      else
+        uri.path.match(%r{\A/(?:shorts|live|embed)/([A-Za-z0-9_-]{11})\z})&.[](1)
+      end
+    end
+    private_class_method :candidate_id
+  end
+end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: bible270
 version: !ruby/object:Gem::Version
-  version: 1.7.3
+  version: 1.8.1
 platform: ruby
 authors:
 - Andrew vonderLuft
@@ -190,6 +190,7 @@ files:
 - app/views/bible270/shared/_scripture_popups.html.erb
 - app/views/bible270/shared/_styles.html.erb
 - app/views/bible270/shared/_track_bars.html.erb
+- app/views/bible270/shared/_video_embeds.html.erb
 - app/views/bible270/sign_in_mailer/magic_link.html.erb
 - app/views/bible270/sign_in_mailer/magic_link.text.erb
 - app/views/layouts/bible270/application.html.erb
@@ -232,6 +233,7 @@ files:
 - lib/bible270/translations.rb
 - lib/bible270/versification.rb
 - lib/bible270/version.rb
+- lib/bible270/youtube_video.rb
 - lib/generators/bible270/install/install_generator.rb
 - lib/generators/bible270/install/templates/bible270.rb.tt
 - lib/generators/bible270/install/templates/omniauth.rb.tt