2020-08-21 10:07:39 +03:00
|
|
|
import * as React from "react";
|
2020-10-14 02:29:14 +03:00
|
|
|
import * as SVG from "~/common/svg";
|
2020-08-21 10:07:39 +03:00
|
|
|
import * as Constants from "~/common/constants";
|
2020-08-21 10:42:29 +03:00
|
|
|
import * as Strings from "~/common/strings";
|
2020-08-27 09:03:30 +03:00
|
|
|
import * as Actions from "~/common/actions";
|
2020-10-25 22:20:33 +03:00
|
|
|
import * as Window from "~/common/window";
|
2020-08-21 10:07:39 +03:00
|
|
|
|
2020-11-04 20:55:48 +03:00
|
|
|
import { css } from "@emotion/core";
|
2020-08-21 10:07:39 +03:00
|
|
|
import { LoaderSpinner } from "~/components/system/components/Loaders";
|
2020-08-27 09:03:30 +03:00
|
|
|
import { ProcessedText } from "~/components/system/components/Typography";
|
2020-10-14 02:29:14 +03:00
|
|
|
import { SlatePicker } from "~/components/core/SlatePicker";
|
2020-10-22 08:24:43 +03:00
|
|
|
import { Input } from "~/components/system/components/Input";
|
|
|
|
import { Textarea } from "~/components/system/components/Textarea";
|
2020-10-24 09:36:52 +03:00
|
|
|
import { dispatchCustomEvent } from "~/common/custom-events";
|
2020-08-21 10:07:39 +03:00
|
|
|
import TextareaAutoSize from "~/vendor/react-textarea-autosize";
|
|
|
|
|
2020-10-23 21:38:30 +03:00
|
|
|
const STYLES_NO_VISIBLE_SCROLL = css`
|
|
|
|
overflow-y: scroll;
|
|
|
|
scrollbar-width: none;
|
|
|
|
-webkit-overflow-scrolling: touch;
|
|
|
|
-ms-overflow-style: -ms-autohiding-scrollbar;
|
|
|
|
|
|
|
|
::-webkit-scrollbar {
|
|
|
|
width: 0px;
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
|
|
background: ${Constants.system.foreground};
|
|
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
|
|
background: ${Constants.system.darkGray};
|
|
|
|
}
|
|
|
|
`;
|
|
|
|
|
2020-08-21 10:07:39 +03:00
|
|
|
const STYLES_SIDEBAR = css`
|
2020-08-21 10:42:29 +03:00
|
|
|
width: 420px;
|
2020-10-22 08:24:43 +03:00
|
|
|
padding: 80px 24px 64px 24px;
|
2020-08-21 10:07:39 +03:00
|
|
|
flex-shrink: 0;
|
2020-10-14 02:29:14 +03:00
|
|
|
height: 100vh;
|
2020-08-21 10:07:39 +03:00
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
align-items: flex-start;
|
2020-10-14 02:29:14 +03:00
|
|
|
position: relative;
|
2020-10-24 22:55:19 +03:00
|
|
|
background-color: rgba(20, 20, 20, 0.8);
|
2020-10-14 02:29:14 +03:00
|
|
|
${STYLES_NO_VISIBLE_SCROLL}
|
|
|
|
|
|
|
|
@supports (
|
|
|
|
(-webkit-backdrop-filter: blur(75px)) or (backdrop-filter: blur(75px))
|
|
|
|
) {
|
|
|
|
-webkit-backdrop-filter: blur(75px);
|
|
|
|
backdrop-filter: blur(75px);
|
|
|
|
background-color: rgba(150, 150, 150, 0.2);
|
|
|
|
}
|
2020-08-21 10:07:39 +03:00
|
|
|
|
|
|
|
@media (max-width: ${Constants.sizes.mobile}px) {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
`;
|
|
|
|
|
|
|
|
const STYLES_SIDEBAR_SECTION = css`
|
|
|
|
flex-shrink: 0;
|
|
|
|
width: 100%;
|
2020-10-14 02:29:14 +03:00
|
|
|
margin-bottom: 16px;
|
2020-08-21 10:07:39 +03:00
|
|
|
`;
|
|
|
|
|
2020-08-21 10:42:29 +03:00
|
|
|
const STYLES_HEADING = css`
|
2020-10-24 00:28:53 +03:00
|
|
|
font-family: ${Constants.font.semiBold};
|
|
|
|
font-size: 20px;
|
2020-08-21 10:42:29 +03:00
|
|
|
font-weight: 400;
|
2020-08-21 10:57:52 +03:00
|
|
|
overflow-wrap: break-word;
|
|
|
|
white-space: pre-wrap;
|
2020-10-24 00:28:53 +03:00
|
|
|
margin-bottom: 32px;
|
2020-08-21 10:42:29 +03:00
|
|
|
`;
|
|
|
|
|
|
|
|
const STYLES_BODY = css`
|
|
|
|
font-size: 16px;
|
|
|
|
line-height: 1.225;
|
2020-08-21 10:57:52 +03:00
|
|
|
overflow-wrap: break-word;
|
|
|
|
white-space: pre-wrap;
|
2020-10-24 00:28:53 +03:00
|
|
|
margin-bottom: 32px;
|
|
|
|
`;
|
|
|
|
|
|
|
|
const STYLES_SIDEBAR_INPUT_LABEL = css`
|
|
|
|
font-size: 16px;
|
|
|
|
font-family: ${Constants.font.semiBold};
|
|
|
|
color: ${Constants.system.darkGray};
|
|
|
|
margin-bottom: 8px;
|
2020-08-21 10:42:29 +03:00
|
|
|
`;
|
|
|
|
|
2020-10-14 02:29:14 +03:00
|
|
|
const STYLES_SECTION_HEADER = css`
|
|
|
|
font-family: ${Constants.font.semiBold};
|
|
|
|
font-size: 1.1rem;
|
2020-10-22 08:24:43 +03:00
|
|
|
margin-top: 24px;
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
2020-10-14 02:29:14 +03:00
|
|
|
`;
|
|
|
|
|
|
|
|
const STYLES_ACTIONS = css`
|
|
|
|
color: ${Constants.system.white};
|
|
|
|
width: 100%;
|
2020-10-24 00:28:53 +03:00
|
|
|
border: 1px solid #3c3c3c;
|
2020-10-14 02:29:14 +03:00
|
|
|
border-radius: 4px;
|
|
|
|
background-color: transparent;
|
|
|
|
margin-bottom: 48px;
|
|
|
|
`;
|
|
|
|
|
|
|
|
const STYLES_ACTION = css`
|
|
|
|
cursor: pointer;
|
|
|
|
padding: 12px 16px;
|
2020-10-24 00:28:53 +03:00
|
|
|
border-bottom: 1px solid #3c3c3c;
|
2020-10-14 02:29:14 +03:00
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
:hover {
|
|
|
|
color: ${Constants.system.brand};
|
|
|
|
}
|
|
|
|
|
|
|
|
:last-child {
|
|
|
|
border: none;
|
|
|
|
}
|
|
|
|
`;
|
|
|
|
|
|
|
|
const STYLES_HIDDEN = css`
|
|
|
|
position: absolute;
|
|
|
|
opacity: 0;
|
|
|
|
pointer-events: none;
|
|
|
|
`;
|
|
|
|
|
2020-10-22 08:24:43 +03:00
|
|
|
const STYLES_INPUT = {
|
|
|
|
marginBottom: 16,
|
|
|
|
backgroundColor: "transparent",
|
|
|
|
boxShadow: "0 0 0 1px #3c3c3c inset",
|
|
|
|
color: Constants.system.white,
|
|
|
|
height: 48,
|
|
|
|
};
|
|
|
|
|
2020-10-24 00:28:53 +03:00
|
|
|
const STYLES_DISMISS_BOX = css`
|
|
|
|
position: absolute;
|
|
|
|
top: 20px;
|
|
|
|
right: 24px;
|
|
|
|
color: ${Constants.system.darkGray};
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
|
|
:hover {
|
|
|
|
color: ${Constants.system.white};
|
|
|
|
}
|
|
|
|
`;
|
|
|
|
|
|
|
|
export default class CarouselSidebarSlate extends React.Component {
|
2020-10-14 02:29:14 +03:00
|
|
|
_ref = null;
|
|
|
|
|
2020-08-21 10:11:42 +03:00
|
|
|
state = {
|
|
|
|
title: this.props.data.title ? this.props.data.title : "",
|
|
|
|
body: this.props.data.body ? this.props.data.body : "",
|
|
|
|
source: this.props.data.source ? this.props.data.source : "",
|
|
|
|
author: this.props.data.author ? this.props.data.author : "",
|
2020-10-14 02:29:14 +03:00
|
|
|
selected: {},
|
|
|
|
isPublic: false,
|
|
|
|
copyValue: "",
|
2020-10-22 08:24:43 +03:00
|
|
|
showConnected: false,
|
|
|
|
showFile: false,
|
2020-10-24 09:36:52 +03:00
|
|
|
unsavedChanges: false,
|
2020-10-14 02:29:14 +03:00
|
|
|
};
|
|
|
|
|
|
|
|
componentDidMount = () => {
|
2020-10-25 01:04:14 +03:00
|
|
|
if (this.props.isOwner && !this.props.external) {
|
2020-10-24 09:36:52 +03:00
|
|
|
this.debounceInstance = this.debounce(this._handleSave, 3000);
|
|
|
|
let isPublic = false;
|
|
|
|
let selected = {};
|
|
|
|
const id = this.props.data.id;
|
|
|
|
for (let slate of this.props.slates) {
|
|
|
|
if (slate.data.objects.some((o) => o.id === id)) {
|
|
|
|
if (slate.data.public) {
|
|
|
|
isPublic = true;
|
|
|
|
}
|
|
|
|
selected[slate.id] = true;
|
2020-10-14 02:29:14 +03:00
|
|
|
}
|
|
|
|
}
|
2020-10-24 09:36:52 +03:00
|
|
|
this.setState({ selected, isPublic });
|
2020-10-14 02:29:14 +03:00
|
|
|
}
|
2020-10-24 09:36:52 +03:00
|
|
|
};
|
|
|
|
|
|
|
|
debounce = (func, ms) => {
|
|
|
|
let timer;
|
|
|
|
|
|
|
|
return () => {
|
|
|
|
window.clearTimeout(timer);
|
|
|
|
timer = window.setTimeout(func, ms);
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
_handleClose = () => {
|
|
|
|
if (this.state.unsavedChanges) {
|
|
|
|
this._handleSave();
|
|
|
|
}
|
|
|
|
this.props.onClose();
|
|
|
|
};
|
|
|
|
|
|
|
|
_handleSave = () => {
|
|
|
|
let data = {
|
|
|
|
title: this.state.title,
|
|
|
|
body: this.state.body,
|
|
|
|
source: this.state.source,
|
|
|
|
author: this.state.author,
|
|
|
|
};
|
|
|
|
this.props.onSave(data);
|
|
|
|
this.setState({ unsavedChanges: false });
|
2020-10-14 02:29:14 +03:00
|
|
|
};
|
|
|
|
|
|
|
|
_handleCreateSlate = async () => {
|
2020-10-24 09:36:52 +03:00
|
|
|
if (this.props.external) return;
|
2020-10-14 02:29:14 +03:00
|
|
|
this.props.onClose();
|
|
|
|
this.props.onAction({
|
|
|
|
type: "SIDEBAR",
|
|
|
|
value: "SIDEBAR_CREATE_SLATE",
|
2020-10-24 09:36:52 +03:00
|
|
|
data: { files: [this.props.data], fromSlate: true },
|
2020-10-14 02:29:14 +03:00
|
|
|
});
|
2020-08-21 10:11:42 +03:00
|
|
|
};
|
2020-08-21 10:07:39 +03:00
|
|
|
|
|
|
|
_handleChange = (e) => {
|
2020-10-24 09:36:52 +03:00
|
|
|
this.debounceInstance();
|
|
|
|
this.setState({ [e.target.name]: e.target.value, unsavedChanges: true });
|
2020-08-21 10:07:39 +03:00
|
|
|
};
|
|
|
|
|
2020-10-24 09:36:52 +03:00
|
|
|
_handleAdd = async (slate) => {
|
|
|
|
if (this.props.external) return;
|
2020-10-14 02:29:14 +03:00
|
|
|
if (this.state.selected[slate.id]) {
|
2020-10-24 09:36:52 +03:00
|
|
|
const removeResponse = await Actions.removeFileFromSlate({
|
|
|
|
slateId: slate.id,
|
|
|
|
ids: [this.props.data.id],
|
2020-10-14 02:29:14 +03:00
|
|
|
});
|
2020-10-24 09:36:52 +03:00
|
|
|
if (!removeResponse) {
|
|
|
|
dispatchCustomEvent({
|
|
|
|
name: "create-alert",
|
|
|
|
detail: {
|
|
|
|
alert: {
|
|
|
|
message: "We're having trouble connecting right now. Please try again later",
|
|
|
|
},
|
|
|
|
},
|
|
|
|
});
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
if (removeResponse.error) {
|
|
|
|
dispatchCustomEvent({
|
|
|
|
name: "create-alert",
|
|
|
|
detail: { alert: { decorator: removeResponse.decorator } },
|
|
|
|
});
|
|
|
|
return;
|
|
|
|
}
|
2020-10-14 02:29:14 +03:00
|
|
|
this.setState({
|
|
|
|
selected: { ...this.state.selected, [slate.id]: false },
|
|
|
|
});
|
|
|
|
} else {
|
2020-10-24 09:36:52 +03:00
|
|
|
const addResponse = await Actions.addFileToSlate({
|
|
|
|
slate,
|
|
|
|
data: [{ title: this.props.data.title || this.props.data.name, ...this.props.data }],
|
|
|
|
fromSlate: true,
|
2020-10-14 02:29:14 +03:00
|
|
|
});
|
2020-10-24 09:36:52 +03:00
|
|
|
if (!addResponse) {
|
|
|
|
dispatchCustomEvent({
|
|
|
|
name: "create-alert",
|
|
|
|
detail: {
|
|
|
|
alert: {
|
|
|
|
message: "We're having trouble connecting right now. Please try again later",
|
|
|
|
},
|
|
|
|
},
|
|
|
|
});
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
if (addResponse.error) {
|
|
|
|
dispatchCustomEvent({
|
|
|
|
name: "create-alert",
|
|
|
|
detail: { alert: { decorator: addResponse.decorator } },
|
|
|
|
});
|
|
|
|
return;
|
|
|
|
}
|
2020-10-14 02:29:14 +03:00
|
|
|
this.setState({
|
2020-10-24 09:36:52 +03:00
|
|
|
selected: { ...this.state.selected, [slate.id]: true },
|
2020-10-14 02:29:14 +03:00
|
|
|
});
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
2020-10-25 22:20:33 +03:00
|
|
|
_handleDownload = () => {
|
|
|
|
const filename = this.props.data.name || this.props.data.title;
|
|
|
|
const uri = this.props.data.url.replace("https://undefined", "https://");
|
|
|
|
Window.saveAs(uri, filename);
|
|
|
|
};
|
|
|
|
|
2020-10-14 02:29:14 +03:00
|
|
|
_handleCopy = (copyValue, loading) => {
|
|
|
|
this.setState({ copyValue, loading }, () => {
|
|
|
|
this._ref.select();
|
|
|
|
document.execCommand("copy");
|
|
|
|
});
|
|
|
|
setTimeout(() => {
|
|
|
|
this.setState({ loading: false });
|
2020-10-22 08:24:43 +03:00
|
|
|
}, 1000);
|
2020-10-14 02:29:14 +03:00
|
|
|
};
|
|
|
|
|
2020-10-25 01:04:14 +03:00
|
|
|
_handleSaveCopy = async (data) => {
|
|
|
|
this.setState({ loading: "savingCopy" });
|
|
|
|
let items = [
|
|
|
|
{
|
|
|
|
ownerId: data.ownerId,
|
|
|
|
cid: data.cid || Strings.urlToCid(data.url),
|
|
|
|
},
|
|
|
|
];
|
|
|
|
let response = await Actions.addCIDToData({ items });
|
|
|
|
if (!response) {
|
|
|
|
this.setState({ loading: false, saving: "ERROR" });
|
|
|
|
System.dispatchCustomEvent({
|
|
|
|
name: "create-alert",
|
|
|
|
detail: {
|
|
|
|
alert: {
|
|
|
|
message: "We're having trouble connecting right now. Please try again later",
|
|
|
|
},
|
|
|
|
},
|
|
|
|
});
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
if (response.error) {
|
|
|
|
this.setState({ loading: false, saving: "ERROR" });
|
|
|
|
System.dispatchCustomEvent({
|
|
|
|
name: "create-alert",
|
|
|
|
detail: { alert: { decorator: response.decorator } },
|
|
|
|
});
|
|
|
|
return;
|
|
|
|
}
|
2020-10-31 02:12:20 +03:00
|
|
|
let message = Strings.formatAsUploadMessage(response.data.added, response.data.skipped);
|
|
|
|
dispatchCustomEvent({
|
|
|
|
name: "create-alert",
|
|
|
|
detail: {
|
|
|
|
alert: { message, status: !response.data.added ? null : "INFO" },
|
|
|
|
},
|
|
|
|
});
|
2020-10-25 01:04:14 +03:00
|
|
|
this.setState({ loading: false });
|
|
|
|
};
|
|
|
|
|
2020-10-14 02:29:14 +03:00
|
|
|
_handleDelete = async (cid) => {
|
2020-10-24 09:36:52 +03:00
|
|
|
if (this.props.external || !this.props.isOwner) return;
|
2020-10-14 02:29:14 +03:00
|
|
|
this.setState({ loading: "deleting" });
|
|
|
|
if (
|
|
|
|
!window.confirm(
|
|
|
|
"Are you sure you want to delete this? It will be removed from your slates too."
|
|
|
|
)
|
|
|
|
) {
|
|
|
|
this.setState({ loading: false });
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2020-10-22 08:24:43 +03:00
|
|
|
const response = await Actions.deleteBucketItems({ cids: [cid] });
|
2020-10-14 02:29:14 +03:00
|
|
|
if (!response) {
|
|
|
|
dispatchCustomEvent({
|
|
|
|
name: "create-alert",
|
|
|
|
detail: {
|
|
|
|
alert: {
|
|
|
|
message: "We're having trouble connecting right now. Please try again later",
|
|
|
|
},
|
|
|
|
},
|
|
|
|
});
|
|
|
|
this.setState({ loading: false });
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
if (response.error) {
|
|
|
|
dispatchCustomEvent({
|
|
|
|
name: "create-alert",
|
|
|
|
detail: { alert: { decorator: response.decorator } },
|
|
|
|
});
|
|
|
|
this.setState({ loading: false });
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
this.setState({ loading: false });
|
2020-10-31 02:12:20 +03:00
|
|
|
console.log("got here to end of handle delete");
|
2020-08-27 07:24:49 +03:00
|
|
|
};
|
|
|
|
|
2020-10-22 08:24:43 +03:00
|
|
|
_toggleAccordion = (tab) => {
|
|
|
|
this.setState({ [tab]: !this.state[tab] });
|
|
|
|
};
|
|
|
|
|
2020-08-21 10:07:39 +03:00
|
|
|
render() {
|
|
|
|
const elements = [];
|
2020-10-14 02:29:14 +03:00
|
|
|
const { cid, url } = this.props.data;
|
2020-08-21 10:07:39 +03:00
|
|
|
|
2020-08-21 10:42:29 +03:00
|
|
|
if (this.props.data) {
|
2020-10-05 00:30:28 +03:00
|
|
|
if (this.props.isOwner) {
|
2020-08-21 10:42:29 +03:00
|
|
|
elements.push(
|
|
|
|
<React.Fragment key="sidebar-media-object-info">
|
2020-10-22 08:24:43 +03:00
|
|
|
<Input
|
|
|
|
full
|
|
|
|
value={this.state.title}
|
|
|
|
name="title"
|
|
|
|
onChange={this._handleChange}
|
|
|
|
id={`sidebar-label-title`}
|
|
|
|
style={{
|
|
|
|
fontSize: Constants.typescale.lvl1,
|
|
|
|
...STYLES_INPUT,
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
<Textarea
|
|
|
|
name="body"
|
|
|
|
placeholder="Add notes or a description..."
|
|
|
|
value={this.state.body}
|
|
|
|
onChange={this._handleChange}
|
|
|
|
style={STYLES_INPUT}
|
|
|
|
/>
|
|
|
|
<Input
|
|
|
|
full
|
|
|
|
value={this.state.source}
|
|
|
|
name="source"
|
|
|
|
placeholder="Source"
|
|
|
|
onChange={this._handleChange}
|
|
|
|
id={`sidebar-label-source`}
|
|
|
|
style={STYLES_INPUT}
|
|
|
|
/>
|
|
|
|
<Input
|
|
|
|
full
|
|
|
|
value={this.state.author}
|
|
|
|
name="author"
|
|
|
|
placeholder="Author"
|
|
|
|
onChange={this._handleChange}
|
|
|
|
id={`sidebar-label-author`}
|
|
|
|
style={{ ...STYLES_INPUT, marginBottom: 24 }}
|
|
|
|
/>
|
2020-08-21 10:42:29 +03:00
|
|
|
</React.Fragment>
|
|
|
|
);
|
|
|
|
} else {
|
2020-10-24 09:36:52 +03:00
|
|
|
const hasTitle = !Strings.isEmpty(this.props.data.title || this.props.data.name);
|
|
|
|
const hasBody = !Strings.isEmpty(this.props.data.body);
|
|
|
|
const hasSource = !Strings.isEmpty(this.props.data.source);
|
|
|
|
const hasAuthor = !Strings.isEmpty(this.props.data.author);
|
|
|
|
console.log(this.props.data);
|
2020-08-21 11:03:15 +03:00
|
|
|
|
2020-08-21 10:42:29 +03:00
|
|
|
if (hasTitle) {
|
|
|
|
elements.push(
|
|
|
|
<div key="sidebar-media-info-title" css={STYLES_SIDEBAR_SECTION}>
|
2020-08-27 09:03:30 +03:00
|
|
|
<h1 css={STYLES_HEADING}>
|
2020-10-24 09:36:52 +03:00
|
|
|
<ProcessedText dark text={this.props.data.title || this.props.data.name} />
|
2020-08-27 09:03:30 +03:00
|
|
|
</h1>
|
2020-08-21 10:42:29 +03:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2020-10-24 00:28:53 +03:00
|
|
|
if (hasBody) {
|
2020-08-21 10:42:29 +03:00
|
|
|
elements.push(
|
2020-10-24 00:28:53 +03:00
|
|
|
<div key="sidebar-media-info-body" css={STYLES_SIDEBAR_SECTION}>
|
2020-08-27 09:03:30 +03:00
|
|
|
<p css={STYLES_BODY}>
|
2020-10-24 09:36:52 +03:00
|
|
|
<ProcessedText dark text={this.props.data.body} />
|
2020-08-27 09:03:30 +03:00
|
|
|
</p>
|
2020-08-21 10:42:29 +03:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
if (hasSource) {
|
|
|
|
elements.push(
|
|
|
|
<div key="sidebar-media-info-source" css={STYLES_SIDEBAR_SECTION}>
|
2020-10-14 02:29:14 +03:00
|
|
|
<div css={STYLES_SIDEBAR_INPUT_LABEL} style={{ position: "relative" }}>
|
2020-10-24 00:28:53 +03:00
|
|
|
Source:
|
2020-08-21 10:42:29 +03:00
|
|
|
</div>
|
2020-10-24 00:28:53 +03:00
|
|
|
<p css={STYLES_BODY} style={{ color: Constants.system.darkGray }}>
|
2020-10-24 09:36:52 +03:00
|
|
|
<ProcessedText dark text={this.props.data.source} />
|
2020-08-27 09:03:30 +03:00
|
|
|
</p>
|
2020-08-21 10:42:29 +03:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
if (hasAuthor) {
|
|
|
|
elements.push(
|
|
|
|
<div key="sidebar-media-info-author" css={STYLES_SIDEBAR_SECTION}>
|
2020-10-14 02:29:14 +03:00
|
|
|
<div css={STYLES_SIDEBAR_INPUT_LABEL} style={{ position: "relative" }}>
|
2020-10-24 00:28:53 +03:00
|
|
|
Author:
|
2020-08-21 10:42:29 +03:00
|
|
|
</div>
|
2020-10-24 00:28:53 +03:00
|
|
|
<p css={STYLES_BODY} style={{ color: Constants.system.darkGray }}>
|
2020-10-24 09:36:52 +03:00
|
|
|
<ProcessedText dark text={this.props.data.author} />
|
2020-08-27 09:03:30 +03:00
|
|
|
</p>
|
2020-08-21 10:42:29 +03:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
2020-08-21 10:07:39 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
if (!elements.length) {
|
|
|
|
return null;
|
|
|
|
}
|
2020-10-14 02:29:14 +03:00
|
|
|
return (
|
2020-10-24 00:28:53 +03:00
|
|
|
<div css={STYLES_SIDEBAR} style={{ display: this.props.display }}>
|
2020-10-24 09:36:52 +03:00
|
|
|
<div css={STYLES_DISMISS_BOX} onClick={this._handleClose}>
|
2020-10-22 08:24:43 +03:00
|
|
|
<SVG.Dismiss height="24px" />
|
|
|
|
</div>
|
2020-10-14 02:29:14 +03:00
|
|
|
{elements}
|
2020-10-24 09:36:52 +03:00
|
|
|
{this.props.external ? null : (
|
|
|
|
<React.Fragment>
|
|
|
|
<div
|
|
|
|
css={STYLES_SECTION_HEADER}
|
|
|
|
style={{ cursor: "pointer", marginTop: 44 }}
|
|
|
|
onClick={() => this._toggleAccordion("showConnected")}
|
|
|
|
>
|
|
|
|
<span
|
|
|
|
style={{
|
|
|
|
marginRight: 8,
|
|
|
|
transform: this.state.showConnected ? "none" : "rotate(-90deg)",
|
|
|
|
transition: "100ms ease transform",
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
<SVG.ChevronDown height="24px" display="block" />
|
|
|
|
</span>
|
|
|
|
<span>{this.props.isOwner ? "Connected slates" : "My slates"}</span>
|
|
|
|
</div>
|
|
|
|
{this.state.showConnected ? (
|
|
|
|
<div style={{ width: "100%", margin: "24px 0 44px 0" }}>
|
|
|
|
<SlatePicker
|
|
|
|
slates={this.props.slates}
|
|
|
|
selected={this.state.selected}
|
|
|
|
onAdd={this._handleAdd}
|
|
|
|
onCreateSlate={this._handleCreateSlate}
|
|
|
|
loading={this.props.loading}
|
|
|
|
dark
|
|
|
|
selectedColor={Constants.system.white}
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
) : null}
|
|
|
|
</React.Fragment>
|
|
|
|
)}
|
2020-10-22 08:24:43 +03:00
|
|
|
<div
|
|
|
|
css={STYLES_SECTION_HEADER}
|
|
|
|
style={{ cursor: "pointer" }}
|
|
|
|
onClick={() => this._toggleAccordion("showFile")}
|
|
|
|
>
|
|
|
|
<span
|
|
|
|
style={{
|
|
|
|
marginRight: 8,
|
|
|
|
transform: this.state.showFile ? "none" : "rotate(-90deg)",
|
|
|
|
transition: "100ms ease transform",
|
|
|
|
}}
|
2020-10-14 02:29:14 +03:00
|
|
|
>
|
2020-10-22 08:24:43 +03:00
|
|
|
<SVG.ChevronDown height="24px" display="block" />
|
|
|
|
</span>
|
|
|
|
<span>File</span>
|
|
|
|
</div>
|
|
|
|
{this.state.showFile ? (
|
|
|
|
<div css={STYLES_ACTIONS} style={{ marginTop: 24 }}>
|
2020-10-24 00:28:53 +03:00
|
|
|
{this.props.isOwner ? (
|
|
|
|
<div css={STYLES_ACTION} onClick={() => this._handleCopy(cid, "cidCopying")}>
|
|
|
|
<SVG.CopyAndPaste height="24px" />
|
|
|
|
<span style={{ marginLeft: 16 }}>
|
|
|
|
{this.state.loading === "cidCopying" ? "Copied!" : "Copy file CID"}
|
|
|
|
</span>
|
|
|
|
</div>
|
|
|
|
) : null}
|
2020-10-25 01:04:14 +03:00
|
|
|
<div
|
|
|
|
css={STYLES_ACTION}
|
|
|
|
onClick={() =>
|
|
|
|
this._handleCopy(
|
2020-10-25 22:20:33 +03:00
|
|
|
this.props.link
|
|
|
|
? `${this.props.link}/cid:${Strings.urlToCid(this.props.data.url)}`
|
|
|
|
: this.props.data.url.replace("https://undefined", "https://"),
|
2020-10-25 01:04:14 +03:00
|
|
|
"urlCopying"
|
|
|
|
)
|
|
|
|
}
|
|
|
|
>
|
2020-10-22 08:24:43 +03:00
|
|
|
<SVG.DeepLink height="24px" />
|
|
|
|
<span style={{ marginLeft: 16 }}>
|
|
|
|
{this.state.loading === "urlCopying" ? "Copied!" : "Copy link"}
|
|
|
|
</span>
|
|
|
|
</div>
|
2020-10-25 01:04:14 +03:00
|
|
|
{this.props.isOwner || this.props.external ? null : (
|
|
|
|
<div css={STYLES_ACTION} onClick={() => this._handleSaveCopy(this.props.data)}>
|
|
|
|
<SVG.Save height="24px" />
|
|
|
|
<span style={{ marginLeft: 16 }}>
|
|
|
|
{this.state.loading === "savingCopy" ? (
|
|
|
|
<LoaderSpinner style={{ height: 16, width: 16 }} />
|
|
|
|
) : (
|
|
|
|
<span>Save copy</span>
|
|
|
|
)}
|
|
|
|
</span>
|
|
|
|
</div>
|
|
|
|
)}
|
2020-10-24 09:36:52 +03:00
|
|
|
{this.props.external ? null : (
|
2020-10-25 22:20:33 +03:00
|
|
|
<div css={STYLES_ACTION} onClick={this._handleDownload}>
|
2020-10-24 09:36:52 +03:00
|
|
|
<SVG.Download height="24px" />
|
|
|
|
<span style={{ marginLeft: 16 }}>
|
|
|
|
{this.props.saving ? (
|
|
|
|
<LoaderSpinner style={{ height: 16, width: 16 }} />
|
|
|
|
) : (
|
|
|
|
<span>Download</span>
|
|
|
|
)}
|
|
|
|
</span>
|
|
|
|
</div>
|
|
|
|
)}
|
|
|
|
{this.props.isOwner && !this.props.isRepost ? (
|
2020-10-24 00:28:53 +03:00
|
|
|
<div css={STYLES_ACTION} onClick={() => this._handleDelete(cid)}>
|
|
|
|
<SVG.Trash height="24px" />
|
|
|
|
{this.state.loading === "deleting" ? (
|
|
|
|
<LoaderSpinner style={{ height: 20, width: 20, marginLeft: 16 }} />
|
|
|
|
) : (
|
|
|
|
<span style={{ marginLeft: 16 }}>Delete</span>
|
|
|
|
)}
|
|
|
|
</div>
|
|
|
|
) : null}
|
2020-10-14 02:29:14 +03:00
|
|
|
</div>
|
2020-10-22 08:24:43 +03:00
|
|
|
) : null}
|
|
|
|
<input
|
|
|
|
css={STYLES_HIDDEN}
|
|
|
|
ref={(c) => {
|
|
|
|
this._ref = c;
|
|
|
|
}}
|
|
|
|
readOnly
|
|
|
|
value={this.state.copyValue}
|
|
|
|
/>
|
2020-10-14 02:29:14 +03:00
|
|
|
</div>
|
|
|
|
);
|
2020-08-21 10:07:39 +03:00
|
|
|
}
|
|
|
|
}
|