image send

src/broker_messages/pind.rs

@@ -42,14 +42,14 @@ pub struct SendText {
     pub text: String,
     pub reply: Option<String>,
 }
-/// Request to send image t
+
+/// Request to send image 
 #[derive(Clone, Message)]
 #[rtype(result = "()")]
 pub struct SendImage {
     pub kaksh_kunjika: String,
     pub kunjika: String,
-    pub part: String,
-    pub image_id: i32
+    pub src: String
 }
 
 // Request to send text t

src/broker_messages/sansad.rs

@@ -18,13 +18,14 @@ pub struct WsText {
     pub sender_kunjika: String,
     pub msg_id: u128
 }
+
 // Request to send transfer text
 #[derive(Clone, Message)]
 #[rtype(result = "()")]
 pub struct WsImage {
-    pub text: String,
-    pub reply: Option<String>,
-    pub sender_kunjika: String
+    pub src: String,
+    pub sender_kunjika: String,
+    pub msg_id: u128
 }
 
 // Request to send transfer text

src/chat_pinnd/message.rs

@@ -21,6 +21,25 @@ impl Handler<ms::pind::SendText> for ChatPinnd {
     }
 }
 
+/// send image to everyone
+impl Handler<ms::pind::SendImage> for ChatPinnd {
+    type Result = ();
+
+    fn handle(&mut self, msg: ms::pind::SendImage, _: &mut Self::Context) -> Self::Result {
+        if let Some(kaksh) = self.kaksh.get_mut(&msg.kaksh_kunjika) {
+            kaksh.last_message_id += 1;
+            let msg_id = kaksh.last_message_id;
+            kaksh.loog.iter().for_each(|c| {
+                c.addr.do_send(ms::sansad::WsImage {
+                    sender_kunjika: msg.kunjika.to_owned(),
+                    src: msg.src.to_owned(),
+                    msg_id
+                });
+            });
+        }
+    }
+}
+
 /// send status to everyone
 impl Handler<ms::pind::SendStatus> for ChatPinnd {
     type Result = ();

src/chat_pinnd/mod.rs

@@ -47,6 +47,7 @@ impl Actor for ChatPinnd {
     fn started(&mut self, ctx: &mut Self::Context) {
         // for actix broker 
         self.subscribe_system_async::<ms::pind::SendText>(ctx);
+        self.subscribe_system_async::<ms::pind::SendImage>(ctx);
         self.subscribe_system_async::<ms::pind::SendStatus>(ctx);
         self.subscribe_system_async::<ms::pind::LeaveUser>(ctx);
     }

src/ws_sansad/handlers.rs

@@ -16,6 +16,20 @@ impl Handler<ms::sansad::WsText> for WsSansad {
     }
 }
 
+/// send text message
+impl Handler<ms::sansad::WsImage> for WsSansad {
+    type Result = ();
+    fn handle(&mut self, msg: ms::sansad::WsImage, ctx: &mut Self::Context) -> Self::Result {
+        let json = json!({
+            "cmd": "img",
+            "src": msg.src,
+            "kunjika": msg.sender_kunjika, // Sender's kunjuka
+            "msg_id": msg.msg_id.to_string()
+        });
+        ctx.text(json.to_string());
+    }
+}
+
 
 /// send text status
 impl Handler<ms::sansad::WsStatus> for WsSansad {

src/ws_sansad/messages.rs

@@ -86,4 +86,44 @@ impl WsSansad {
             status
         });
     }
+
+    /// send text to vayakti in kaksh
+    pub async fn send_image(&mut self, val: Value) {
+        // check if vayakti exist
+        if let Isthiti::None = self.isthiti {
+            self.send_err_response("Not in any Kaksh");
+            return;
+        }
+
+        // check if connected to any kaksh
+        match self.isthiti {
+            Isthiti::Kaksh(_) => (),
+            _ => {
+                self.send_err_response("Kaksh not connected");
+                return;
+            }
+        }
+
+        // image src
+        let src = match val.get("src") {
+            Some(val) => val,
+            None => {
+                self.send_err_response("Invalid request");
+                return;
+            }
+        }.as_str().unwrap().to_owned();
+
+        let kaksh_kunjika = match &self.isthiti {
+            Isthiti::Kaksh(kaksh_kunjika) => {
+                kaksh_kunjika.to_owned()
+            }, _ => {
+                return;
+            }
+        };
+        Broker::<SystemBroker>::issue_async(ms::pind::SendImage {
+            kaksh_kunjika,
+            kunjika: self.kunjika.to_owned(),
+            src
+        });
+    }
 }

src/ws_sansad/mod.rs

@@ -101,20 +101,12 @@ impl WsSansad {
     /// parse the request text from client
     async fn parse_text_handle(&mut self, msg: String) {
         if let Ok(val) = serde_json::from_str::<Value>(&msg) {
-            // let cmd  = match val.get("cmd") {
-            //     Some(v) => v,
-            //     None => return
-            // };
-            // let cmd  = match cmd.as_str() {
-            //     Some(v) => v,
-            //     None => return
-            // };
-
             match val.get("cmd").unwrap().as_str().unwrap() {
                 "join" => { self.join_kaksh(val).await },
                 "rand" => { self.join_random(val).await },
                 "randnext" => { self.join_random_next().await },
                 "text" => { self.send_text(val).await },
+                "img" => { self.send_image(val).await },
                 "status" => { self.send_status(val).await },
                 "list" => { self.list().await },
                 "leave" => { self.leave_kaksh().await },

static/index.html

@@ -163,10 +163,11 @@
     <!-- Action Clip -->
     <div id="action_clip" class="clip-win action-clip is-hidden">
         <div style="padding-bottom: 10px;">
-            <button class="button">
-                <img src="img/image.svg" alt="Image" width="50" class="siimple--py-2 siimple--px-2">
+            <button class="button" onclick="$('#file-input').click()">
+                <img src="img/image.svg" alt="Image" width="50" max-size="3072" class="siimple--py-2 siimple--px-2">
                 <div>send image</div>
             </button>
+            <input id="file-input" class="is-hidden" type="file" accept="image/png, image/jpeg"/>
         </div>
         <div>
             <button onclick="changeColor()" class="button"><img src="img/color.svg" alt="C" height="16"></button>
@@ -206,9 +207,11 @@
         </div>
     </div>      
     <script src="js/jquery-3.5.1.min.js"></script>
+    <script src="js/compressor.min.js"></script>
     <script src="js/actions.js"></script>
     <script src="js/state.js"></script>
     <script src="js/message.js"></script>
+    <script src="js/camera.js"></script>
     <script src="js/app.js"></script>
     <script src="js/onload.js"></script>
 </body>

static/js/app.js

@@ -76,6 +76,9 @@ socket.addEventListener('message', function (event) {
         case 'text':
             Messages.pushMessage(j.kunjika, j.text, j.reply, j.msg_id);
             break;
+        case 'img':
+            Messages.pushImage(j.kunjika, j.src,  j.msg_id);
+            break;
         case 'connected':
             vayakti[j.kunjika] = j.name;
             if(!$('#vayakti_model').hasClass('.is-hidden')) refreshVayaktiList();
@@ -216,30 +219,3 @@ function autosize(el){
         $('#selected_clip').css('bottom',  (el.scrollHeight + 10) + 'px');
     },0);    
 }
-
-// Camera
-var video = $('#videoElement')[0];
-if (navigator.mediaDevices.getUserMedia) {
-navigator.mediaDevices.getUserMedia({ video: true, width: {max: 100} })
-    .then(function (stream) {
-    video.srcObject = stream;
-    })
-    .catch(function (error) {
-    console.log('Something went wrong!');
-    });
-}
-
-var resultb64='';
-function capture() {        
-    var canvas = $('<canvas>')[0];     
-    var video = $('#videoElement')[0];
-    canvas.width = 200;
-    canvas.height = 200;
-    canvas.getContext('2d').drawImage(video, 0, 0, 120,120);  
-    resultb64=canvas.toDataURL();
-    socket.send(JSON.stringify({
-        cmd: 'text',
-        text: resultb64,
-        reply: ''
-    }));
-}

static/js/camera.js

@@ -0,0 +1,38 @@
+var Camera = class {
+    static setupCamera() {
+        $('#file-input')[0].addEventListener('change', (e) => {
+            const file = e.target.files[0];
+            if (!file) {
+                return;
+            }
+            this.compressImage(file, 0.1, 'image/webp');
+        });
+    }    
+
+    static compressImage(file, qual, mime) {
+        new Compressor(file, {
+            quality: qual,
+            width: 320,
+            mimeType: mime,
+            success(result) {
+                var reader = new FileReader();
+                reader.readAsDataURL(result); 
+                reader.onloadend = function() {
+                    var base64data = reader.result;
+                    if(base64data.length > 63000 && mime != 'image/jpeg') {
+                        base64data = null;
+                        result = null;
+                        Camera.compressImage(file, 0.7, 'image/jpeg');
+                        return;
+                    }
+                    
+                    socket.send(JSON.stringify({
+                        cmd: "img",
+                        src: base64data
+                    }));
+                    $('#action_clip').addClass('is-hidden');
+                }
+            },
+        });
+    }
+}

static/js/message.js

@@ -88,6 +88,26 @@ let Messages = class {
         scroll.scrollTop(scroll[0].scrollHeight);
     }
 
+    static pushImage(sender, src, msg_id) {
+        var isMe = myinfo.kunjika == sender;
+        var area = $('#message_area');
+        var elm = $('<div>', {class: 'message '+(isMe?'message-me':'message-other'), msgid: msg_id});
+        if(!no_name_message) {
+            if(sender == myinfo.kunjika)
+                elm.append($('<div>', {class: 'message-by'}).append('me'))
+            else
+                elm.append($('<div>', {class: 'message-by'}).append(vayakti[sender]+'('+sender.substr(0, 8)+')'))
+        } 
+        elm.append($('<img>', {src: src}));
+        elm.click(function() {
+            Messages.pick(this);
+        });
+        area.append(elm);
+
+        var scroll = $("#message_area_scroll");
+        scroll.scrollTop(scroll[0].scrollHeight);
+    }
+
     // in message area 
     static pushStatus(text) {
         var area = $('#message_area');

static/js/onload.js

@@ -44,4 +44,6 @@ $(document).ready(() => {
         evt.preventDefault();
         send();
     });
+
+    Camera.setupCamera();
 });