image.rs (3235B)
1 use std::rc::Rc; 2 3 use crate::app::components::events::{EventExt, RoomExt}; 4 use matrix_sdk::{ 5 events::{room::message::ImageMessageEventContent, AnySyncMessageEvent}, 6 Room, 7 }; 8 use rand::random; 9 use yew::prelude::*; 10 11 pub(crate) struct Image { 12 props: Props, 13 } 14 15 #[derive(Clone, Properties, Debug)] 16 pub struct Props { 17 #[prop_or_default] 18 pub prev_event: Option<AnySyncMessageEvent>, 19 pub event: AnySyncMessageEvent, 20 pub image_event: ImageMessageEventContent, 21 pub room: Rc<Room>, 22 } 23 24 impl Component for Image { 25 type Message = (); 26 type Properties = Props; 27 28 fn create(props: Self::Properties, _link: ComponentLink<Self>) -> Self { 29 Image { props } 30 } 31 32 fn update(&mut self, _msg: Self::Message) -> bool { 33 false 34 } 35 36 fn change(&mut self, _props: Self::Properties) -> bool { 37 // TODO fix the PartialEq hack 38 /*if format!("{:?}", self.props) != format!("{:?}", props) { 39 self.props = props; 40 true 41 } else { 42 false 43 }*/ 44 true 45 } 46 47 //noinspection RsTypeCheck 48 fn view(&self) -> Html { 49 let new_user = self.props.event.is_new_user(self.props.prev_event.as_ref()); 50 let sender_displayname = if new_user { 51 self.props.room.get_sender_displayname(&self.props.event) 52 } else { 53 "" 54 }; 55 56 if let Some(image_url) = &self.props.image_event.url { 57 let thumbnail = self 58 .props 59 .image_event 60 .info 61 .as_ref() 62 .unwrap() 63 .thumbnail_url 64 .as_ref() 65 .unwrap_or(image_url); 66 67 let lightbox_id: u8 = random(); 68 let lightbox_id_full = format!("image_{}", lightbox_id); 69 let lightbox_href_full = format!("#image_{}", lightbox_id); 70 if new_user { 71 html! { 72 <div> 73 <p><displayname>{sender_displayname}{": "}</displayname></p> 74 <a href=lightbox_href_full><div class="thumbnail-container"><img src=thumbnail/></div></a> 75 <div class="lightbox short-animate" id=lightbox_id_full> 76 <img class="long-animate" src=image_url/> 77 </div> 78 <div id="lightbox-controls" class="short-animate"> 79 <a id="close-lightbox" class="long-animate" href="#!">{"Close Lightbox"}</a> 80 </div> 81 </div> 82 } 83 } else { 84 html! { 85 <div> 86 <a href=lightbox_href_full><img src=thumbnail/></a> 87 <div class="lightbox short-animate" id=lightbox_id_full> 88 <img class="long-animate" src=image_url/> 89 </div> 90 <div id="lightbox-controls" class="short-animate"> 91 <a id="close-lightbox" class="long-animate" href="#!">{"Close Lightbox"}</a> 92 </div> 93 </div> 94 } 95 } 96 } else { 97 html! {} 98 } 99 } 100 }