From eff2698664dec6a3c93820edbd6186f74f5d8450 Mon Sep 17 00:00:00 2001 From: Baptiste Gelez Date: Wed, 6 Mar 2019 14:11:36 +0100 Subject: [PATCH] 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 --- .editorconfig | 1 + plume-models/src/medias.rs | 62 +++++++++------ plume-models/src/safe_string.rs | 24 +++++- po/plume/ar.po | 24 ++++++ po/plume/de.po | 23 ++++++ po/plume/en.po | 20 +++++ po/plume/es.po | 20 +++++ po/plume/fr.po | 23 ++++++ po/plume/gl.po | 23 ++++++ po/plume/it.po | 23 ++++++ po/plume/ja.po | 24 ++++++ po/plume/nb.po | 22 +++++ po/plume/pl.po | 24 ++++++ po/plume/plume.pot | 18 +++++ po/plume/pt.po | 24 ++++++ po/plume/ru.po | 24 ++++++ src/routes/medias.rs | 17 ++-- static/css/_global.scss | 28 +++++++ static/images/audio-file.svg | 65 +++++++++++++++ static/images/unknown-file.svg | 65 +++++++++++++++ static/images/video-file.svg | 115 +++++++++++++++++++++++++++ templates/medias/details.rs.html | 2 +- templates/medias/index.rs.html | 50 +++++++----- templates/partials/post_card.rs.html | 4 +- templates/posts/new.rs.html | 4 + templates/users/dashboard.rs.html | 2 +- templates/users/edit.rs.html | 4 + 27 files changed, 677 insertions(+), 58 deletions(-) create mode 100644 static/images/audio-file.svg create mode 100644 static/images/unknown-file.svg create mode 100644 static/images/video-file.svg diff --git a/.editorconfig b/.editorconfig index 824d5aa1..6409424f 100644 --- a/.editorconfig +++ b/.editorconfig @@ -7,6 +7,7 @@ trim_trailing_whitespace = true [*.{js,rs,css,tera,html}] charset = utf-8 +indent_size = 4 [*.{rs,tera,css,html}] indent_style = space diff --git a/plume-models/src/medias.rs b/plume-models/src/medias.rs index d55b9e33..08bfb932 100644 --- a/plume-models/src/medias.rs +++ b/plume-models/src/medias.rs @@ -45,6 +45,17 @@ pub enum MediaCategory { Unknown, } +impl MediaCategory { + pub fn to_string(&self) -> &str { + match *self { + MediaCategory::Image => "image", + MediaCategory::Audio => "audio", + MediaCategory::Video => "video", + MediaCategory::Unknown => "unknown", + } + } +} + impl Media { insert!(medias, NewMedia); get!(medias); @@ -56,6 +67,23 @@ impl Media { .map_err(Error::from) } + pub fn page_for_user(conn: &Connection, user: &User, (min, max): (i32, i32)) -> Result> { + medias::table + .filter(medias::owner_id.eq(user.id)) + .offset(min as i64) + .limit((max - min) as i64) + .load::(conn) + .map_err(Error::from) + } + + pub fn count_for_user(conn: &Connection, user: &User) -> Result { + medias::table + .filter(medias::owner_id.eq(user.id)) + .count() + .get_result(conn) + .map_err(Error::from) + } + pub fn category(&self) -> MediaCategory { match &*self .file_path @@ -71,41 +99,25 @@ impl Media { } } - pub fn preview_html(&self, conn: &Connection) -> Result { - let url = self.url(conn)?; - Ok(match self.category() { - MediaCategory::Image => SafeString::new(&format!( - r#"{}"#, - url, escape(&self.alt_text), escape(&self.alt_text) - )), - MediaCategory::Audio => SafeString::new(&format!( - r#""#, - url, escape(&self.alt_text) - )), - MediaCategory::Video => SafeString::new(&format!( - r#""#, - url, escape(&self.alt_text) - )), - MediaCategory::Unknown => SafeString::new(""), - }) - } - pub fn html(&self, conn: &Connection) -> Result { let url = self.url(conn)?; Ok(match self.category() { - MediaCategory::Image => SafeString::new(&format!( + MediaCategory::Image => SafeString::trusted(&format!( r#"{}"#, url, escape(&self.alt_text), escape(&self.alt_text) )), - MediaCategory::Audio => SafeString::new(&format!( - r#""#, + MediaCategory::Audio => SafeString::trusted(&format!( + r#"
"#, url, escape(&self.alt_text) )), - MediaCategory::Video => SafeString::new(&format!( - r#""#, + MediaCategory::Video => SafeString::trusted(&format!( + r#""#, url, escape(&self.alt_text) )), - MediaCategory::Unknown => SafeString::new(""), + MediaCategory::Unknown => SafeString::trusted(&format!( + r#""#, + url, + )), }) } diff --git a/plume-models/src/safe_string.rs b/plume-models/src/safe_string.rs index bef1aa73..3a923f02 100644 --- a/plume-models/src/safe_string.rs +++ b/plume-models/src/safe_string.rs @@ -19,12 +19,20 @@ lazy_static! { static ref CLEAN: Builder<'static> = { let mut b = Builder::new(); b.add_generic_attributes(iter::once("id")) - .add_tags(iter::once("iframe")) + .add_tags(&[ "iframe", "video", "audio" ]) .id_prefix(Some("postcontent-")) .url_relative(UrlRelative::Custom(Box::new(url_add_prefix))) .add_tag_attributes( "iframe", - ["width", "height", "src", "frameborder"].iter().map(|&v| v), + [ "width", "height", "src", "frameborder" ].iter().map(|&v| v), + ) + .add_tag_attributes( + "video", + [ "src", "title", "controls" ].iter(), + ) + .add_tag_attributes( + "audio", + [ "src", "title", "controls" ].iter(), ); b }; @@ -53,6 +61,18 @@ impl SafeString { value: CLEAN.clean(&value).to_string(), } } + + /// Creates a new `SafeString`, but without escaping the given value. + /// + /// Only use when you are sure you can trust the input (when the HTML + /// is entirely generated by Plume, not depending on user-inputed data). + /// Prefer `SafeString::new` as much as possible. + pub fn trusted(value: impl AsRef) -> Self { + SafeString { + value: value.as_ref().to_string() + } + } + pub fn set(&mut self, value: &str) { self.value = CLEAN.clean(value).to_string(); } diff --git a/po/plume/ar.po b/po/plume/ar.po index d8cf561a..6e8c1b78 100644 --- a/po/plume/ar.po +++ b/po/plume/ar.po @@ -236,6 +236,13 @@ msgstr "تعديل حسابك" msgid "Your Profile" msgstr "ملفك الشخصي" +msgid "To change your avatar, upload it in your gallery and select from there." +msgstr "" + +#, fuzzy +msgid "Upload an avatar" +msgstr "استخدمها كصورة رمزية" + #, fuzzy msgid "Display name" msgstr "الاسم العلني" @@ -526,6 +533,15 @@ msgstr "العنوان الثانوي" msgid "Content" msgstr "المحتوى" +msgid "" +"You can upload medias to your gallery, and copy their Markdown code in your " +"articles to insert them." +msgstr "" + +#, fuzzy +msgid "Upload media" +msgstr "إرسال" + # src/template_utils.rs:144 msgid "Tags, separated by commas" msgstr "" @@ -719,9 +735,17 @@ msgstr "إرسال" msgid "You don't have any media yet." msgstr "ليس لديك أية وسائط بعد." +#, fuzzy +msgid "Content warning: {0}" +msgstr "تحذير عن المحتوى" + msgid "Delete" msgstr "حذف" +#, fuzzy +msgid "Details" +msgstr "تفاصيل الصورة" + msgid "Media upload" msgstr "إرسال الوسائط" diff --git a/po/plume/de.po b/po/plume/de.po index 02d89818..bcc9b7d3 100644 --- a/po/plume/de.po +++ b/po/plume/de.po @@ -248,6 +248,13 @@ msgstr "Ändere deinen Account" msgid "Your Profile" msgstr "Dein Profil" +msgid "To change your avatar, upload it in your gallery and select from there." +msgstr "" + +#, fuzzy +msgid "Upload an avatar" +msgstr "Als Avatar verwenden" + #, fuzzy msgid "Display name" msgstr "Anzeigename" @@ -541,6 +548,15 @@ msgstr "Untertitel" msgid "Content" msgstr "Inhalt" +msgid "" +"You can upload medias to your gallery, and copy their Markdown code in your " +"articles to insert them." +msgstr "" + +#, fuzzy +msgid "Upload media" +msgstr "Hochladen" + # src/template_utils.rs:143 msgid "Tags, separated by commas" msgstr "" @@ -736,9 +752,16 @@ msgstr "Hochladen" msgid "You don't have any media yet." msgstr "Derzeit sind noch keine Mediendateien hochgeladen." +#, fuzzy +msgid "Content warning: {0}" +msgstr "Warnhinweis zum Inhalt" + msgid "Delete" msgstr "Löschen" +msgid "Details" +msgstr "" + msgid "Media upload" msgstr "Hochladen von Mediendateien" diff --git a/po/plume/en.po b/po/plume/en.po index 70745c9d..556c410a 100644 --- a/po/plume/en.po +++ b/po/plume/en.po @@ -241,6 +241,12 @@ msgstr "" msgid "Your Profile" msgstr "" +msgid "To change your avatar, upload it in your gallery and select from there." +msgstr "" + +msgid "Upload an avatar" +msgstr "" + # src/template_utils.rs:144 msgid "Display name" msgstr "" @@ -518,6 +524,14 @@ msgstr "" msgid "Content" msgstr "" +msgid "" +"You can upload medias to your gallery, and copy their Markdown code in your " +"articles to insert them." +msgstr "" + +msgid "Upload media" +msgstr "" + # src/template_utils.rs:144 msgid "Tags, separated by commas" msgstr "" @@ -683,9 +697,15 @@ msgstr "" msgid "You don't have any media yet." msgstr "" +msgid "Content warning: {0}" +msgstr "" + msgid "Delete" msgstr "" +msgid "Details" +msgstr "" + msgid "Media upload" msgstr "" diff --git a/po/plume/es.po b/po/plume/es.po index 5449da22..9c79ec7c 100644 --- a/po/plume/es.po +++ b/po/plume/es.po @@ -229,6 +229,12 @@ msgstr "Edita tu cuenta" msgid "Your Profile" msgstr "Tu perfil" +msgid "To change your avatar, upload it in your gallery and select from there." +msgstr "" + +msgid "Upload an avatar" +msgstr "" + # src/template_utils.rs:144 msgid "Display name" msgstr "" @@ -503,6 +509,14 @@ msgstr "" msgid "Content" msgstr "Contenido" +msgid "" +"You can upload medias to your gallery, and copy their Markdown code in your " +"articles to insert them." +msgstr "" + +msgid "Upload media" +msgstr "" + # src/template_utils.rs:144 msgid "Tags, separated by commas" msgstr "" @@ -672,9 +686,15 @@ msgstr "" msgid "You don't have any media yet." msgstr "" +msgid "Content warning: {0}" +msgstr "" + msgid "Delete" msgstr "" +msgid "Details" +msgstr "" + msgid "Media upload" msgstr "" diff --git a/po/plume/fr.po b/po/plume/fr.po index 229edff5..bc7a3a25 100644 --- a/po/plume/fr.po +++ b/po/plume/fr.po @@ -247,6 +247,13 @@ msgstr "Modifier votre compte" msgid "Your Profile" msgstr "Votre profil" +msgid "To change your avatar, upload it in your gallery and select from there." +msgstr "" + +#, fuzzy +msgid "Upload an avatar" +msgstr "Utiliser comme avatar" + #, fuzzy msgid "Display name" msgstr "Nom affiché" @@ -536,6 +543,15 @@ msgstr "Sous-titre" msgid "Content" msgstr "Contenu" +msgid "" +"You can upload medias to your gallery, and copy their Markdown code in your " +"articles to insert them." +msgstr "" + +#, fuzzy +msgid "Upload media" +msgstr "Téléverser" + # src/template_utils.rs:143 msgid "Tags, separated by commas" msgstr "" @@ -730,9 +746,16 @@ msgstr "Téléverser" msgid "You don't have any media yet." msgstr "Vous n’avez pas encore de média." +#, fuzzy +msgid "Content warning: {0}" +msgstr "Avertissement" + msgid "Delete" msgstr "Supprimer" +msgid "Details" +msgstr "" + msgid "Media upload" msgstr "Téléversement de média" diff --git a/po/plume/gl.po b/po/plume/gl.po index 87a4a580..a5f8d88c 100644 --- a/po/plume/gl.po +++ b/po/plume/gl.po @@ -247,6 +247,13 @@ msgstr "Edite a súa conta" msgid "Your Profile" msgstr "O seu perfil" +msgid "To change your avatar, upload it in your gallery and select from there." +msgstr "" + +#, fuzzy +msgid "Upload an avatar" +msgstr "Utilizar como avatar" + #, fuzzy msgid "Display name" msgstr "Nome mostrado" @@ -536,6 +543,15 @@ msgstr "Subtítulo" msgid "Content" msgstr "Contido" +msgid "" +"You can upload medias to your gallery, and copy their Markdown code in your " +"articles to insert them." +msgstr "" + +#, fuzzy +msgid "Upload media" +msgstr "Subir" + # src/template_utils.rs:143 msgid "Tags, separated by commas" msgstr "" @@ -726,9 +742,16 @@ msgstr "Subir" msgid "You don't have any media yet." msgstr "Aínda non ten medios" +#, fuzzy +msgid "Content warning: {0}" +msgstr "Aviso sobre o contido" + msgid "Delete" msgstr "Eliminar" +msgid "Details" +msgstr "" + msgid "Media upload" msgstr "Subir medios" diff --git a/po/plume/it.po b/po/plume/it.po index fd598ac3..4f5ad9e5 100644 --- a/po/plume/it.po +++ b/po/plume/it.po @@ -247,6 +247,13 @@ msgstr "Modifica il tuo account" msgid "Your Profile" msgstr "Il tuo Profilo" +msgid "To change your avatar, upload it in your gallery and select from there." +msgstr "" + +#, fuzzy +msgid "Upload an avatar" +msgstr "Usa come avatar" + #, fuzzy msgid "Display name" msgstr "Nome Visualizzato" @@ -539,6 +546,15 @@ msgstr "Sottotitolo" msgid "Content" msgstr "Contenuto" +msgid "" +"You can upload medias to your gallery, and copy their Markdown code in your " +"articles to insert them." +msgstr "" + +#, fuzzy +msgid "Upload media" +msgstr "Carica" + # src/template_utils.rs:143 msgid "Tags, separated by commas" msgstr "" @@ -733,9 +749,16 @@ msgstr "Carica" msgid "You don't have any media yet." msgstr "Non hai ancora nessun media." +#, fuzzy +msgid "Content warning: {0}" +msgstr "Avviso di contenuto sensibile" + msgid "Delete" msgstr "Elimina" +msgid "Details" +msgstr "" + msgid "Media upload" msgstr "Caricamento di un media" diff --git a/po/plume/ja.po b/po/plume/ja.po index 27ea4adc..a0348536 100644 --- a/po/plume/ja.po +++ b/po/plume/ja.po @@ -240,6 +240,13 @@ msgstr "自分のアカウントを編集" msgid "Your Profile" msgstr "自分のプロフィール" +msgid "To change your avatar, upload it in your gallery and select from there." +msgstr "" + +#, fuzzy +msgid "Upload an avatar" +msgstr "アバターとして使う" + #, fuzzy msgid "Display name" msgstr "表示名" @@ -531,6 +538,15 @@ msgstr "サブタイトル" msgid "Content" msgstr "コメント" +msgid "" +"You can upload medias to your gallery, and copy their Markdown code in your " +"articles to insert them." +msgstr "" + +#, fuzzy +msgid "Upload media" +msgstr "アップロード" + # src/template_utils.rs:144 msgid "Tags, separated by commas" msgstr "" @@ -709,9 +725,17 @@ msgstr "アップロード" msgid "You don't have any media yet." msgstr "メディアがまだありません。" +#, fuzzy +msgid "Content warning: {0}" +msgstr "コンテンツの警告" + msgid "Delete" msgstr "削除" +#, fuzzy +msgid "Details" +msgstr "メディアの詳細" + msgid "Media upload" msgstr "メディアのアップロード" diff --git a/po/plume/nb.po b/po/plume/nb.po index 86bbde06..fcbb2f45 100644 --- a/po/plume/nb.po +++ b/po/plume/nb.po @@ -253,6 +253,12 @@ msgstr "Rediger kontoen din" msgid "Your Profile" msgstr "Din profil" +msgid "To change your avatar, upload it in your gallery and select from there." +msgstr "" + +msgid "Upload an avatar" +msgstr "" + #, fuzzy msgid "Display name" msgstr "Visningsnavn" @@ -565,6 +571,15 @@ msgstr "Tittel" msgid "Content" msgstr "Innhold" +msgid "" +"You can upload medias to your gallery, and copy their Markdown code in your " +"articles to insert them." +msgstr "" + +#, fuzzy +msgid "Upload media" +msgstr "Din kommentar" + # src/template_utils.rs:143 msgid "Tags, separated by commas" msgstr "" @@ -748,9 +763,16 @@ msgstr "" msgid "You don't have any media yet." msgstr "" +#, fuzzy +msgid "Content warning: {0}" +msgstr "Innhold" + msgid "Delete" msgstr "" +msgid "Details" +msgstr "" + msgid "Media upload" msgstr "" diff --git a/po/plume/pl.po b/po/plume/pl.po index 06aca272..8dfc44ff 100644 --- a/po/plume/pl.po +++ b/po/plume/pl.po @@ -222,6 +222,13 @@ msgstr "Edytuj swoje konto" msgid "Your Profile" msgstr "Twój profil" +msgid "To change your avatar, upload it in your gallery and select from there." +msgstr "" + +#, fuzzy +msgid "Upload an avatar" +msgstr "Użyj jako awataru" + msgid "Display name" msgstr "Nazwa wyświetlana" @@ -505,6 +512,15 @@ msgstr "Podtytuł" msgid "Content" msgstr "Zawartość" +msgid "" +"You can upload medias to your gallery, and copy their Markdown code in your " +"articles to insert them." +msgstr "" + +#, fuzzy +msgid "Upload media" +msgstr "Wyślij" + # src/template_utils.rs:143 msgid "Tags, separated by commas" msgstr "Tagi, oddzielone przecinkami" @@ -678,9 +694,17 @@ msgstr "Wyślij" msgid "You don't have any media yet." msgstr "Nie masz żadnej zawartości multimedialnej." +#, fuzzy +msgid "Content warning: {0}" +msgstr "Ostrzeżenie o zawartości" + msgid "Delete" msgstr "Usuń" +#, fuzzy +msgid "Details" +msgstr "Szczegóły zawartości multimedialnej" + msgid "Media upload" msgstr "Wysyłanie zawartości multimedialnej" diff --git a/po/plume/plume.pot b/po/plume/plume.pot index 25098e15..65864ca2 100644 --- a/po/plume/plume.pot +++ b/po/plume/plume.pot @@ -239,6 +239,12 @@ msgstr "" msgid "Your Profile" msgstr "" +msgid "To change your avatar, upload it in your gallery and select from there." +msgstr "" + +msgid "Upload an avatar" +msgstr "" + # src/template_utils.rs:144 msgid "Display name" msgstr "" @@ -510,6 +516,12 @@ msgstr "" msgid "Content" msgstr "" +msgid "You can upload medias to your gallery, and copy their Markdown code in your articles to insert them." +msgstr "" + +msgid "Upload media" +msgstr "" + # src/template_utils.rs:144 msgid "Tags, separated by commas" msgstr "" @@ -668,9 +680,15 @@ msgstr "" msgid "You don't have any media yet." msgstr "" +msgid "Content warning: {0}" +msgstr "" + msgid "Delete" msgstr "" +msgid "Details" +msgstr "" + msgid "Media upload" msgstr "" diff --git a/po/plume/pt.po b/po/plume/pt.po index 8af4f91a..9b19d301 100644 --- a/po/plume/pt.po +++ b/po/plume/pt.po @@ -235,6 +235,13 @@ msgstr "Editar sua conta" msgid "Your Profile" msgstr "Seu Perfil" +msgid "To change your avatar, upload it in your gallery and select from there." +msgstr "" + +#, fuzzy +msgid "Upload an avatar" +msgstr "Utilizar como avatar" + #, fuzzy msgid "Display name" msgstr "Nome exibido" @@ -526,6 +533,15 @@ msgstr "Subtítulo" msgid "Content" msgstr "Conteúdo" +msgid "" +"You can upload medias to your gallery, and copy their Markdown code in your " +"articles to insert them." +msgstr "" + +#, fuzzy +msgid "Upload media" +msgstr "Carregar" + # src/template_utils.rs:144 msgid "Tags, separated by commas" msgstr "" @@ -701,9 +717,17 @@ msgstr "Carregar" msgid "You don't have any media yet." msgstr "Você ainda não tem nenhuma mídia." +#, fuzzy +msgid "Content warning: {0}" +msgstr "Alerta de conteúdo" + msgid "Delete" msgstr "Suprimir" +#, fuzzy +msgid "Details" +msgstr "Detalhes da mídia" + msgid "Media upload" msgstr "Carregamento de mídia" diff --git a/po/plume/ru.po b/po/plume/ru.po index c846267b..b5aaa3b6 100644 --- a/po/plume/ru.po +++ b/po/plume/ru.po @@ -252,6 +252,13 @@ msgstr "Редактировать ваш аккаунт" msgid "Your Profile" msgstr "Ваш профиль" +msgid "To change your avatar, upload it in your gallery and select from there." +msgstr "" + +#, fuzzy +msgid "Upload an avatar" +msgstr "Использовать как аватар" + #, fuzzy msgid "Display name" msgstr "Имя для отображения" @@ -543,6 +550,15 @@ msgstr "Подзаголовок" msgid "Content" msgstr "Содержимое" +msgid "" +"You can upload medias to your gallery, and copy their Markdown code in your " +"articles to insert them." +msgstr "" + +#, fuzzy +msgid "Upload media" +msgstr "Загрузить" + # src/template_utils.rs:143 msgid "Tags, separated by commas" msgstr "" @@ -740,9 +756,17 @@ msgstr "Загрузить" msgid "You don't have any media yet." msgstr "Пока что вы не можете загружать медиафайлы." +#, fuzzy +msgid "Content warning: {0}" +msgstr "Предупреждение о контенте" + msgid "Delete" msgstr "Удалить" +#, fuzzy +msgid "Details" +msgstr "Детали медиафайла" + msgid "Media upload" msgstr "Загрузка медиафайлов" diff --git a/src/routes/medias.rs b/src/routes/medias.rs index 7276e1a8..aea2e733 100644 --- a/src/routes/medias.rs +++ b/src/routes/medias.rs @@ -5,14 +5,17 @@ use rocket_i18n::I18n; use std::fs; use plume_models::{Error, db_conn::DbConn, medias::*, users::User}; use template_utils::Ructe; -use routes::errors::ErrorPage; +use routes::{Page, errors::ErrorPage}; -#[get("/medias")] -pub fn list(user: User, conn: DbConn, intl: I18n) -> Result { - let medias = Media::for_user(&*conn, user.id)?; +#[get("/medias?")] +pub fn list(user: User, conn: DbConn, intl: I18n, page: Option) -> Result { + let page = page.unwrap_or_default(); + let medias = Media::page_for_user(&*conn, &user, page.limits())?; Ok(render!(medias::index( - &(&*conn, &intl.catalog, Some(user)), - medias + &(&*conn, &intl.catalog, Some(user.clone())), + medias, + page.0, + Page::total(Media::count_for_user(&*conn, &user)? as i32) ))) } @@ -109,7 +112,7 @@ pub fn delete(id: i32, user: User, conn: DbConn) -> Result if media.owner_id == user.id { media.delete(&*conn)?; } - Ok(Redirect::to(uri!(list))) + Ok(Redirect::to(uri!(list: page = _))) } #[post("/medias//avatar")] diff --git a/static/css/_global.scss b/static/css/_global.scss index 1a7286aa..6f9719b6 100644 --- a/static/css/_global.scss +++ b/static/css/_global.scss @@ -307,6 +307,10 @@ figure { figcaption { padding: 1em; } + + audio, video { + width: 100%; + } } .preview { @@ -318,6 +322,30 @@ figure { margin-right: 20px; } +.media-preview { + min-height: 8em; + + &:not(.image) { + background-color: #7765E3; + background-repeat: no-repeat; + background-position: center; + background-size: 4em; + } + + &.unknown { + background-image: url('/static/images/unknown-file.svg'); + display: block; + } + + &.audio { + background-image: url('/static/images/audio-file.svg'); + } + + &.video { + background-image: url('/static/images/video-file.svg'); + } +} + /// Avatars .avatar { background-position: center; diff --git a/static/images/audio-file.svg b/static/images/audio-file.svg new file mode 100644 index 00000000..8c8a699c --- /dev/null +++ b/static/images/audio-file.svg @@ -0,0 +1,65 @@ + + + + + + image/svg+xml + + + + + + + + + + diff --git a/static/images/unknown-file.svg b/static/images/unknown-file.svg new file mode 100644 index 00000000..79feb4d3 --- /dev/null +++ b/static/images/unknown-file.svg @@ -0,0 +1,65 @@ + + + + + + image/svg+xml + + + + + + + + + + diff --git a/static/images/video-file.svg b/static/images/video-file.svg new file mode 100644 index 00000000..e1672df8 --- /dev/null +++ b/static/images/video-file.svg @@ -0,0 +1,115 @@ + + + + + + image/svg+xml + + + + + + + + + + + + + + + + diff --git a/templates/medias/details.rs.html b/templates/medias/details.rs.html index 0e740a37..3974b972 100644 --- a/templates/medias/details.rs.html +++ b/templates/medias/details.rs.html @@ -9,7 +9,7 @@ @:base(ctx, i18n!(ctx.1, "Media details"), {}, {}, {

@i18n!(ctx.1, "Media details")

- @i18n!(ctx.1, "Go back to the gallery") + @i18n!(ctx.1, "Go back to the gallery")
diff --git a/templates/medias/index.rs.html b/templates/medias/index.rs.html index d5302bc7..a2927ad8 100644 --- a/templates/medias/index.rs.html +++ b/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) +@(ctx: BaseContext, medias: Vec, page: i32, n_pages: i32) @:base(ctx, i18n!(ctx.1, "Your media"), {}, {}, {

@i18n!(ctx.1, "Your media")

@@ -12,22 +11,33 @@ @i18n!(ctx.1, "Upload") -
- @if medias.is_empty() { -

@i18n!(ctx.1, "You don't have any media yet.")

+ @if medias.is_empty() { +

@i18n!(ctx.1, "You don't have any media yet.")

+ } + +
+ @for media in medias { +
+
+
+

@media.alt_text

+ @if let Some(cw) = media.content_warning { +

@i18n!(ctx.1, "Content warning: {0}"; cw)

+ } +
+ +
} -
- @for media in medias { -
- @Html(media.preview_html(ctx.0).unwrap_or(SafeString::new(""))) -
-

@media.alt_text

-
-
- -
-
- } -
-
+ + @paginate(ctx.1, page, n_pages) }) diff --git a/templates/partials/post_card.rs.html b/templates/partials/post_card.rs.html index 3301cb30..13d31830 100644 --- a/templates/partials/post_card.rs.html +++ b/templates/partials/post_card.rs.html @@ -16,7 +16,7 @@

@article.subtitle

-

+

@Html(i18n!(ctx.1, "By {0}"; format!( "{}", 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") } -

+
diff --git a/templates/posts/new.rs.html b/templates/posts/new.rs.html index af2c47b2..0e472075 100644 --- a/templates/posts/new.rs.html +++ b/templates/posts/new.rs.html @@ -27,6 +27,10 @@ @content_len +

+ @i18n!(ctx.1, "You can upload medias to your gallery, and copy their Markdown code in your articles to insert them.") + @i18n!(ctx.1, "Upload media") +

@input!(ctx.1, tags (optional text), "Tags, separated by commas", form, errors.clone(), "") diff --git a/templates/users/dashboard.rs.html b/templates/users/dashboard.rs.html index ae357c6a..e9da2cd8 100644 --- a/templates/users/dashboard.rs.html +++ b/templates/users/dashboard.rs.html @@ -37,6 +37,6 @@

@i18n!(ctx.1, "Your media")

- @i18n!(ctx.1, "Go to your gallery") + @i18n!(ctx.1, "Go to your gallery")
}) diff --git a/templates/users/edit.rs.html b/templates/users/edit.rs.html index 7c7e6dc7..592f2901 100644 --- a/templates/users/edit.rs.html +++ b/templates/users/edit.rs.html @@ -9,6 +9,10 @@ @:base(ctx, i18n!(ctx.1, "Edit your account"), {}, {}, { @if let Some(u) = ctx.2.clone() {

@i18n!(ctx.1, "Your Profile")

+

+ @i18n!(ctx.1, "To change your avatar, upload it in your gallery and select from there.") + @i18n!(ctx.1, "Upload an avatar") +