60 lines
1.4 KiB
JavaScript
60 lines
1.4 KiB
JavaScript
import * as React from 'react';
|
|
import { useContext, useEffect, useState } from "react";
|
|
import { useParams } from "react-router";
|
|
import FilesTable from "./FilesTable";
|
|
import { Tr, tr, langCodeContext } from "../translate";
|
|
|
|
function Share(props) {
|
|
let params = useParams();
|
|
const { langCode } = useContext(langCodeContext);
|
|
|
|
const [file, setFile] = useState({});
|
|
useEffect(() => {
|
|
fetch("/api/v1/get_file_info", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({
|
|
id: parseInt(params.id),
|
|
}),
|
|
})
|
|
.then((response) => response.json())
|
|
.then((data) => {
|
|
setFile(data);
|
|
})
|
|
.catch((error) => {
|
|
alert("get_file_info error: " + error);
|
|
});
|
|
}, [params]);
|
|
|
|
// change title
|
|
useEffect(() => {
|
|
const oldTitle = document.title;
|
|
|
|
document.title = `${tr("Share", langCode)}🎵: ${
|
|
file.filename
|
|
} - MSW Open Music`;
|
|
|
|
// set title back
|
|
return () => {
|
|
document.title = oldTitle;
|
|
};
|
|
}, [file]);
|
|
|
|
return (
|
|
<div className="page">
|
|
<h3>{Tr("Share with others!")}</h3>
|
|
<p>
|
|
{Tr("Share link")}:{" "}
|
|
<a href={window.location.href}>{window.location.href}</a>
|
|
</p>
|
|
<p>
|
|
👇 {Tr("Click the filename below to enjoy music!")}
|
|
<br />
|
|
</p>
|
|
<FilesTable setPlayingFile={props.setPlayingFile} files={[file]} />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Share;
|