открытие магниток с главной
This commit is contained in:
Alexey Kasyanchuk
parent
9a30974b67
commit
9956995c49
1
index.js
1
index.js
@ -44,6 +44,7 @@ socketMysql.connect(function(mysqlError) {
|
||||
files: row.files,
|
||||
filesList: row.filesList,
|
||||
piecelength: row.piecelength,
|
||||
added: row.added.getTime(),
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -51,6 +51,7 @@
|
||||
"bitfield": "^1.1.2",
|
||||
"express": "^4.14.0",
|
||||
"material-ui": "^0.16.6",
|
||||
"moment": "^2.17.1",
|
||||
"mysql": "^2.12.0",
|
||||
"page": "^1.7.1",
|
||||
"react": "^15.4.1",
|
||||
|
||||
@ -1,334 +1,7 @@
|
||||
/* пирог */
|
||||
|
||||
.pie > * {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
/* ---------------------
|
||||
|
||||
СТРАНИЦЫ
|
||||
|
||||
--------------------- */
|
||||
|
||||
.page.padding {
|
||||
padding: 2.5rem 0.5rem;
|
||||
}
|
||||
|
||||
.page-container.hide > .page-content {
|
||||
transform: translateX(-50px);
|
||||
opacity: 0;
|
||||
}
|
||||
.page-container.show > .page-content {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
.page-container.close > .page-content {
|
||||
transform: translateX(+50px);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* крылья */
|
||||
|
||||
.wings {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: baseline;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.wings::before,
|
||||
.wings::after {
|
||||
content: "";
|
||||
flex-basis: 100%;
|
||||
height: 1px;
|
||||
background: rgba(40, 40, 40, 0.1);
|
||||
}
|
||||
|
||||
/* текст */
|
||||
|
||||
.p {
|
||||
max-width: 17.5em;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* всплывающие подсказки */
|
||||
|
||||
[data-title] {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
[data-title]:hover:active::before,
|
||||
[data-title]:hover:active::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
[data-title]::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
display: none;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-color: transparent #1D7373 transparent transparent;
|
||||
border-width: 10px 10px 10px 0;
|
||||
right: -12.5px;
|
||||
top: 50%;
|
||||
-webkit-transform: translateY(-50%);
|
||||
transform: translateY(-50%);
|
||||
animation: show-op 0.2s;
|
||||
-webkit-animation: show-op 0.2s;
|
||||
}
|
||||
|
||||
[data-title]::after {
|
||||
content: attr(data-title);
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
display: none;
|
||||
width: 100px;
|
||||
right: -107.5px;
|
||||
top: 50%;
|
||||
-webkit-transform: translateY(-50%);
|
||||
transform: translateY(-50%);
|
||||
border-radius: 1px;
|
||||
text-align: center;
|
||||
line-height: normal;
|
||||
font-size: 0.7rem;
|
||||
color: #fff;
|
||||
background: #1D7373;
|
||||
padding: 5px;
|
||||
animation: show-op 0.2s;
|
||||
-webkit-animation: show-op 0.2s;
|
||||
}
|
||||
|
||||
[data-title]:hover::after,
|
||||
[data-title]:hover::before {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#float-buttons {
|
||||
position: fixed;
|
||||
bottom: 0.85rem;
|
||||
right: 0.85rem;
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
#float-buttons > * {
|
||||
display: flex;
|
||||
font-size: 1.15em;
|
||||
flex-shrink: 0;
|
||||
transition: 0.2s;
|
||||
}
|
||||
|
||||
#float-buttons.hide > * {
|
||||
-webkit-transform: scale(0);
|
||||
transform: scale(0);
|
||||
}
|
||||
|
||||
#notifier {
|
||||
position: fixed;
|
||||
transition: 0.2s;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
transform: translateY(100%);
|
||||
}
|
||||
|
||||
#notifier.show {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
@media only screen and (orientation: landscape) and (min-width: 1100px) {
|
||||
#notifier {
|
||||
padding: 0.5em;
|
||||
width: 25em;
|
||||
@media only screen and (max-width: 550px)
|
||||
{
|
||||
.torrent-information-row {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
/* лодер */
|
||||
|
||||
.loader {
|
||||
height: 4px;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background-color: #ddd;
|
||||
}
|
||||
.loader:before{
|
||||
display: block;
|
||||
position: absolute;
|
||||
content: "";
|
||||
left: -200px;
|
||||
width: 200px;
|
||||
height: 4px;
|
||||
background-color: #2980b9;
|
||||
animation: loading 2s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes loading {
|
||||
from {left: -200px; width: 30%;}
|
||||
50% {width: 30%;}
|
||||
70% {width: 70%;}
|
||||
80% { left: 50%;}
|
||||
95% {left: 120%;}
|
||||
to {left: 100%;}
|
||||
}
|
||||
|
||||
.image-preview {
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
|
||||
/* страничный лодер */
|
||||
|
||||
#fountainG{
|
||||
position:relative;
|
||||
width:234px;
|
||||
height:22px;
|
||||
}
|
||||
|
||||
.fountainG{
|
||||
position:absolute;
|
||||
top:0;
|
||||
background-color:rgb(168,168,168);
|
||||
width:22px;
|
||||
height:22px;
|
||||
animation-name:bounce_fountainG;
|
||||
animation-duration:1.5s;
|
||||
animation-iteration-count:infinite;
|
||||
animation-direction:normal;
|
||||
transform:scale(.3);
|
||||
border-radius:15px;
|
||||
}
|
||||
|
||||
#fountainG_1{
|
||||
left:0;
|
||||
animation-delay:0.6s;
|
||||
}
|
||||
|
||||
#fountainG_2{
|
||||
left:29px;
|
||||
animation-delay:0.75s;
|
||||
}
|
||||
|
||||
#fountainG_3{
|
||||
left:58px;
|
||||
animation-delay:0.9s;
|
||||
}
|
||||
|
||||
#fountainG_4{
|
||||
left:88px;
|
||||
animation-delay:1.05s;
|
||||
}
|
||||
|
||||
#fountainG_5{
|
||||
left:117px;
|
||||
animation-delay:1.2s;
|
||||
}
|
||||
|
||||
#fountainG_6{
|
||||
left:146px;
|
||||
animation-delay:1.35s;
|
||||
}
|
||||
|
||||
#fountainG_7{
|
||||
left:175px;
|
||||
animation-delay:1.5s;
|
||||
}
|
||||
|
||||
#fountainG_8{
|
||||
left:205px;
|
||||
animation-delay:1.64s;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@keyframes bounce_fountainG{
|
||||
0%{
|
||||
transform:scale(1);
|
||||
background-color:rgb(97,97,97);
|
||||
}
|
||||
|
||||
100%{
|
||||
transform:scale(.3);
|
||||
background-color:rgb(255,255,255);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.chat {
|
||||
padding-right: 4px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.chat .messageBox {
|
||||
overflow-y: auto;
|
||||
overflow-x: none;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.chat .message {
|
||||
padding: 2px 0px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.chat .message img {
|
||||
max-height: 42px;
|
||||
max-width: 42px;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.chat .message span {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.chat .message .messageText {
|
||||
margin-left: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.chat .messageSend {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
/* слайдер */
|
||||
|
||||
.main-slider .sponsors {
|
||||
overflow-x: auto;
|
||||
flex-wrap: wrap;
|
||||
overflow-y: hidden;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
background: rgba(0,0,0,0.8);
|
||||
}
|
||||
|
||||
.main-slider .sponsors img {
|
||||
height: 5.5em;
|
||||
padding: 0 0.7em;
|
||||
}
|
||||
|
||||
.about-sponsors .sponsors {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.about-sponsors .sponsors img {
|
||||
height: 7em;
|
||||
padding: 0 1em;
|
||||
}
|
||||
|
||||
.about-socials .socials {
|
||||
padding: 1em;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.about-socials .socials svg {
|
||||
fill: black;
|
||||
height: 3em;
|
||||
padding: 0 1em;
|
||||
}
|
||||
|
||||
@ -12,7 +12,7 @@ return (
|
||||
<div>
|
||||
<ListItem
|
||||
onClick={() => window.router('/torrent/' + torrent.hash)}
|
||||
primaryText={torrent.name}
|
||||
primaryText={<span className='break-word'>{torrent.name}</span>}
|
||||
secondaryText={
|
||||
<div className='column'>
|
||||
<div>
|
||||
@ -29,6 +29,24 @@ return (
|
||||
}
|
||||
</div>
|
||||
}
|
||||
rightIcon={
|
||||
<svg onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
var win = window.open(`magnet:?xt=urn:btih:${torrent.hash}`, '_blank');
|
||||
}} viewBox="0 0 24 24">
|
||||
<path d="M15.82 10.736l-5.451 6.717c-.561.691-1.214 1.042-1.94 1.042-1.144
|
||||
0-2.327-.899-2.753-2.091-.214-.6-.386-1.76.865-2.784 3.417-2.794 6.716-5.446
|
||||
6.716-5.446l-3.363-4.174s-4.532 3.657-6.771 5.487c-2.581 2.108-3.123 4.468-3.123
|
||||
6.075 0 4.416 4.014 8.438 8.42 8.438 1.604 0 3.963-.543 6.084-3.128 1.835-2.237
|
||||
5.496-6.773 5.496-6.773l-4.18-3.363zm-2.604 9.079c-1.353 1.647-3.01 2.519-4.796
|
||||
2.519-3.471 0-6.753-3.291-6.753-6.771 0-1.789.867-3.443 2.51-4.785 1.206-.986
|
||||
2.885-2.348 4.18-3.398l1.247 1.599c-1.074.87-2.507 2.033-4.118 3.352-1.471
|
||||
1.202-1.987 2.935-1.38 4.634.661 1.853 2.479 3.197 4.322 3.197h.001c.86 0
|
||||
2.122-.288 3.233-1.658l3.355-4.134 1.572 1.294c-1.044 1.291-2.392 2.954-3.373
|
||||
4.151zm6.152-7.934l4.318-2.88-1.575-.638 1.889-2.414-4.421 2.788 1.716.695-1.927
|
||||
2.449zm-7.292-7.186l4.916-1.667-1.356-1.022 2.448-2.006-4.991 1.712
|
||||
1.478 1.114-2.495 1.869z"/></svg>}
|
||||
/>
|
||||
<Divider />
|
||||
</div>
|
||||
@ -56,7 +74,7 @@ export default class RecentTorrents extends Component {
|
||||
}
|
||||
render() {
|
||||
return (
|
||||
<List>
|
||||
<List className='animated'>
|
||||
<Subheader inset={true}>Most recent torrents</Subheader>
|
||||
<Divider />
|
||||
{
|
||||
|
||||
@ -4,9 +4,15 @@ import formatBytes from './format-bytes'
|
||||
import {List, ListItem} from 'material-ui/List';
|
||||
import Subheader from 'material-ui/Subheader';
|
||||
import Divider from 'material-ui/Divider';
|
||||
import {Tabs, Tab} from 'material-ui/Tabs';
|
||||
import ActionInfo from 'material-ui/svg-icons/action/info';
|
||||
import RaisedButton from 'material-ui/RaisedButton';
|
||||
import FontIcon from 'material-ui/FontIcon';
|
||||
|
||||
import FileFolder from 'material-ui/svg-icons/file/folder';
|
||||
|
||||
var moment = require('moment');
|
||||
|
||||
let buildFilesTree = (filesList) => {
|
||||
let rootTree = {
|
||||
__sizeBT: 0
|
||||
@ -58,7 +64,58 @@ const TorrentFiles = (props) => {
|
||||
);
|
||||
};
|
||||
|
||||
const TorrentInformation = (props) => {
|
||||
let torrent = props.torrent;
|
||||
return (
|
||||
<List className='w100p'>
|
||||
<Subheader inset={true}>Information about torrent</Subheader>
|
||||
<ListItem
|
||||
//leftAvatar={<Avatar icon={<ActionAssignment />} backgroundColor={blue500} />}
|
||||
rightIcon={<ActionInfo />}
|
||||
primaryText="Torrent Name"
|
||||
secondaryText={<span className='break-word' style={{whiteSpace: 'normal'}}>{torrent.name}</span>}
|
||||
/>
|
||||
<ListItem
|
||||
// leftAvatar={<Avatar icon={<EditorInsertChart />} backgroundColor={yellow600} />}
|
||||
rightIcon={<ActionInfo />}
|
||||
primaryText="Torrent Size"
|
||||
secondaryText={formatBytes(torrent.size)}
|
||||
/>
|
||||
<ListItem
|
||||
// leftAvatar={<Avatar icon={<EditorInsertChart />} backgroundColor={yellow600} />}
|
||||
rightIcon={<ActionInfo />}
|
||||
primaryText="Torrent contains files"
|
||||
secondaryText={torrent.files}
|
||||
/>
|
||||
<ListItem
|
||||
// leftAvatar={<Avatar icon={<EditorInsertChart />} backgroundColor={yellow600} />}
|
||||
rightIcon={<ActionInfo />}
|
||||
primaryText="Indexed/Added torrent date"
|
||||
secondaryText={moment(torrent.added).format('MMMM Do YYYY, h:mm:ss')}
|
||||
/>
|
||||
<ListItem
|
||||
// leftAvatar={<Avatar icon={<EditorInsertChart />} backgroundColor={yellow600} />}
|
||||
rightIcon={<ActionInfo />}
|
||||
primaryText="Adult content"
|
||||
secondaryText='unknown'
|
||||
/>
|
||||
</List>
|
||||
);
|
||||
}
|
||||
|
||||
export default class TorrentPage extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
value: 'info',
|
||||
};
|
||||
}
|
||||
|
||||
handleChange = (value) => {
|
||||
this.setState({
|
||||
value: value,
|
||||
});
|
||||
};
|
||||
componentDidMount() {
|
||||
window.torrentSocket.emit('torrent', this.props.hash, {files: true}, (data) => {
|
||||
console.log(data);
|
||||
@ -68,14 +125,37 @@ export default class TorrentPage extends Component {
|
||||
}
|
||||
render() {
|
||||
return (
|
||||
<div className="column">
|
||||
<div className="w100p">
|
||||
{
|
||||
this.torrent
|
||||
?
|
||||
<div className='column w100p'>
|
||||
{this.torrent.name}
|
||||
<TorrentFiles torrent={this.torrent} />
|
||||
</div>
|
||||
<Tabs
|
||||
value={this.state.value}
|
||||
onChange={this.handleChange}
|
||||
>
|
||||
<Tab label="Information" value="info" >
|
||||
<div className='column w100p'>
|
||||
<div className='row w100p torrent-information-row'>
|
||||
<div style={{flexBasis: '60%'}}>
|
||||
<TorrentInformation torrent={this.torrent} />
|
||||
</div>
|
||||
<div style={{flexBasis: '40%'}} className='column center w100p'>
|
||||
<RaisedButton
|
||||
href={`magnet:?xt=urn:btih:${this.torrent.hash}`}
|
||||
target="_blank"
|
||||
label="Download"
|
||||
secondary={true}
|
||||
icon={<FontIcon className="muidocs-icon-custom-github" />}
|
||||
/>
|
||||
<div className='fs0-75 pad0-75 center column' style={{color: 'rgba(0, 0, 0, 0.541176)'}}><div>TTH:</div><div>{this.torrent.hash}</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Tab>
|
||||
<Tab label="Files" value="files" >
|
||||
<TorrentFiles torrent={this.torrent} />
|
||||
</Tab>
|
||||
</Tabs>
|
||||
:
|
||||
null
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user