more description added

web/package.json

@@ -11,6 +11,7 @@
     "konva": "^8.0.1",
     "material-ui-image": "^3.3.2",
     "react": "^17.0.2",
+    "react-copy-to-clipboard": "^5.0.3",
     "react-dom": "^17.0.2",
     "react-konva": "^17.0.2-4",
     "react-measure": "^2.5.2",

web/src/components/DialogTorrentDetailsContent/index.jsx

@@ -5,6 +5,8 @@ import styled, { css } from 'styled-components'
 import { NoImageIcon } from 'icons'
 import { getPeerString, humanizeSize } from 'utils/Utils'
 import { viewedHost } from 'utils/Hosts'
+import { CopyToClipboard } from 'react-copy-to-clipboard'
+import { useState } from 'react'
 
 import { useUpdateCache, useCreateCacheMap } from './customHooks'
 
@@ -49,7 +51,11 @@ const HeaderSection = styled.section`
   gap: 30px;
 `
 
-const TorrentData = styled.div``
+const TorrentData = styled.div`
+  > :not(:last-child) {
+    margin-bottom: 20px;
+  }
+`
 
 const CacheSection = styled.section`
   padding: 40px;
@@ -84,8 +90,20 @@ const ButtonSectionButton = styled.div`
 
 const TorrentFilesSection = styled.div``
 
+const TorrentName = styled.div`
+  font-size: 50px;
+  font-weight: 200;
+  line-height: 1;
+`
+const TorrentSubName = styled.div`
+  color: #7c7b7c;
+`
+
+const shortenText = (text, count) => text.slice(0, count) + (text.length > count ? '...' : '')
+
 export default function DialogTorrentDetailsContent({ closeDialog, torrent }) {
   const classes = useStyles()
+  const [isLoading, setIsLoading] = useState(true)
   const {
     poster,
     hash,
@@ -98,7 +116,7 @@ export default function DialogTorrentDetailsContent({ closeDialog, torrent }) {
   } = torrent
 
   const cache = useUpdateCache(hash)
-  const cacheMap = useCreateCacheMap(cache)
+  const cacheMap = useCreateCacheMap(cache, () => setIsLoading(false))
 
   const { Capacity, PiecesCount, PiecesLength } = cache
 
@@ -118,43 +136,57 @@ export default function DialogTorrentDetailsContent({ closeDialog, torrent }) {
         </Toolbar>
       </AppBar>
 
-      <DialogContent>
-        <HeaderSection>
-          <Poster poster={poster}>{poster ? <img alt='poster' src={poster} /> : <NoImageIcon />}</Poster>
+      {isLoading ? (
+        'loading'
+      ) : (
+        <DialogContent>
+          <HeaderSection>
+            <Poster poster={poster}>{poster ? <img alt='poster' src={poster} /> : <NoImageIcon />}</Poster>
 
-          <TorrentData>
-            <div>hash: {hash}</div>
-            <div>title: {title}</div>
-            <div>name: {name}</div>
-            <div>peers: {getPeerString(torrent)}</div>
-            <div>loaded: {getPreload(torrent)}</div>
-            <div>download speed: {humanizeSize(downloadSpeed)}</div>
-            <div>upload speed: {humanizeSize(uploadSpeed)}</div>
-            <div>status: {statString}</div>
-            <div>torrent size: {humanizeSize(torrentSize)}</div>
+            <TorrentData>
+              <div>
+                {name && name !== title ? (
+                  <>
+                    <TorrentName>{shortenText(name, 50)}</TorrentName>
+                    <TorrentSubName>{shortenText(title, 160)}</TorrentSubName>
+                  </>
+                ) : (
+                  <TorrentName>{shortenText(title, 50)}</TorrentName>
+                )}
+              </div>
 
-            <div>Capacity: {humanizeSize(Capacity)}</div>
-            <div>PiecesCount: {PiecesCount}</div>
-            <div>PiecesLength: {humanizeSize(PiecesLength)}</div>
-          </TorrentData>
-        </HeaderSection>
+              <div>peers: {getPeerString(torrent)}</div>
+              <div>loaded: {getPreload(torrent)}</div>
+              <div>download speed: {humanizeSize(downloadSpeed)}</div>
+              <div>upload speed: {humanizeSize(uploadSpeed)}</div>
+              <div>status: {statString}</div>
+              <div>torrent size: {humanizeSize(torrentSize)}</div>
 
-        <CacheSection />
+              <div>Capacity: {humanizeSize(Capacity)}</div>
+              <div>PiecesCount: {PiecesCount}</div>
+              <div>PiecesLength: {humanizeSize(PiecesLength)}</div>
+            </TorrentData>
+          </HeaderSection>
 
-        <ButtonSection>
-          <ButtonSectionButton>copy hash</ButtonSectionButton>
+          <CacheSection />
 
-          <ButtonSectionButton>remove views</ButtonSectionButton>
+          <ButtonSection>
+            <CopyToClipboard text={hash}>
+              <ButtonSectionButton>copy hash</ButtonSectionButton>
+            </CopyToClipboard>
 
-          <ButtonSectionButton>drop torrent</ButtonSectionButton>
+            <ButtonSectionButton>remove views</ButtonSectionButton>
 
-          <ButtonSectionButton>download playlist</ButtonSectionButton>
+            <ButtonSectionButton>drop torrent</ButtonSectionButton>
 
-          <ButtonSectionButton>download playlist after last view</ButtonSectionButton>
-        </ButtonSection>
+            <ButtonSectionButton>download playlist</ButtonSectionButton>
 
-        <TorrentFilesSection />
-      </DialogContent>
+            <ButtonSectionButton>download playlist after last view</ButtonSectionButton>
+          </ButtonSection>
+
+          <TorrentFilesSection />
+        </DialogContent>
+      )}
     </>
   )
 }

web/yarn.lock

@@ -4054,6 +4054,13 @@ copy-props@^2.0.1:
     each-props "^1.3.2"
     is-plain-object "^5.0.0"
 
+copy-to-clipboard@^3:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/copy-to-clipboard/-/copy-to-clipboard-3.3.1.tgz#115aa1a9998ffab6196f93076ad6da3b913662ae"
+  integrity sha512-i13qo6kIHTTpCm8/Wup+0b1mVWETvu2kIMzKoK8FpkLkFxlt0znUAHcMzox+T8sPlqtZXq3CulEjQHsYiGFJUw==
+  dependencies:
+    toggle-selection "^1.0.6"
+
 core-js-compat@^3.6.2, core-js-compat@^3.9.0, core-js-compat@^3.9.1:
   version "3.13.0"
   resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.13.0.tgz#a88f5fa81d8e9b15d7f98abc4447a4dfca2a358f"
@@ -10232,6 +10239,14 @@ react-app-polyfill@^2.0.0:
     regenerator-runtime "^0.13.7"
     whatwg-fetch "^3.4.1"
 
+react-copy-to-clipboard@^5.0.3:
+  version "5.0.3"
+  resolved "https://registry.yarnpkg.com/react-copy-to-clipboard/-/react-copy-to-clipboard-5.0.3.tgz#2a0623b1115a1d8c84144e9434d3342b5af41ab4"
+  integrity sha512-9S3j+m+UxDZOM0Qb8mhnT/rMR0NGSrj9A/073yz2DSxPMYhmYFBMYIdI2X4o8AjOjyFsSNxDRnCX6s/gRxpriw==
+  dependencies:
+    copy-to-clipboard "^3"
+    prop-types "^15.5.8"
+
 react-dev-utils@^11.0.3:
   version "11.0.4"
   resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-11.0.4.tgz#a7ccb60257a1ca2e0efe7a83e38e6700d17aa37a"
@@ -12015,6 +12030,11 @@ to-through@^2.0.0:
   dependencies:
     through2 "^2.0.3"
 
+toggle-selection@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/toggle-selection/-/toggle-selection-1.0.6.tgz#6e45b1263f2017fa0acc7d89d78b15b8bf77da32"
+  integrity sha1-bkWxJj8gF/oKzH2J14sVuL932jI=
+
 toidentifier@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.0.tgz#7e1be3470f1e77948bc43d94a3c8f4d7752ba553"