Merge pull request #1295 from h3poteto/iss-1187/another-win

refs #1187 Allow to open media in another window

src-tauri/Cargo.toml

@@ -30,6 +30,7 @@ url = "2.5"
 simplelog = "0.12"
 once_cell = "1.19.0"
 rust-i18n = "2"
+base64 = "0.21"
 
 [features]
 # by default Tauri runs in production mode

src-tauri/locales/en.yml

@@ -4,3 +4,5 @@ app_menu:
  help: Help
  window: Window
  crash_reporting: Crash Report
+media:
+ title: Media

src-tauri/src/main.rs

@@ -2,12 +2,12 @@
  all(not(debug_assertions), target_os = "windows"),
  windows_subsystem = "windows"
 )]
-use std::{fs::OpenOptions, path::PathBuf, str::FromStr, sync::Arc};
-
+use base64::{engine::general_purpose, Engine};
 use megalodon::{self, oauth};
+use rust_i18n::t;
 use serde::Serialize;
+use std::{fs::OpenOptions, path::PathBuf, str::FromStr, sync::Arc};
 use tauri::{async_runtime::Mutex, AppHandle, Manager, State};
-
 mod database;
 mod entities;
 mod favicon;
@@ -463,6 +463,21 @@ async fn frontend_log(message: String, level: String) -> () {
  ()
 }
 
+#[tauri::command]
+async fn open_media(app_handle: AppHandle, media_url: String) -> () {
+ let encoded = general_purpose::STANDARD_NO_PAD.encode(media_url.clone());
+
+ let _ = tauri::WindowBuilder::new(
+ &app_handle,
+ encoded,
+ tauri::WindowUrl::External(media_url.parse().unwrap()),
+ )
+ .menu(menu::media_menu())
+ .title(t!("media.title"))
+ .build()
+ .expect("failed to build media window");
+}
+
 async fn start_timeline_streaming(
  app_handle: Arc<AppHandle>,
  sqlite_pool: &sqlx::SqlitePool,
@@ -646,6 +661,7 @@ fn main() -> Result<(), Box<dyn std::error::Error>> {
  switch_devtools,
  frontend_log,
  update_column_width,
+ open_media,
  ])
  .setup(|app| {
  let app_handle = app.handle();

src-tauri/src/menu.rs

@@ -84,3 +84,9 @@ pub fn menu() -> Menu {
  }
  menu
 }
+
+pub fn media_menu() -> Menu {
+ let submenu = Submenu::new("File", Menu::new().add_native_item(MenuItem::CloseWindow));
+ let menu = Menu::new().add_submenu(submenu);
+ menu
+}

src/components/Media.tsx

@@ -4,6 +4,7 @@ import { Entity } from 'megalodon'
 import { ReactElement, useCallback, useEffect, useState } from 'react'
 import { Icon } from '@rsuite/icons'
 import { BsChevronRight, BsChevronLeft } from 'react-icons/bs'
+import { invoke } from '@tauri-apps/api/tauri'
 
 type Props = {
  index: number
@@ -88,6 +89,10 @@ const Media: React.FC<Props> = props => {
 }
 
 const mediaComponent = (media: Entity.Attachment): ReactElement => {
+ const externalWindow = async (url: string) => {
+ await invoke('open_media', { mediaUrl: url })
+ }
+
  switch (media.type) {
  case 'gifv':
  return (
@@ -109,7 +114,8 @@ const mediaComponent = (media: Entity.Attachment): ReactElement => {
  fill
  alt={media.description ? media.description : media.id}
  title={media.description ? media.description : media.id}
- style={{ objectFit: 'contain' }}
+ style={{ objectFit: 'contain', cursor: 'pointer' }}
+ onClick={() => externalWindow(media.url)}
  />
  )
  }

src/components/timelines/status/Attachments.tsx

@@ -2,11 +2,12 @@ import Image from 'next/image'
 import { Entity } from 'megalodon'
 import { Button, IconButton } from 'rsuite'
 import { Icon } from '@rsuite/icons'
-import { BsEyeSlash, BsCaretRightFill, BsVolumeUp } from 'react-icons/bs'
+import { BsEyeSlash, BsCaretRightFill, BsVolumeUp, BsBoxArrowUpRight } from 'react-icons/bs'
 import { useEffect, useState } from 'react'
 import { FormattedMessage } from 'react-intl'
 import emptyPreview from 'src/black.png'
 import { ColumnWidth } from 'src/entities/timeline'
+import { invoke } from '@tauri-apps/api/tauri'
 
 type Props = {
  attachments: Array<Entity.Attachment>
@@ -123,6 +124,10 @@ type AttachmentProps = {
 const Attachment: React.FC<AttachmentProps> = props => {
  const { media, changeSensitive } = props
 
+ const externalWindow = async (url: string) => {
+ await invoke('open_media', { mediaUrl: url })
+ }
+
  return (
  <div style={{ position: 'relative' }}>
  <IconButton
@@ -132,6 +137,13 @@ const Attachment: React.FC<AttachmentProps> = props => {
  onClick={changeSensitive}
  style={{ position: 'absolute', top: '4px', left: '4px' }}
  />
+ <IconButton
+ icon={<Icon as={BsBoxArrowUpRight} />}
+ size="sm"
+ appearance="subtle"
+ onClick={() => externalWindow(media.url)}
+ style={{ position: 'absolute', top: '4px', right: '4px' }}
+ />
  {(media.type === 'gifv' || media.type === 'video') && (
  <IconButton
  icon={<Icon as={BsCaretRightFill} />}