feat(ui): show torrent pie of the content

package.json

@@ -136,6 +136,7 @@
     "react-dom": "17.0.2",
     "react-input-range": "^1.3.0",
     "react-markdown": "^6.0.2",
+    "react-plotly.js": "^2.5.1",
     "simple-encryptor": "github:DEgITx/node-simple-encryptor",
     "stun": "1.1.0",
     "webtorrent": "github:DEgITx/webtorrent"

src/app/content.js

@@ -8,6 +8,18 @@ const ContentTypes = {
 	DISC: 'disc',
 }
 
+const ContentTypesColors = {
+	'video': '#1ee359',
+	'audio': '#1e94e3',
+	'pictures': '#e31ebc',
+	'books': '#e3d91e',
+	'application': '#e3561e',
+	'archive': '#1e25e3',
+	'disc': '#1ee381'
+}
+
+const niceTypeColor = (type) => ContentTypesColors[type];
+
 const ExtesionBase = {
 	webm: ContentTypes.VIDEO,
 	mkv: ContentTypes.VIDEO,
@@ -311,6 +323,7 @@ const torrentTypeDetect = (torrent, files) => {
 		torrent[ContentTypeProp] = priority[0];
 
 	detectSubCategory(torrent, files, typesPriority, torrent[ContentTypeProp]);
+	return typesPriority;
 }
 
-module.exports = {torrentTypeDetect, fileTypeDetect};
+module.exports = {torrentTypeDetect, fileTypeDetect, niceTypeColor};

src/app/css/izi/izi.css

@@ -30,10 +30,14 @@ body {
 	width: 100%;
 }
 
-svg {
+svg:not(.main-svg) {
 	height: 1em;
 }
 
+.plotly .modebar {
+	display: none !important;
+}
+
 svg.iconmonstr {
 	padding: 0.10em;
 }

src/app/torrent-page.js

@@ -21,6 +21,8 @@ import {fileTypeDetect} from './content'
 import {contentIcon} from './torrent'
 import TrackersImages from './trackers-images'
 import DownloadTorrentMenu from './download-torrent-menu'
+import {torrentTypeDetect, niceTypeColor} from './content';
+import Plot from 'react-plotly.js';
 
 let parseDescriptionText = (text) => {
 	return text.split("\n").map(function(item) {
@@ -263,7 +265,8 @@ export default class TorrentPage extends Page {
   			if(this.torrent.contentCategory == 'xxx') {
   				this.setMetaTag('robots', 'noindex');
   			}
-  			//this.forceUpdate(); // вызывается через searchingIndicator
+			this.torrent.filesTypesPriority = torrentTypeDetect(this.torrent, this.torrent.filesList);
+			//this.forceUpdate(); // вызывается через searchingIndicator
 
   			// Получаем более новую статистику пира
   			if((Date.now() / 1000) - this.torrent.trackersChecked > 10 * 60) {
@@ -292,6 +295,7 @@ export default class TorrentPage extends Page {
   			if(this.torrent)
   			{
   				this.torrent.filesList = filesList
+				this.torrent.filesTypesPriority = torrentTypeDetect(this.torrent, this.torrent.filesList);
   				this.forceUpdate()
   			}
   		}
@@ -444,9 +448,36 @@ export default class TorrentPage extends Page {
   									<div className='info-table'>
   										<TorrentInformation torrent={this.torrent} parent={this} />
   									</div>
-  									<div style={{flexBasis: '40%'}} className='column center w100p'>
+  									<div style={{flexBasis: '40%'}} className='info-table-right column center w100p'>
   										<img src={(this.torrent && this.torrent.info && this.torrent.info.poster) ? this.torrent.info.poster : NoImage} className='pad0-75' style={{height: '200px'}} />
   										<TrackersImages info={this.torrent && this.torrent.info} className='column' />
+										  {
+										   this.torrent.filesTypesPriority && Object.keys(this.torrent.filesTypesPriority).length > 0 && Object.keys(this.torrent.filesTypesPriority).filter((key) => this.torrent.filesTypesPriority[key] > 0.0002).length > 1
+										   &&
+										  <Plot
+											data={[
+											{
+												values: Object.values(this.torrent.filesTypesPriority).map(val => (val * 100).toFixed(2)),
+												labels: Object.keys(this.torrent.filesTypesPriority),
+												marker: {
+													colors: Object.keys(this.torrent.filesTypesPriority).map(val => niceTypeColor(val))
+												},
+												type: 'pie',
+												showlegend: false,
+												hiddenlabels: true,
+												textinfo: 'none',
+												displayModeBar: false
+											},
+											]}
+											layout={ {width: 120, height: 120, margin: {
+												l: 0,
+												r: 0,
+												b: 10,
+												t: 5,
+												pad: 0
+											}, autosize: false} }
+										/>
+  										}
   										<RaisedButton
   											href={`magnet:?xt=urn:btih:${this.torrent.hash}`}
   											target="_self"