Implement mp4 video provider and add Brighton Ruby 2023 videos

app/javascript/controllers/video_player_controller.js

@@ -10,8 +10,14 @@ export default class extends Controller {
   playbackRateOptions = [1, 1.25, 1.5, 1.75, 2]
 
   connect () {
+    const providerOptions = {}
+
+    if (this.hasProviderValue) {
+      providerOptions.provider = this.providerValue
+    }
+
     this.player = new Vlitejs(this.playerTarget, {
-      provider: this.hasProviderValue ? this.providerValue : 'youtube',
+      ...providerOptions,
       options: {
         poster: this.posterValue,
         controls: true

app/models/talk.rb

@@ -52,6 +52,12 @@ class Talk < ApplicationRecord
   validates :language, presence: true,
     inclusion: {in: Language.alpha2_codes, message: "%{value} is not a valid IS0-639 alpha2 code"}
 
+  # enums
+  enum :video_provider, %w[youtube mp4].index_by(&:itself)
+
+  # attributes
+  attribute :video_provider, default: :youtube
+
   # delegates
   delegate :name, to: :event, prefix: true, allow_nil: true
 
@@ -127,23 +133,51 @@ def to_meta_tags
   end
 
   def thumbnail_xs
-    self[:thumbnail_xs].presence || "https://i.ytimg.com/vi/#{video_id}/default.jpg"
+    thumbnail(:thumbnail_xs)
   end
 
   def thumbnail_sm
-    self[:thumbnail_sm].presence || "https://i.ytimg.com/vi/#{video_id}/mqdefault.jpg"
+    thumbnail(:thumbnail_sm)
   end
 
   def thumbnail_md
-    self[:thumbnail_md].presence || "https://i.ytimg.com/vi/#{video_id}/hqdefault.jpg"
+    thumbnail(:thumbnail_md)
   end
 
   def thumbnail_lg
-    self[:thumbnail_lg].presence || "https://i.ytimg.com/vi/#{video_id}/sddefault.jpg"
+    thumbnail(:thumbnail_lg)
   end
 
   def thumbnail_xl
-    self[:thumbnail_xl].presence || "https://i.ytimg.com/vi/#{video_id}/maxresdefault.jpg"
+    thumbnail(:thumbnail_xl)
+  end
+
+  def fallback_thumbnail
+    "/assets/#{Rails.application.assets.load_path.find("posters/fallback.png").digested_path}"
+  end
+
+  def thumbnail(size = :thumbnail_lg)
+    if self[size].present?
+      return self[size] if self[size].start_with?("https://")
+
+      if (asset = Rails.application.assets.load_path.find(self[size]))
+        return "/assets/#{asset.digested_path}"
+      else
+        return fallback_thumbnail
+      end
+    end
+
+    return fallback_thumbnail if video_provider != "youtube"
+
+    youtube = {
+      thumbnail_xs: "default",
+      thumbnail_sm: "mqdefault",
+      thumbnail_md: "hqdefault",
+      thumbnail_lg: "sddefault",
+      thumbnail_xl: "maxresdefault"
+    }
+
+    "https://i.ytimg.com/vi/#{video_id}/#{youtube[size]}.jpg"
   end
 
   def related_talks(limit: 6)

app/views/talks/_card_horizontal.html.erb

@@ -1,8 +1,5 @@
-
 <div class="w-full items-center" id="<%= dom_id(talk, :card_horizontal) %>" data-talk-horizontal-card>
-
-  <%= link_to talk_path(talk),
-        class: "flex aspect-video shrink-0 relative" do %>
+  <%= link_to talk_path(talk), class: "flex aspect-video shrink-0 relative" do %>
     <%= image_tag talk.thumbnail_sm, srcset: ["#{talk.thumbnail_lg} 2x"], id: dom_id(talk), class: "w-full h-auto object-cover", style: "view-transition-name: #{dom_id(talk, :image)}", loading: :lazy %>
   <% end %>
   <%= content_tag :div, talk.title, class: "text-sm text-gray line-clamp-2 mt-1" %>

app/views/talks/_talk.html.erb

@@ -2,20 +2,22 @@
       data: {
         controller: "video-player",
         video_player_poster_value: talk.thumbnail_lg,
-        video_player_provider_value: "youtube",
+        video_player_provider_value: (talk.video_provider == "mp4") ? nil : talk.video_provider,
         video_player_src_value: talk.video_id
       } do %>
 
-  <div <%= tag.attributes(
-             class: "aspect-video banner-img card-horizontal-img relative",
-             style: "view-transition-name: #{dom_id(talk, :image)}"
-           ) %>>
-
-    <%= content_tag :div, "",
-          class: "image",
-          id: dom_id(talk, :youtube),
-          data: {video_player_target: "player",
-                 youtube_id: talk.video_id} %>
+  <div class="aspect-video banner-img card-horizontal-img relative" style="view-transition-name: <%= dom_id(talk, :image) %>">
+    <% if talk.video_provider == "mp4" %>
+      <video id="player" data-video-player-target="player" src="<%= talk.video_id %>"></video>
+    <% elsif talk.video_provider == "youtube" %>
+      <div
+        class="image"
+        id="<%= dom_id(talk, :youtube) %>"
+        data-video-player-target="player"
+        data-youtube-id="<%= talk.video_id %>"></div>
+    <% else %>
+      Provider <%= talk.video_provider %> is not configured.
+    <% end %>
   </div>
 
   <div class="py-4 flex flex-col gap-4 mb-4">

data/brightonruby/brightonruby-2023/videos.yml

@@ -0,0 +1,226 @@
+---
+- title: "The Magic of Rails"
+  raw_title: "The Magic of Rails"
+  speakers:
+    - Eileen Uchitelle
+  event_name: Brighton Ruby 2023
+  published_at: "2023-06-30"
+  thumbnail_xs: posters/brighton_ruby.png
+  thumbnail_sm: posters/brighton_ruby.png
+  thumbnail_md: posters/brighton_ruby.png
+  thumbnail_lg: posters/brighton_ruby.png
+  thumbnail_xl: posters/brighton_ruby.png
+  video_provider: mp4
+  video_id: https://videos.brightonruby.com/videos/2023/eileen-uchitelle-the-magic-of-rails.mp4
+  description: |-
+    We’ll look at the philosophy behind the framework as well as the overall structure of the components and explore some of the common patterns that Rails uses to build agnostic and beautiful interfaces, and the techniques it implements to hide complexity so you can focus on building your application.
+
+    By the end of this talk you’ll be more confident navigating the Rails codebase and better understand the patterns it uses to create the framework we all know and love. But Rails is so much more than its design and architecture. We’ll dive into my motivations for working on the framework and why the community is so important to the long term success of Rails.
+
+- title: "Scarpe Diem"
+  raw_title: "Scarpe Diem"
+  speakers:
+    - Nick Schwaderer
+  event_name: Brighton Ruby 2023
+  published_at: "2023-06-30"
+  thumbnail_xs: posters/brighton_ruby.png
+  thumbnail_sm: posters/brighton_ruby.png
+  thumbnail_md: posters/brighton_ruby.png
+  thumbnail_lg: posters/brighton_ruby.png
+  thumbnail_xl: posters/brighton_ruby.png
+  video_provider: mp4
+  video_id: https://videos.brightonruby.com/videos/2023/nick-schwaderer-scarpe-diem.mp4
+  description: |-
+    Why the Lucky Stiff, one of the most beloved members of the historical Ruby community, is widely known for his seminal Poignant Guide to Ruby. His second-most ambitious writing, NOBODY KNOWS SHOES, is lesser-known. This text was the manual for an amazing set of tools _why developed in 2007 called Shoes.rb.
+
+    With pure Ruby, married with _why’s supreme taste in APIs, one could easily write desktop applications and package them for Mac, Windows or Linux. In 2007! Imagine writing useful native applications and sharing them with your friend who didn’t have Ruby on their machine nor any technical knowledge. Dear reader, your speaker in fact used Shoes.rb to build Desktop apps before using Rails to write Webapps.
+
+    Over the years, Shoes has fought off the endless wave of bitrot. An effort to rewrite Shoes in JRuby stalled in 2017. Existing Shoes is difficult, likely impossible, to run.
+
+    Nick will walk you through Shoes history; and cover his work on a new Shoes.rb implementation to bring Shoes back to life on modern tooling with Scarpe. (Italian for “Shoes”)
+
+- title: "Librarian's Guide to Documentation"
+  raw_title: "Librarian's Guide to Documentation"
+  speakers:
+    - Kaitlyn Tierney
+  event_name: Brighton Ruby 2023
+  published_at: "2023-06-30"
+  thumbnail_xs: posters/brighton_ruby.png
+  thumbnail_sm: posters/brighton_ruby.png
+  thumbnail_md: posters/brighton_ruby.png
+  thumbnail_lg: posters/brighton_ruby.png
+  thumbnail_xl: posters/brighton_ruby.png
+  video_provider: mp4
+  video_id: https://videos.brightonruby.com/videos/2023/kaitlyn-tierney-librarians-guide-to-documentation.mp4
+  description: |-
+    Learn how to leverage librarian skills to create and maintain internal documentation that works for you.
+
+    Improve technical decision making by fostering a culture of documentation excellence and inspiring clear, effective written communication with a few simple practices.
+
+- title: "When Should You Not Use Rails"
+  raw_title: "When Should You Not Use Rails"
+  speakers:
+    - Noah Gibbs
+  event_name: Brighton Ruby 2023
+  published_at: "2023-06-30"
+  thumbnail_xs: posters/brighton_ruby.png
+  thumbnail_sm: posters/brighton_ruby.png
+  thumbnail_md: posters/brighton_ruby.png
+  thumbnail_lg: posters/brighton_ruby.png
+  thumbnail_xl: posters/brighton_ruby.png
+  video_provider: mp4
+  video_id: https://videos.brightonruby.com/videos/2023/noah-gibbs-when-should-you-not-use-rails.mp4
+  description: |-
+    Rails is a great tool for a lot of projects, but not every project.
+
+    Be the senior engineer you dream of, and learn the long answer to “should we use Rails?” You can say “it depends” with the greatest of authority!
+
+- title: "Lightning Talk: Twenty Years of Ruby in Five Minutes"
+  raw_title: "Lightning Talk: Twenty Years of Ruby in Five Minutes"
+  speakers:
+    - Paul Battley
+  event_name: Brighton Ruby 2023
+  published_at: "2023-06-30"
+  thumbnail_xs: posters/brighton_ruby.png
+  thumbnail_sm: posters/brighton_ruby.png
+  thumbnail_md: posters/brighton_ruby.png
+  thumbnail_lg: posters/brighton_ruby.png
+  thumbnail_xl: posters/brighton_ruby.png
+  video_provider: mp4
+  video_id: https://videos.brightonruby.com/videos/2023/paul-battley-twenty-years-of-ruby-in-five-minutes.mp4
+  description: |-
+    I’ve been working with Ruby since the early 2000s. Ruby has changed a lot in that time, but we don’t always remember how much. Let’s rewrite a short program so that it runs in a twenty-year-old version of Ruby and see how much syntax and performance has changed for the better in twenty years.
+
+    Ruby is being actively developed, and getting better over time, but even when it was more limited and slower it was still a viable language for development.
+
+    There is always room for improvement. Let this talk illuminate newer programmers and remind grizzled veterans. Be grateful for those who have got us here and optimistic about using Ruby in the future.
+
+- title: "Lightning Talk: Five Things I Love About Ruby"
+  raw_title: "Lightning Talk: Five Things I Love About Ruby"
+  speakers:
+    - Hana Harencarova
+  event_name: Brighton Ruby 2023
+  published_at: "2023-06-30"
+  thumbnail_xs: posters/brighton_ruby.png
+  thumbnail_sm: posters/brighton_ruby.png
+  thumbnail_md: posters/brighton_ruby.png
+  thumbnail_lg: posters/brighton_ruby.png
+  thumbnail_xl: posters/brighton_ruby.png
+  video_provider: mp4
+  video_id: https://videos.brightonruby.com/videos/2023/hana-harencarova-five-things-i-love-about-ruby.mp4
+  description: |-
+    The talk caters to both newcomers and veterans of the Ruby world and offers a humorous yet informative perspective on the language and its community. It will cover various Ruby events and initiatives, diversity of the Ruby community, and more. Let’s appreciate our Ruby world together.
+
+- title: "Lightning Talk: UX Doesn't Equal Front-End"
+  raw_title: "Lightning Talk: UX Doesn't Equal Front-End"
+  speakers:
+    - Lizz Jennings
+  event_name: Brighton Ruby 2023
+  published_at: "2023-06-30"
+  thumbnail_xs: posters/brighton_ruby.png
+  thumbnail_sm: posters/brighton_ruby.png
+  thumbnail_md: posters/brighton_ruby.png
+  thumbnail_lg: posters/brighton_ruby.png
+  thumbnail_xl: posters/brighton_ruby.png
+  video_provider: mp4
+  video_id: https://videos.brightonruby.com/videos/2023/lizz-jennings-ux-doesnt-equal-front-end.mp4
+  description: |-
+    When people think of usability improvements, they often think of the front end. But when you really understand your domain, using the power of the back end can be the best way to save your users’ time.
+
+    A book app is often a starter example for learning to code. Using an example audiobook, I show how quickly a basic book record becomes complex.
+
+    A side quest to explain Ranganathan’s five laws of library science and how well they translate to building web apps (particularly law 4 - “Save the time of the ~~reader~~ user”).
+
+- title: "Lightning Talk: How to Write a Custom Rubocop Rule"
+  raw_title: "Lightning Talk: How to Write a Custom Rubocop Rule"
+  speakers:
+    - Jade Dickinson
+  event_name: Brighton Ruby 2023
+  published_at: "2023-06-30"
+  thumbnail_xs: posters/brighton_ruby.png
+  thumbnail_sm: posters/brighton_ruby.png
+  thumbnail_md: posters/brighton_ruby.png
+  thumbnail_lg: posters/brighton_ruby.png
+  thumbnail_xl: posters/brighton_ruby.png
+  video_provider: mp4
+  video_id: https://videos.brightonruby.com/videos/2023/jade-dickinson-how-to-write-a-custom-rubocop-rule.mp4
+  description: |-
+    You want to enforce a standard in your codebase, like making sure a company name is in title case. So you add “always check for correct capitalisation” to your pull request guidelines. Over time, people forget to check and mistakes sneak in.
+
+    But wait - there’s an easier way! I’ll show you how you can write a custom Rubocop rule to check for you. So if someone breaks the rule, your CI tooling will flag it up so they can fix it, freeing you up to focus on more important things.
+
+- title: "Lightning Talk: Beware Job Smearing"
+  raw_title: "Lightning Talk: Beware Job Smearing"
+  speakers:
+    - Maple Ong
+  event_name: Brighton Ruby 2023
+  published_at: "2023-06-30"
+  thumbnail_xs: posters/brighton_ruby.png
+  thumbnail_sm: posters/brighton_ruby.png
+  thumbnail_md: posters/brighton_ruby.png
+  thumbnail_lg: posters/brighton_ruby.png
+  thumbnail_xl: posters/brighton_ruby.png
+  video_provider: mp4
+  video_id: https://videos.brightonruby.com/videos/2023/maple-ong-beware-job-smearing.mp4
+  description: |-
+    What does Matthew McConaughey have in common with an uncomfortable sounding procedure and job frameworks?
+
+    Join for a “no slides”, five minute, investigation into what not to do with Sidekiq.
+
+- title: "Livin' la Vida Hanami"
+  raw_title: "Livin' la Vida Hanami"
+  speakers:
+    - Tim Riley
+  event_name: Brighton Ruby 2023
+  published_at: "2023-06-30"
+  thumbnail_xs: posters/brighton_ruby.png
+  thumbnail_sm: posters/brighton_ruby.png
+  thumbnail_md: posters/brighton_ruby.png
+  thumbnail_lg: posters/brighton_ruby.png
+  thumbnail_xl: posters/brighton_ruby.png
+  video_provider: mp4
+  video_id: https://videos.brightonruby.com/videos/2023/tim-riley-livin-la-vida-hanami.mp4
+  description: |-
+    You’re into applications Fast tests and method calls I feel a premonition This gem’s gonna stun you all
+
+    Upside, inside out, Hanami 2.0 is out!
+
+    This release brings new levels of polish and power to a framework that you can use for Ruby apps of all shapes and sizes.
+
+    Together we’ll discover what goes into living the life of real production Hanami app, and how Hanami apps can remain a joy to develop even as they grow.
+
+    Once you’ve had a taste of it you’ll never be the same! Come on!
+
+- title: "The Case Of The Vanished Variable"
+  raw_title: "The Case Of The Vanished Variable"
+  speakers:
+    - Nadia Odunayo
+  event_name: Brighton Ruby 2023
+  published_at: "2023-06-30"
+  thumbnail_xs: posters/brighton_ruby.png
+  thumbnail_sm: posters/brighton_ruby.png
+  thumbnail_md: posters/brighton_ruby.png
+  thumbnail_lg: posters/brighton_ruby.png
+  thumbnail_xl: posters/brighton_ruby.png
+  video_provider: mp4
+  video_id: https://videos.brightonruby.com/videos/2023/nadia-odunayo-the-case-of-the-vanished-variable.mp4
+  description: |-
+    After a stressful couple of days at work, Deirdre Bug is looking forward to a quiet evening in. But her plans are thwarted when the phone rings. “I know I’m the last person you want to hear from…but…I need your help!”
+
+    Follow Deirdre as she embarks on an adventure that features a looming Demo Day with serious prize money, a trip inside the walls of one of the Ruby community’s most revered institutions, and some broken code that appears to be much more simple than meets the eye.
+
+- title: "New Game"
+  raw_title: "New Game"
+  speakers:
+    - Joe Hart
+  event_name: Brighton Ruby 2023
+  published_at: "2023-06-30"
+  thumbnail_xs: posters/brighton_ruby.png
+  thumbnail_sm: posters/brighton_ruby.png
+  thumbnail_md: posters/brighton_ruby.png
+  thumbnail_lg: posters/brighton_ruby.png
+  thumbnail_xl: posters/brighton_ruby.png
+  video_provider: mp4
+  video_id: https://videos.brightonruby.com/videos/2023/joe-hart-new-game.mp4
+  description: |-
+    Fun and interactive games abound in this talk come work in progress interactive entertainment show. You’ll need yourself, a phone and good vibes.

data/brightonruby/playlists.yml

@@ -0,0 +1,8 @@
+- id: brightonruby-2023
+  title: Brighton Ruby 2023
+  description: 'Friday 30th June, 2023, Brighton Dome'
+  published_at: '2023-06-30'
+  channel_id:
+  year: '2023'
+  videos_count: 12
+  slug: brightonruby-2023

data/organisations.yml

@@ -180,3 +180,14 @@
   slug: rubyunconf
   language: english
   youtube_channel_id: UCpdY3gEqGW10EVrUbd1itug
+- name: Brighton Ruby
+  website: https://brightonruby.com
+  twitter: BrightonRuby
+  kind: conference
+  frequency: yearly
+  playlist_matcher:
+  default_country_code: UK
+  youtube_channel_name: BrightonRubyUK
+  slug: brightonruby
+  language: english
+  youtube_channel_id: UCTj2HxTYg7Q4fi1cLccSoQA

db/seeds.rb

@@ -45,7 +45,7 @@
         talk = Talk.find_or_create_by!(title: talk_data["title"], event: event) do |tlk|
           tlk.description = talk_data["description"]
           tlk.video_id = talk_data["video_id"]
-          tlk.video_provider = :youtube
+          tlk.video_provider = talk_data["video_provider"] || :youtube
           tlk.language = talk_data["language"]
           tlk.thumbnail_xs = talk_data["thumbnail_xs"] || ""
           tlk.thumbnail_sm = talk_data["thumbnail_sm"] || ""

test/fixtures/talks.yml

@@ -39,6 +39,7 @@ one:
     - Bad practices
   slug: yaroslav-shmarov-hotwire-cookbook-common-uses-essential-patterns-best-practices-rails-world
   video_id: F75k4Oc6g9Q
+  video_provider: youtube
   raw_transcript: '[{"start_time": "00:00:15.280", "end_time": "00:00:21.320", "text": "so nice to be here with you thank you all for coming so uh my name is uh"}, {"start_time": "00:00:21.320", "end_time": "00:00:27.800", "text": "yaroslav I m from Ukraine you might know me from my blog or from my super Al"}, {"start_time": "00:00:27.800", "end_time": "00:00:34.399", "text": "YouTube channel where I post a lot of stuff about trby and especially about hot fire so I originate from Ukraine"}, {"start_time": "00:00:34.399", "end_time": "00:00:40.239", "text": "from the north of Ukraine so right now it is liberated so that is Kev Chernobyl"}, {"start_time": "00:00:40.239", "end_time": "00:00:45.920", "text": "and chern so I used to live 80 kmers away from Chernobyl great"}, {"start_time": "00:00:45.920", "end_time": "00:00:52.680", "text": "place yeah and uh that is my family s home so it got boned in one of the first"}, {"start_time": "00:00:52.680", "end_time": "00:01:00.000", "text": "days of war that is my godfather he went to defend Ukraine and uh I mean we are"}, {"start_time": "00:01:00.000", "end_time": "00:01:05.799", "text": "he has such a beautiful venue but there is the war going on and like just today"}, {"start_time": "00:01:05.799", "end_time": "00:01:13.159", "text": "the city of har was randomly boned by the Russians and there are many Ruby"}, {"start_time": "00:01:13.159", "end_time": "00:01:19.520", "text": "rails people from Ukraine some of them are actually fighting this is verok he contributed to Ruby and he is actually"}, {"start_time": "00:01:19.520", "end_time": "00:01:27.960", "text": "defending Ukraine right now but on a positive note I just recently became a father"}, {"start_time": "00:01:27.960", "end_time": "00:01:35.000", "text": "so yeah um it is uh just 2 and a half months ago in uh France and uh today we"}, {"start_time": "00:01:35.000", "end_time": "00:01:35.000", "text": "are going to talk about hot fire"}]'
 
 two: