show current street name in video

breunigs · Dec 20, 2023 · 58c28ef · 58c28ef
1 parent 829beb9
commit 58c28ef
Show file tree

Hide file tree

Showing 305 changed files with 9,577 additions and 55 deletions.
diff --git a/assets/css/main.scss b/assets/css/main.scss
@@ -109,7 +109,7 @@ $videoInfoOverlayPadding: 0.5rem;
   padding: $videoInfoOverlayPadding;
   // padding-top: 0.7rem;
   color: #fff;
-  max-width: 90%;
+  max-width: 48%;
   overflow-x: hidden;
   white-space: nowrap;
   box-sizing: border-box;
@@ -135,6 +135,9 @@ $videoInfoOverlayPadding: 0.5rem;
   right: 0;
   border-bottom-left-radius: $videoInfoOverlayPadding;
   display: none;
+
+  // for text-ellipsis on the left; quite a hack
+  direction: rtl;
 }
 
 $videoBarHeight: 2.6rem;

diff --git a/assets/js/video_player.js b/assets/js/video_player.js
@@ -91,13 +91,15 @@ function markPlay() {
   })
   autoplay = false
   current.setAttribute("phx-update", "ignore")
+  videoMetadataEl.setAttribute("phx-update", "ignore")
 }
 
 function markPause() {
   window.pushEvent('video-current-time', {
     pos: videoTimeInMs
   })
   current.setAttribute("phx-update", "")
+  videoMetadataEl.setAttribute("phx-update", "")
 }
 
 function sendCurrentVideoTime(eventName) {
@@ -373,7 +375,7 @@ function setVideo() {
   updatePlaypause();
 }
 
-const videoRecordingDateEl = document.getElementById('videoRecordingDate');
+const videoMetadataEl = document.getElementById('videoRecordingDate');
 
 function updateMetadata() {
   if (!videoMeta.recording_dates) return;
@@ -383,7 +385,17 @@ function updateMetadata() {
     if (videoMeta.recording_dates[i].timestamp > videoTimeInMs) break;
     text = videoMeta.recording_dates[i].text;
   }
-  if (videoRecordingDateEl.textContent !== text) videoRecordingDateEl.textContent = text;
+
+  if (videoMeta.street_names) {
+    let name = "";
+    for (let i = 0; i < videoMeta.street_names.length; i += 1) {
+      if (videoMeta.street_names[i].timestamp > videoTimeInMs) break;
+      name = videoMeta.street_names[i].text;
+    }
+    if (name != "") text = `${name}, ${text}`
+  }
+
+  if (videoMetadataEl.textContent !== text) videoMetadataEl.textContent = text;
 }
 
 let progress

diff --git a/config/config.exs b/config/config.exs
@@ -28,6 +28,7 @@ config :veloroute, VelorouteWeb.Endpoint,
   live_view: [signing_salt: PhoenixCredentials.live_view_signing_salt()]
 
 config :veloroute,
+  map_matcher: Basemap.MapMatcher.OSRM,
   env: Mix.env()
 
 # Configures Elixir's Logger

diff --git a/config/test.exs b/config/test.exs
@@ -6,6 +6,9 @@ config :veloroute, VelorouteWeb.Endpoint,
   http: [port: 4002],
   server: false
 
+config :veloroute,
+  map_matcher: Basemap.MapMatcher.NoOp
+
 # Print only warnings and errors during test
 # config :logger, level: :debug
 config :logger, level: :warning
diff --git a/data/auto_generated/video/00ac485abc0115aac3f60077b3cfcda6.ex b/data/auto_generated/video/00ac485abc0115aac3f60077b3cfcda6.ex
@@ -50,6 +50,15 @@ defmodule Data.AutoGenerated.Video.Rendered_00ac485abc0115aac3f60077b3cfcda6 do
     [%{text: "April 2021", timestamp: 0}]
   end
 
+  @impl Video.Rendered
+  # names derived from OpenStreetMap data, thus ODbL https://osmfoundation.org/wiki/Licence
+  def street_names() do
+    [
+      %{timestamp: 0, text: "Maria-Louisen-Straße"},
+      %{timestamp: 2602, text: "St. Benedictstraße"}
+    ]
+  end
+
   @impl Video.Rendered
   def coords() do
     [

diff --git a/data/auto_generated/video/0159e66a6e241954326fb1a7fa387a2c.ex b/data/auto_generated/video/0159e66a6e241954326fb1a7fa387a2c.ex
@@ -62,6 +62,27 @@ defmodule Data.AutoGenerated.Video.Rendered_0159e66a6e241954326fb1a7fa387a2c do
     [%{timestamp: 0, text: "Oktober 2023"}]
   end
 
+  @impl Video.Rendered
+  # names derived from OpenStreetMap data, thus ODbL https://osmfoundation.org/wiki/Licence
+  def street_names() do
+    [
+      %{timestamp: 0, text: "Sanderskoppel"},
+      %{timestamp: 3336, text: "Borstels Ende"},
+      %{timestamp: 5338, text: "Stübeheide"},
+      %{timestamp: 50940, text: "Wellingsbütteler Landstraße"},
+      %{timestamp: 80164, text: "Fuhlsbüttler Straße"},
+      %{timestamp: 86402, text: "Im Grünen Grunde"},
+      %{timestamp: 90775, text: "Am Hasenberge"},
+      %{timestamp: 120_154, text: "Röntgenstraße"},
+      %{timestamp: 135_866, text: "Alsterkrugchaussee"},
+      %{timestamp: 142_972, text: "Zeppelinstraße"},
+      %{timestamp: 145_974, text: "Weg beim Jäger"},
+      %{timestamp: 206_523, text: "Spreenende"},
+      %{timestamp: 253_126, text: "Papenreye"},
+      %{timestamp: 286_486, text: "Kollaustraße"}
+    ]
+  end
+
   @impl Video.Rendered
   def coords() do
     [

diff --git a/data/auto_generated/video/015bbbef846018e7a1710faaac9dd992.ex b/data/auto_generated/video/015bbbef846018e7a1710faaac9dd992.ex
@@ -71,6 +71,33 @@ defmodule Data.AutoGenerated.Video.Rendered_015bbbef846018e7a1710faaac9dd992 do
     [%{text: "August 2022", timestamp: 0}]
   end
 
+  @impl Video.Rendered
+  # names derived from OpenStreetMap data, thus ODbL https://osmfoundation.org/wiki/Licence
+  def street_names() do
+    [
+      %{timestamp: 0, text: "Hauptstraße"},
+      %{timestamp: 99365, text: "Sankt Hubertus"},
+      %{timestamp: 126_053, text: "Ratzeburger Landstraße"},
+      %{timestamp: 165_084, text: "Ratzeburger Allee"},
+      %{timestamp: 289_285, text: "Mühlentorbrücke"},
+      %{timestamp: 293_211, text: "Mühlenbrücke"},
+      %{timestamp: 295_213, text: "Wallstraße"},
+      %{timestamp: 327_179, text: "Possehlstraße"},
+      %{timestamp: 344_982, text: "Holstentorplatz"},
+      %{timestamp: 347_984, text: "Willy-Brandt-Allee"},
+      %{timestamp: 364_998, text: "Auf der Wallhalbinsel"},
+      %{timestamp: 373_338, text: "Roddenkoppel"},
+      %{timestamp: 389_684, text: "Katharinenstraße"},
+      %{timestamp: 406_427, text: "Karlstraße"},
+      %{timestamp: 416_769, text: "Schwartauer Allee"},
+      %{timestamp: 447_066, text: "Schwartauer Landstraße"},
+      %{timestamp: 507_826, text: "Tremskamp"},
+      %{timestamp: 526_508, text: "Lübecker Straße"},
+      %{timestamp: 548_988, text: "Auguststraße"},
+      %{timestamp: 567_820, text: "Eutiner Ring"}
+    ]
+  end
+
   @impl Video.Rendered
   def coords() do
     [

diff --git a/data/auto_generated/video/02e2513fde7fb4935b5137eef2d753fd.ex b/data/auto_generated/video/02e2513fde7fb4935b5137eef2d753fd.ex
@@ -50,6 +50,17 @@ defmodule Data.AutoGenerated.Video.Rendered_02e2513fde7fb4935b5137eef2d753fd do
     [%{timestamp: 0, text: "Oktober 2023"}]
   end
 
+  @impl Video.Rendered
+  # names derived from OpenStreetMap data, thus ODbL https://osmfoundation.org/wiki/Licence
+  def street_names() do
+    [
+      %{timestamp: 0, text: "Heilwigstraße"},
+      %{timestamp: 3336, text: "Geffckenstraße"},
+      %{timestamp: 12676, text: "Loogeplatz"},
+      %{timestamp: 21016, text: "Goernestraße"}
+    ]
+  end
+
   @impl Video.Rendered
   def coords() do
     [

diff --git a/data/auto_generated/video/03f238d85f7f6530d4ce7c847bd46ea7.ex b/data/auto_generated/video/03f238d85f7f6530d4ce7c847bd46ea7.ex
@@ -70,6 +70,67 @@ defmodule Data.AutoGenerated.Video.Rendered_03f238d85f7f6530d4ce7c847bd46ea7 do
     [%{text: "April 2022", timestamp: 0}, %{text: "August 2021", timestamp: 40791}]
   end
 
+  @impl Video.Rendered
+  # names derived from OpenStreetMap data, thus ODbL https://osmfoundation.org/wiki/Licence
+  def street_names() do
+    [
+      %{timestamp: 0, text: "Stephansplatz"},
+      %{timestamp: 7406, text: "Dag-Hammarskjöld-Brücke"},
+      %{timestamp: 11409, text: ""},
+      %{timestamp: 16413, text: "Dag-Hammarskjöld-Platz"},
+      %{timestamp: 25420, text: ""},
+      %{timestamp: 27755, text: "Tiergartenstraße"},
+      %{timestamp: 55832, text: "Rentzelstraße"},
+      %{timestamp: 59960, text: "Schröderstiftstraße"},
+      %{timestamp: 61962, text: ""},
+      %{timestamp: 66207, text: "Sternschanze"},
+      %{timestamp: 69209, text: ""},
+      %{timestamp: 82887, text: "Schröderstiftstraße"},
+      %{timestamp: 85619, text: "Beim Schlump"},
+      %{timestamp: 91275, text: "Gustav-Falke-Straße"},
+      %{timestamp: 106_424, text: "Heymannstraße"},
+      %{timestamp: 123_104, text: "Goebenbrücke"},
+      %{timestamp: 128_442, text: "Goebenstraße"},
+      %{timestamp: 144_079, text: "Unnastraße"},
+      %{timestamp: 157_756, text: "Eidelstedter Weg"},
+      %{timestamp: 178_244, text: "Julius-Vosseler-Straße"},
+      %{timestamp: 194_657, text: ""},
+      %{timestamp: 208_001, text: "Beethovenallee"},
+      %{timestamp: 210_003, text: "Vizelinstraße"},
+      %{timestamp: 215_007, text: ""},
+      %{timestamp: 244_364, text: "Emil-Andresen-Straße"},
+      %{timestamp: 249_368, text: "Max-Tau-Straße"},
+      %{timestamp: 258_708, text: "Schillingsbektal"},
+      %{timestamp: 263_379, text: ""},
+      %{timestamp: 278_391, text: "Döhrnstraße"},
+      %{timestamp: 286_403, text: "Oddernskamp"},
+      %{timestamp: 302_904, text: "Stellinger Chaussee"},
+      %{timestamp: 310_243, text: ""},
+      %{timestamp: 333_552, text: "Hinter der Lieth"},
+      %{timestamp: 341_302, text: "Hagendeel"},
+      %{timestamp: 352_311, text: "Baarkamp"},
+      %{timestamp: 362_652, text: "Deelwisch"},
+      %{timestamp: 367_990, text: "Kollauwanderweg"},
+      %{timestamp: 372_660, text: ""},
+      %{timestamp: 378_665, text: "Schmiedekoppel"},
+      %{timestamp: 382_335, text: ""},
+      %{timestamp: 398_348, text: "Bondenwald"},
+      %{timestamp: 404_352, text: ""},
+      %{timestamp: 425_703, text: "Niendorfer Gehege"},
+      %{timestamp: 429_706, text: ""},
+      %{timestamp: 502_431, text: "Frohmestraße"},
+      %{timestamp: 508_894, text: "John-Chretien-Wanderweg / Düp-Ring"},
+      %{timestamp: 524_907, text: ""},
+      %{timestamp: 569_970, text: "Perckentinweg"},
+      %{timestamp: 578_310, text: ""},
+      %{timestamp: 592_321, text: "Wagrierweg"},
+      %{timestamp: 595_324, text: ""},
+      %{timestamp: 620_344, text: "Zum Niendorfer Grenzhaus"},
+      %{timestamp: 630_016, text: "Oldesloer Straße"},
+      %{timestamp: 652_186, text: ""}
+    ]
+  end
+
   @impl Video.Rendered
   def coords() do
     [

diff --git a/data/auto_generated/video/0418cd7dcedb68e4c370ed752d33cecb.ex b/data/auto_generated/video/0418cd7dcedb68e4c370ed752d33cecb.ex
@@ -67,6 +67,54 @@ defmodule Data.AutoGenerated.Video.Rendered_0418cd7dcedb68e4c370ed752d33cecb do
     [%{timestamp: 0, text: "Juli 2023"}]
   end
 
+  @impl Video.Rendered
+  # names derived from OpenStreetMap data, thus ODbL https://osmfoundation.org/wiki/Licence
+  def street_names() do
+    [
+      %{timestamp: 0, text: "Rathausmarkt"},
+      %{timestamp: 5168, text: "Große Johannisstraße"},
+      %{timestamp: 9171, text: "Adolphsplatz"},
+      %{timestamp: 13508, text: "Alter Wall"},
+      %{timestamp: 29620, text: "Altenwallbrücke"},
+      %{timestamp: 32142, text: "Rödingsmarkt"},
+      %{timestamp: 51157, text: "Schaartor"},
+      %{timestamp: 54826, text: "Schaarsteinweg"},
+      %{timestamp: 59497, text: ""},
+      %{timestamp: 61498, text: "Schaarmarkt"},
+      %{timestamp: 63834, text: "Ditmar-Koel-Straße"},
+      %{timestamp: 75843, text: "Bei den St. Pauli-Landungsbrücken"},
+      %{timestamp: 96520, text: "St. Pauli-Elbtunnel"},
+      %{timestamp: 130_180, text: "Beim Kraftwerk"},
+      %{timestamp: 145_325, text: "Hermann-Blohm-Straße"},
+      %{timestamp: 161_004, text: "Reiherdamm"},
+      %{timestamp: 194_893, text: "Argentinienbrücke"},
+      %{timestamp: 205_407, text: "Klütjenfelder Straße"},
+      %{timestamp: 230_094, text: "Reiherstieg-Hauptdeich"},
+      %{timestamp: 251_778, text: "Fährstraße"},
+      %{timestamp: 272_127, text: "Veringstraße"},
+      %{timestamp: 304_754, text: "Gert-Schwämmle-Weg"},
+      %{timestamp: 345_549, text: ""},
+      %{timestamp: 348_850, text: "Am Inselpark"},
+      %{timestamp: 355_493, text: "Hauland"},
+      %{timestamp: 400_863, text: "Kükenbracksweg"},
+      %{timestamp: 408_869, text: ""},
+      %{timestamp: 419_878, text: "König-Georg-Deich"},
+      %{timestamp: 422_880, text: "Alte Harburger Elbbrücke"},
+      %{timestamp: 430_553, text: "Brücke des 17. Juni"},
+      %{timestamp: 447_900, text: "Hannoversche Straße"},
+      %{timestamp: 502_896, text: "Moorstraße"},
+      %{timestamp: 509_669, text: "Seevepassage"},
+      %{timestamp: 512_338, text: "Harburger Ring"},
+      %{timestamp: 543_791, text: "Eißendorfer Straße"},
+      %{timestamp: 553_465, text: "Am Irrgarten"},
+      %{timestamp: 556_134, text: "Denickestraße"},
+      %{timestamp: 606_324, text: "Eißendorfer Pferdeweg"},
+      %{timestamp: 621_002, text: "Heimfelder Straße"},
+      %{timestamp: 648_024, text: "Triftstraße"},
+      %{timestamp: 664_370, text: "Denickestraße"}
+    ]
+  end
+
   @impl Video.Rendered
   def coords() do
     [

diff --git a/data/auto_generated/video/04559b1556d6bb69b84eeaa15eaa14d1.ex b/data/auto_generated/video/04559b1556d6bb69b84eeaa15eaa14d1.ex
@@ -56,6 +56,18 @@ defmodule Data.AutoGenerated.Video.Rendered_04559b1556d6bb69b84eeaa15eaa14d1 do
     [%{text: "Mai 2022", timestamp: 0}]
   end
 
+  @impl Video.Rendered
+  # names derived from OpenStreetMap data, thus ODbL https://osmfoundation.org/wiki/Licence
+  def street_names() do
+    [
+      %{timestamp: 0, text: "Am Exerzierplatz"},
+      %{timestamp: 4470, text: "Fadens Tannen"},
+      %{timestamp: 24023, text: "Forstweg"},
+      %{timestamp: 50044, text: "Ulzburger Straße"},
+      %{timestamp: 98399, text: "Schmuggelstieg"}
+    ]
+  end
+
   @impl Video.Rendered
   def coords() do
     [

diff --git a/data/auto_generated/video/0564511a98d53f27dd754ae1a4af11fa.ex b/data/auto_generated/video/0564511a98d53f27dd754ae1a4af11fa.ex
@@ -58,6 +58,24 @@ defmodule Data.AutoGenerated.Video.Rendered_0564511a98d53f27dd754ae1a4af11fa do
     [%{text: "April 2022", timestamp: 0}]
   end
 
+  @impl Video.Rendered
+  # names derived from OpenStreetMap data, thus ODbL https://osmfoundation.org/wiki/Licence
+  def street_names() do
+    [
+      %{timestamp: 0, text: "Hamburger Straße"},
+      %{timestamp: 3670, text: "Adolph-Schönfelder-Straße"},
+      %{timestamp: 18682, text: "Biedermannplatz"},
+      %{timestamp: 36696, text: "Schleidenstraße"},
+      %{timestamp: 45036, text: "Saarlandstraße"},
+      %{timestamp: 104_519, text: ""},
+      %{timestamp: 106_854, text: "Jahnbrücke"},
+      %{timestamp: 109_523, text: ""},
+      %{timestamp: 116_528, text: "Limaweg"},
+      %{timestamp: 130_540, text: "Sengelmannstraße"},
+      %{timestamp: 167_352, text: "Rathenaustraße"}
+    ]
+  end
+
   @impl Video.Rendered
   def coords() do
     [