Slightly improve the media experience (#452)

* Slightly improve the media experience

- Use a grid to display the list of media
- Add icons for non-image media preview
- Paginate the gallery
- Add links to the gallery in the editor and in the profile settings to make it more discoverable when you need it

Fixes #432

* Allow video and audio tags in SafeString

Otherwise we can't display their preview, nor show them in articles

Also show controls by default for these two elements

* Show fallback images for audio and unknown files, to make them more visible

* Add a new constructor to SafeString when the input is trusted and doesn't need to be escaped.

And use it to generate media previews.

* Make it possible to insert video/audio in articles

templates/medias/details.rs.html

@@ -9,7 +9,7 @@
 @:base(ctx, i18n!(ctx.1, "Media details"), {}, {}, {
     <h1>@i18n!(ctx.1, "Media details")</h1>
     <section>
-        <a href="@uri!(medias::list)">@i18n!(ctx.1, "Go back to the gallery")</a>
+        <a href="@uri!(medias::list: page = _)">@i18n!(ctx.1, "Go back to the gallery")</a>
     </section>
 
     <section>

templates/medias/index.rs.html

@@ -1,10 +1,9 @@
-@use plume_models::medias::Media;
-@use plume_models::safe_string::SafeString;
+@use plume_models::medias::*;
 @use templates::base;
 @use template_utils::*;
 @use routes::*;
 
-@(ctx: BaseContext, medias: Vec<Media>)
+@(ctx: BaseContext, medias: Vec<Media>, page: i32, n_pages: i32)
 
 @:base(ctx, i18n!(ctx.1, "Your media"), {}, {}, {
     <h1>@i18n!(ctx.1, "Your media")</h1>
@@ -12,22 +11,33 @@
         <a href="@uri!(medias::new)" class="inline-block button">@i18n!(ctx.1, "Upload")</a>
     </div>
 
-    <section>
-        @if medias.is_empty() {
-            <p>@i18n!(ctx.1, "You don't have any media yet.")</p>
+    @if medias.is_empty() {
+        <p>@i18n!(ctx.1, "You don't have any media yet.")</p>
+    }
+
+    <div class="cards spaced">
+        @for media in medias {
+          <div class="card">
+              <div class="cover media-preview @media.category().to_string()"
+                @if media.category() == MediaCategory::Image {
+                  style="background-image: url('@media.url(ctx.0).unwrap_or_default()')"
+                }
+              ></div>
+              <main>
+                  <p class="p-summary">@media.alt_text</p>
+                  @if let Some(cw) = media.content_warning {
+                      <p>@i18n!(ctx.1, "Content warning: {0}"; cw)</p>
+                  }
+              </main>
+              <footer>
+                <form action="@uri!(medias::delete: id = media.id)" class="inline" method="POST">
+                    <input type="submit" value="@i18n!(ctx.1, "Delete")"/>
+                </form>
+                &mdash;
+                <a href="@uri!(medias::details: id = media.id)">@i18n!(ctx.1, "Details")</a>
+              </footer>
+          </div>
         }
-        <div class="list">
-            @for media in medias {
-                <div class="card flex">
-                    @Html(media.preview_html(ctx.0).unwrap_or(SafeString::new("")))
-                    <main class="grow">
-                        <p><a href="@uri!(medias::details: id = media.id)">@media.alt_text</a></p>
-                    </main>
-                    <form action="@uri!(medias::delete: id = media.id)" class="inline" method="POST">
-                        <input type="submit" value="@i18n!(ctx.1, "Delete")"/>
-                    </form>
-                </div>
-            }
-        </div>
-    </section>
+    </div>
+    @paginate(ctx.1, page, n_pages)
 })

templates/partials/post_card.rs.html

@@ -16,7 +16,7 @@
     <main>
         <p class="p-summary">@article.subtitle</p>
     </main>
-    <p class="author">
+    <footer class="authors">
         @Html(i18n!(ctx.1, "By {0}"; format!(
             "<a class=\"p-author h-card\" href=\"{}\">{}</a>",
             uri!(user::details: name = article.get_authors(ctx.0).unwrap_or_default()[0].get_fqn(ctx.0)),
@@ -29,6 +29,6 @@
         @if !article.published {
         ⋅ @i18n!(ctx.1, "Draft")
         }
-    </p>
+    </footer>
 </div>
 

templates/posts/new.rs.html

@@ -27,6 +27,10 @@
         <label for="plume-editor">@i18n!(ctx.1, "Content")<small>@i18n!(ctx.1, "Markdown syntax is supported")</small></label>
         <textarea id="plume-editor" name="content" rows="20">@form.content</textarea>
 	    <small id="editor-left">@content_len</small>
+        <p>
+            @i18n!(ctx.1, "You can upload medias to your gallery, and copy their Markdown code in your articles to insert them.")
+            <a href="@uri!(medias::new)">@i18n!(ctx.1, "Upload media")</a>
+        </p>
 
         @input!(ctx.1, tags (optional text), "Tags, separated by commas", form, errors.clone(), "")
 

templates/users/dashboard.rs.html

@@ -37,6 +37,6 @@
 
     <section>
         <h2>@i18n!(ctx.1, "Your media")</h2>
-        <a class="button" href="@uri!(medias::list)">@i18n!(ctx.1, "Go to your gallery")</a>
+        <a class="button" href="@uri!(medias::list: page = _)">@i18n!(ctx.1, "Go to your gallery")</a>
     </section>
 })

templates/users/edit.rs.html

@@ -9,6 +9,10 @@
 @:base(ctx, i18n!(ctx.1, "Edit your account"), {}, {}, {
     @if let Some(u) = ctx.2.clone() {
         <h1>@i18n!(ctx.1, "Your Profile")</h1>
+        <p>
+            @i18n!(ctx.1, "To change your avatar, upload it in your gallery and select from there.")
+            <a href="@uri!(medias::new)">@i18n!(ctx.1, "Upload an avatar")</a>
+        </p>
         <form method="post" action="@uri!(user::update: _name = u.username.clone())">
             <!-- Rocket hack to use various HTTP methods -->
             <input type=hidden name="_method" value="put">