Add vimeo video provider

app/javascript/controllers/video_player_controller.js

@@ -1,9 +1,11 @@
 import { Controller } from '@hotwired/stimulus'
 import Vlitejs from 'vlitejs'
-import VlitejsYoutube from 'vlitejs/providers/youtube.js'
+import YouTube from 'vlitejs/providers/youtube.js'
+import Vimeo from 'vlitejs/providers/vimeo.js'
 import youtubeSvg from '../../assets/images/icons/fontawesome/youtube-brands-solid.svg?raw'
 
-Vlitejs.registerProvider('youtube', VlitejsYoutube)
+Vlitejs.registerProvider('youtube', YouTube)
+Vlitejs.registerProvider('vimeo', Vimeo)
 
 export default class extends Controller {
   static values = { poster: String, src: String, provider: String }

app/models/talk.rb

@@ -81,7 +81,7 @@ class Talk < ApplicationRecord
   before_validation :set_kind, if: -> { !kind_changed? }
 
   # enums
-  enum :video_provider, %w[youtube mp4 scheduled not_published not_recorded].index_by(&:itself)
+  enum :video_provider, %w[youtube mp4 vimeo scheduled not_published not_recorded].index_by(&:itself)
   enum :kind,
     %w[keynote talk lightning_talk panel workshop gameshow podcast q_and_a discussion fireside_chat
       interview award].index_by(&:itself)
@@ -212,11 +212,23 @@ def thumbnail(size = :thumbnail_lg)
       end
     end
 
-    if !youtube? && event && (asset = Rails.application.assets.load_path.find(event.poster_image_path))
+    if !youtube? && !vimeo? && event && (asset = Rails.application.assets.load_path.find(event.poster_image_path))
       return "/assets/#{asset.digested_path}"
     end
 
-    return fallback_thumbnail unless youtube?
+    return fallback_thumbnail unless youtube? || vimeo?
+
+    if vimeo?
+      vimeo = {
+        thumbnail_xs: "_small",
+        thumbnail_sm: "_small",
+        thumbnail_md: "_medium",
+        thumbnail_lg: "_large",
+        thumbnail_xl: "_large"
+      }
+
+      return "https://vumbnail.com/#{video_id}#{vimeo[size]}.jpg"
+    end
 
     youtube = {
       thumbnail_xs: "default",

app/views/talks/_talk.html.erb

@@ -25,7 +25,7 @@
       <% end %>
 
     <% else %>
-      <% if talk.video_provider.in?(["mp4", "youtube", "scheduled", "not_published", "not_recorded"]) %>
+      <% if talk.video_provider.in?(["mp4", "youtube", "vimeo", "scheduled", "not_published", "not_recorded"]) %>
         <%= render partial: "talks/video_providers/#{talk.video_provider}", locals: {talk: talk} %>
       <% else %>
         Provider <%= talk.video_provider.inspect %> is not configured.
@@ -42,14 +42,23 @@
 
         <div class="flex gap-1">
           <% if talk.video_provider == "youtube" %>
-            <a class="tooltip tooltip-top v-playOnYoutubeButton" data-tip="Watch on YouTube" href="<%= "https://www.youtube.com/watch?v=#{talk.video_id}" %>" target="_blank" data-action="click->video-player#pause">
+            <a class="tooltip tooltip-top" data-tip="Watch on YouTube" href="<%= "https://www.youtube.com/watch?v=#{talk.video_id}" %>" target="_blank" data-action="click->video-player#pause">
               <div class="flex gap-2 items-center rounded-full border bg-gray-100 hover:bg-gray-200/50 border-gray-200 font-regular px-3 py-1 text-sm cursor-pointer">
                 <span class="text-nowrap">Play on</span>
                 <%= fa("youtube-brands", size: :sm, style: :solid) %>
               </div>
             </a>
           <% end %>
 
+          <% if talk.video_provider == "vimeo" %>
+            <a class="tooltip tooltip-top" data-tip="Watch on Vimeo" href="<%= "https://vimeo.com/video/#{talk.video_id}" %>" target="_blank" data-action="click->video-player#pause">
+              <div class="flex gap-2 items-center rounded-full border bg-gray-100 hover:bg-gray-200/50 border-gray-200 font-regular px-3 py-1 text-sm cursor-pointer">
+                <span class="text-nowrap">Play on</span>
+                <%= fa("vimeo-v-brands", size: :sm, style: :solid) %>
+              </div>
+            </a>
+          <% end %>
+
           <% if signed_in? && !talk.scheduled? %>
             <%= turbo_frame_tag dom_id(talk, :watched_talk) do %>
               <% if talk.watched? %>

app/views/talks/video_providers/_vimeo.html.erb

@@ -0,0 +1,7 @@
+<div
+  class="image rounded-xl"
+  id="<%= dom_id(talk, :vimeo) %>"
+  data-video-player-target="player"
+  data-vimeo-id="<%= talk.video_id %>">
+
+</div>

db/seeds.rb

@@ -52,7 +52,7 @@
         end
 
         Talk
-          .find_or_initialize_by(video_id: talk_data["video_id"], video_provider: talk_data["video_provider"] || :youtube)
+          .find_or_initialize_by(video_id: talk_data["video_id"].to_s, video_provider: talk_data["video_provider"] || :youtube)
           .update_from_yml_metadata!(event: event)
       rescue ActiveRecord::RecordInvalid => e
         puts "Couldn't save: #{talk_data["title"]}, error: #{e.message}"