webm playback, maybe

lib/philomena/search/string.ex

@@ -2,7 +2,7 @@ defmodule Philomena.Search.String do
   def normalize(str) do
     str
     |> String.replace("\r", "")
-    |> String.split("\n")
+    |> String.split("\n", trim: true)
     |> Enum.map(fn s -> "(#{s})" end)
     |> Enum.join(" || ")
   end

lib/philomena_web/controllers/activity_controller.ex

@@ -83,6 +83,7 @@ defmodule PhilomenaWeb.ActivityController do
       |> join(:inner, [i], f in Feature, on: [image_id: i.id])
       |> order_by([i, f], desc: f.created_at)
       |> limit(1)
+      |> preload([:tags])
       |> Repo.one()
 
     streams =

lib/philomena_web/templates/image/_image_container.html.slime

@@ -1,4 +1,4 @@
-.image-container class=@size data-image-tags="[]" data-size=@size data-uris=Jason.encode!(thumb_urls(@image, false))
+= image_container @image, @size, fn ->
   = cond do
     - @image.duplicate_id ->
       .media-box__overlay
@@ -15,6 +15,18 @@
   .media-box__overlay.js-spoiler-info-overlay
   a href="/#{@image.id}"
     = if @image.thumbnails_generated do
-      picture: img src=thumb_url(@image, false, @size)
+      - uris = thumb_urls(@image, false)
+      - vid = @image.image_mime_type == "video/webm"
+      - tags = Enum.map(@image.tags, & &1.name) |> Enum.sort() |> Enum.join(", ")
+      - alt = "Size: #{@image.image_width}x#{@image.image_height} | Tagged: #{tags}"
+
+      = if vid do
+        video alt=alt autoplay="autoplay" muted="muted" loop="loop" playsinline="playsinline"
+          source src=uris[@size] type="video/webm"
+          source src=String.replace(uris[@size], ".webm", ".mp4") type="video/mp4"
+      - else
+        picture
+          img alt=alt src=thumb_url(@image, false, @size) srcset="#{uris[@size]} 1x, #{uris[:medium]} 2x"
+
     - else
       | Thumbnails not yet generated

lib/philomena_web/templates/layout/app.html.slime

@@ -26,5 +26,4 @@ html lang="en"
       main#content class="layout--wide"
         = render @view_module, @view_template, assigns
       = render PhilomenaWeb.LayoutView, "_footer.html", assigns
-      eex:
+      = clientside_data(@conn)
-        <div class="js-datastore" data-hidden-filter="" data-spoilered-filter="" data-hidden-tag-list="[]" data-spoilered-tag-list="[]"></div>

lib/philomena_web/views/image_view.ex

@@ -43,4 +43,25 @@ defmodule PhilomenaWeb.ImageView do
   def image_url_root do
     Application.get_env(:philomena, :image_url_root)
   end
+
+  def image_container(image, size, block) do
+    data = [
+      image_id: image.id,
+      image_tags: Jason.encode!(Enum.map(image.tags, & &1.id)),
+      score: image.score,
+      faves: image.faves_count,
+      upvotes: image.upvotes_count,
+      downvotes: image.downvotes_count,
+      comment_count: image.comments_count,
+      created_at: NaiveDateTime.to_iso8601(image.created_at),
+      source_url: image.source_url,
+      uris: Jason.encode!(thumb_urls(image, false)),
+      width: image.image_width,
+      height: image.image_height,
+      aspect_ratio: image.image_aspect_ratio,
+      size: size
+    ]
+
+    content_tag(:div, block.(), class: "image-container #{size}", data: data)
+  end
 end

lib/philomena_web/views/layout_view.ex

@@ -1,6 +1,8 @@
 defmodule PhilomenaWeb.LayoutView do
   use PhilomenaWeb, :view
 
+  alias Philomena.Search
+
   def render_time(conn) do
     (Time.diff(Time.utc_now(), conn.assigns[:start_time], :microsecond) / 1000.0)
     |> Float.round(3)
@@ -12,4 +14,34 @@ defmodule PhilomenaWeb.LayoutView do
 
     host |> to_string
   end
+
+  def clientside_data(conn) do
+    extra = Map.get(conn.assigns, :clientside_data, [])
+    interactions = Map.get(conn.assigns, :interactions, [])
+    user = conn.assigns.current_user
+    filter = conn.assigns.current_filter
+
+    data = [
+      filter_id: filter.id,
+      hidden_tag_list: Jason.encode!(filter.hidden_tag_ids),
+      hidden_filter: Search.String.normalize(filter.hidden_complex_str || ""),
+      spoilered_tag_list: Jason.encode!(filter.spoilered_tag_ids),
+      spoilered_filter: Search.String.normalize(filter.spoilered_complex_str || ""),
+      user_id: if(user, do: user.id, else: nil),
+      user_name: if(user, do: user.name, else: nil),
+      user_slug: if(user, do: user.slug, else: nil),
+      user_is_signed_in: !!user,
+      user_can_edit_filter: if(user, do: filter.user_id == user.id, else: false),
+      spoiler_type: if(user, do: user.spoiler_type, else: "static"),
+      watched_tag_list: Jason.encode!(if(user, do: user.watched_tag_ids, else: [])),
+      fancy_tag_edit: if(user, do: user.fancy_tag_field_on_edit, else: true),
+      fancy_tag_upload: if(user, do: user.fancy_tag_field_on_upload, else: true),
+      interactions: Jason.encode!(interactions),
+      ignored_tag_list: "[]"
+    ]
+
+    data = Keyword.merge(data, extra)
+
+    tag(:div, class: "js-datastore", data: data)
+  end
 end