Use Turn to handle transitions (#15)

* Install Turn * Remove dependency on JS rendered view-transition-names. Server-render view-transition names * Speed up page revisits. Enable turbo cache * Add transitions from _card_horizontal * Improve view-transition-name Co-authored-by: Adrien Poly <[email protected]> * Improve view-transition-name Co-authored-by: Adrien Poly <[email protected]> * Improve view-transition-name Co-authored-by: Adrien Poly <[email protected]> * Reinstate turbo-frame transitions --------- Co-authored-by: Adrien Poly <[email protected]>
adrienpoly · Jun 22, 2023 · 0dfa855 · 0dfa855
1 parent a2b58da
commit 0dfa855
Show file tree

Hide file tree

Showing 11 changed files with 16 additions and 59 deletions.
diff --git a/app/assets/stylesheets/components/transition.css b/app/assets/stylesheets/components/transition.css
@@ -10,7 +10,6 @@
   }
 
   .banner-img .v-vlite {
-    view-transition-name: banner-img;
     contain: layout;
   }
 

diff --git a/app/helpers/talks_helper.rb b/app/helpers/talks_helper.rb
@@ -1,7 +1,2 @@
 module TalksHelper
-  def view_transition_style(talk_id:, from_talk_id:, name:)
-    return unless from_talk_id && talk_id == from_talk_id.to_i
-
-    "view-transition-name: #{name}"
-  end
 end
diff --git a/app/javascript/controllers/view_transition_controller.js b/app/javascript/controllers/view_transition_controller.js
diff --git a/app/javascript/controllers/view_transition_page_cleaner_controller.js b/app/javascript/controllers/view_transition_page_cleaner_controller.js
diff --git a/app/javascript/entrypoints/application.js b/app/javascript/entrypoints/application.js
@@ -3,6 +3,10 @@
 import * as Turbo from "@hotwired/turbo";
 Turbo.start();
 
+import Turn from "@domchristie/turn";
+Turn.config.experimental.viewTransitions = true
+Turn.start()
+
 // import ActiveStorage from "@rails/activestorage";
 // ActiveStorage.start();
 //
@@ -12,16 +16,6 @@ Turbo.start();
 // Example: Import a stylesheet in app/frontend/index.css
 import "../../assets/stylesheets/application.tailwind.css";
 
-addEventListener("turbo:before-render", (event) => {
-  if (document.startViewTransition) {
-    event.preventDefault();
-
-    document.startViewTransition(() => {
-      event.detail.resume();
-    });
-  }
-});
-
 addEventListener("turbo:before-frame-render", (event) => {
   if (document.startViewTransition) {
     event.preventDefault();

diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -2,7 +2,6 @@
 <html lang="en">
   <head>
     <meta name="viewport" content="width=device-width,initial-scale=1">
-    <meta name="turbo-cache-control" content="no-cache">
     <%= csrf_meta_tags %>
     <%= csp_meta_tag %>
 

diff --git a/app/views/talks/_card.html.erb b/app/views/talks/_card.html.erb
@@ -1,13 +1,13 @@
 
 <div class="max-w-sm bg-white" id="<%= dom_id talk %>">
-  <%= link_to talk_path(talk, speaker_slug: local_assigns.fetch(:speaker_slug, nil)), class: "flex aspect-video", data: { controller: "view-transition", view_transition_name_value: "banner-img" } do %>
+  <%= link_to talk_path(talk, speaker_slug: local_assigns.fetch(:speaker_slug, nil)), class: "flex aspect-video" do %>
     <%= image_tag talk.thumbnail_sm,
                   srcset: ["#{talk.thumbnail_lg} 2x"],
                   id: dom_id(talk),
                   height: 174,
                   width: 310,
                   alt: "talk by #{talk.speakers.join(", ")}: #{talk.title}",
-                  style: view_transition_style(talk_id: talk.id, from_talk_id:  local_assigns.fetch(:from_talk_id, nil), name: "banner-img"),
+                  style: "view-transition-name: #{dom_id(talk, :image)}",
                   class: "rounded-lg w-full object-cover"
     %>
   <% end %>

diff --git a/app/views/talks/_card_horizontal.html.erb b/app/views/talks/_card_horizontal.html.erb
@@ -2,12 +2,8 @@
 <div class="w-full items-center" id="<%= dom_id(talk, :card_horizontal) %>">
 
   <%= link_to talk_path(talk),
-            class: "flex aspect-video shrink-0 relative",
-            data: {
-              controller: "view-transition",
-              view_transition_name_value: "card-horizontal-img"
-            } do %>
-    <%= image_tag talk.thumbnail_sm, srcset: ["#{talk.thumbnail_lg} 2x"], id: dom_id(talk), class: "w-full h-auto object-cover", loading: :lazy %>
+            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" %>
 </div>
diff --git a/app/views/talks/_talk.html.erb b/app/views/talks/_talk.html.erb
@@ -2,11 +2,9 @@
 
   <div <%= tag.attributes(
             class: "aspect-video banner-img card-horizontal-img relative",
-            style: "view-transition-name: card-horizontal-img",
+            style: "view-transition-name: #{dom_id(talk, :image)}",
             data: {
-              controller: "view-transition video-player",
-              view_transition_name_value: "banner-img",
-              view_transition_fade_value: "true",
+              controller: "video-player",
               video_player_poster_value: talk.thumbnail_lg,
               video_player_provider_value: "youtube",
               video_player_src_value: talk.video_id

diff --git a/package.json b/package.json
@@ -2,6 +2,7 @@
   "name": "app",
   "private": "true",
   "dependencies": {
+    "@domchristie/turn": "^2.0.0",
     "@hotwired/stimulus": "^3.2.1",
     "@hotwired/turbo-rails": "^7.3.0",
     "@tailwindcss/forms": "^0.5.3",

diff --git a/yarn.lock b/yarn.lock
@@ -7,6 +7,11 @@
   resolved "https://registry.yarnpkg.com/@alloc/quick-lru/-/quick-lru-5.2.0.tgz#7bf68b20c0a350f936915fcae06f58e32007ce30"
   integrity sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==
 
+"@domchristie/turn@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@domchristie/turn/-/turn-2.0.0.tgz#8da4201060ba525926c5720f2862ffec2bb557cb"
+  integrity sha512-oGPMkYNVCacOi7+icrDVz0DgOAT3U3cds4/ivNiIoU7QK2q2gMbFK2hwkgysC+i/HEa4TNJaw9Ow94ojhRQWcA==
+
 "@esbuild/[email protected]":
   version "0.17.18"
   resolved "https://registry.yarnpkg.com/@esbuild/android-arm64/-/android-arm64-0.17.18.tgz#4aa8d8afcffb4458736ca9b32baa97d7cb5861ea"