Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add lightbox support and Hydrogen URL hashes relative to the room #12

Merged
merged 11 commits into from
Jun 8, 2022

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.

1 participant