Skip to content

Conversation

@MadLittleMods
Copy link
Contributor

@MadLittleMods MadLittleMods commented Jun 7, 2022

Add image lightbox support and Hydrogen URL hashes relative to the room

Related to element-hq/hydrogen-web#677

Requires the changes from element-hq/hydrogen-web#749 (split out from element-hq/hydrogen-web#653)

Hydrogen routing relative to the room (remove session and room from the URL hash)

Before:
Page URL: doesn't work

<div class="Timeline_messageBody">
   <div class="media" style="max-width: 400px">
      <div class="spacer" style="padding-top: 48.75%;"></div>
      <a href="undefined">
          <img src="http://192.168.1.182:8008//_matrix/media/r0/thumbnail/my.synapse.server/RxfuMxEgYcXHKYWERkKVUkqO?width=400&amp;height=195&amp;method=scale" alt="Friction_between_surfaces.jpeg" title="Friction_between_surfaces.jpeg" style="max-width: 400px; max-height: 195px;">
      </a>
      <time>2/24 6:20 PM</time>
   </div>
   <!--node binding placeholder-->
</div>

Before (not relative):
Page URL: http://localhost:3050/!HBehERstyQBxyJDLfR:my.synapse.server/date/2022/02/24#/session/123/room/!HBehERstyQBxyJDLfR:my.synapse.server/lightbox/$17cgP6YBP9ny9xuU1vBmpOYFhRG4zpOe9SOgWi2Wxsk

<div class="Timeline_messageBody">
   <div class="media" style="max-width: 400px">
      <div class="spacer" style="padding-top: 48.75%;"></div>
      <a href="#/session/123/room/!HBehERstyQBxyJDLfR:my.synapse.server/lightbox/$17cgP6YBP9ny9xuU1vBmpOYFhRG4zpOe9SOgWi2Wxsk">
          <img src="http://192.168.1.182:8008//_matrix/media/r0/thumbnail/my.synapse.server/RxfuMxEgYcXHKYWERkKVUkqO?width=400&amp;height=195&amp;method=scale" alt="Friction_between_surfaces.jpeg" title="Friction_between_surfaces.jpeg" style="max-width: 400px; max-height: 195px;">
      </a>
      <time>2/24 6:20 PM</time>
   </div>
   <!--node binding placeholder-->
</div>

After (nice relative links):
Page URL: http://localhost:3050/!HBehERstyQBxyJDLfR:my.synapse.server/date/2022/02/24#/lightbox/$17cgP6YBP9ny9xuU1vBmpOYFhRG4zpOe9SOgWi2Wxsk

<div class="Timeline_messageBody">
   <div class="media" style="max-width: 400px">
      <div class="spacer" style="padding-top: 48.75%;"></div>
      <a href="#/lightbox/$17cgP6YBP9ny9xuU1vBmpOYFhRG4zpOe9SOgWi2Wxsk">
          <img src="http://192.168.1.182:8008//_matrix/media/r0/thumbnail/my.synapse.server/RxfuMxEgYcXHKYWERkKVUkqO?width=400&amp;height=195&amp;method=scale" alt="Friction_between_surfaces.jpeg" title="Friction_between_surfaces.jpeg" style="max-width: 400px; max-height: 195px;">
      </a>
      <time>2/24 6:20 PM</time>
   </div>
   <!--node binding placeholder-->
</div>

Todo

  • Test if escape keyboard shortcuts still work

Related to element-hq/hydrogen-web#677

Before:
```
<div class="Timeline_messageBody">
   <div class="media" style="max-width: 400px">
      <div class="spacer" style="padding-top: 48.75%;"></div>
      <a href="undefined" title="Friction_between_surfaces.jpeg" style="max-width: 400px; max-height: 195px;"></a><time>2/24 6:20 PM</time>
   </div>
   <!--node binding placeholder-->
</div>
```

After:
```
<div class="Timeline_messageBody">
   <div class="media" style="max-width: 400px">
      <div class="spacer" style="padding-top: 48.75%;"></div>
      <a href="#/session/123/room/!HBehERstyQBxyJDLfR:my.synapse.server/lightbox/$17cgP6YBP9ny9xuU1vBmpOYFhRG4zpOe9SOgWi2Wxsk"><img src="http://192.168.1.182:8008//_matrix/media/r0/thumbnail/my.synapse.server/RxfuMxEgYcXHKYWERkKVUkqO?width=400&amp;height=195&amp;method=scale" alt="Friction_between_surfaces.jpeg" title="Friction_between_surfaces.jpeg" style="max-width: 400px; max-height: 195px;"></a><time>2/24 6:20 PM</time>
   </div>
   <!--node binding placeholder-->
</div>
```
@MadLittleMods MadLittleMods added the T-Enhancement New feature or request label Jun 7, 2022
This way we can get rid of the bogus session and the duplicated roomId in the URL.

Example result: `http://localhost:3050/!HBehERstyQBxyJDLfR:my.synapse.server/date/2022/02/24#/lightbox/$17cgP6YBP9ny9xuU1vBmpOYFhRG4zpOe9SOgWi2Wxsk`

---

Before:
```
```

After:
```
```
@MadLittleMods MadLittleMods changed the title Fill in image link to lightbox (lightbox not working) Add lightbox support and Hydrogen URL hashes relative to the room Jun 8, 2022
MadLittleMods added a commit to element-hq/hydrogen-web that referenced this pull request Jun 8, 2022
@MadLittleMods MadLittleMods merged commit 7dfe8ca into main Jun 8, 2022
@MadLittleMods MadLittleMods added the A-archive-room-view The view to look at a room day by day in the archive label Apr 11, 2023
@MadLittleMods MadLittleMods deleted the madlittlemods/image-lightbox-routing branch April 26, 2023 09:06
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

A-archive-room-view The view to look at a room day by day in the archive T-Enhancement New feature or request

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants