Минимальная стоимость {MIN_PRICE} TON.
diff --git a/src/pages/view-content/index.tsx b/src/pages/view-content/index.tsx
index 166feb2..953a6af 100644
--- a/src/pages/view-content/index.tsx
+++ b/src/pages/view-content/index.tsx
@@ -1,11 +1,12 @@
import ReactPlayer from "react-player/lazy";
import { useTonConnectUI } from "@tonconnect/ui-react";
-import { useMemo } from "react";
import { useWebApp } from "@vkruglikov/react-telegram-web-app";
import { Button } from "~/shared/ui/button";
import { usePurchaseContent, useViewContent } from "~/shared/services/content";
import { fromNanoTON } from "~/shared/utils";
+import { useCallback } from "react";
+import { AudioPlayer } from "~/shared/ui/audio-player";
export const ViewContentPage = () => {
const WebApp = useWebApp();
@@ -16,81 +17,83 @@ export const ViewContentPage = () => {
const [tonConnectUI] = useTonConnectUI();
- const transaction = useMemo(() => {
- const address = content?.data?.encrypted?.cid;
-
- return {
- validUntil: Math.floor(Date.now() / 1000) + 120,
- messages: [
- { amount: content?.data?.encrypted?.license?.listen?.price, address },
- ],
- };
- }, [content?.data]);
-
- const handleBuyContent = async () => {
+ const handleBuyContent = useCallback(async () => {
try {
if (!tonConnectUI.connected) {
await tonConnectUI.openModal();
return;
}
- const res = await tonConnectUI.sendTransaction(transaction);
+ const contentResponse = await purchaseContent({
+ content_address: content?.data?.encrypted?.cid,
+ license_type: "listen",
+ });
- if (res.boc) {
- await purchaseContent({
- content_address: content?.data?.encrypted?.cid,
- license_type: "listen",
- });
+ const transactionResponse = await tonConnectUI.sendTransaction({
+ validUntil: Math.floor(Date.now() / 1000) + 120,
+ messages: [
+ {
+ amount: contentResponse.data.amount,
+ address: contentResponse.data.address,
+ payload: contentResponse.data.payload,
+ },
+ ],
+ });
+ if (transactionResponse.boc) {
WebApp.close();
await tonConnectUI.disconnect();
} else {
- console.error("Transaction failed:", res);
+ console.error("Transaction failed:", transactionResponse);
}
} catch (error) {
await tonConnectUI.disconnect();
console.error("Error handling Ton Connect subscription:", error);
}
- };
+ }, [content]);
return (
-
- {content?.data?.display_options?.metadata?.image && (
-
-
-
+
+
- {content?.data?.display_options?.metadata?.name}
-
- {/*Russian
*/}
- {/*2022
*/}
-
- {content?.data?.display_options?.metadata?.description}
-
-
+
+
+ {content?.data?.display_options?.metadata?.name}
+
+ {/*Russian
*/}
+ {/*2022
*/}
+
+ {content?.data?.display_options?.metadata?.description}
+
+
-
-
+
+
);
};
diff --git a/src/shared/services/content/index.ts b/src/shared/services/content/index.ts
index ff7cb1a..5fc1ed8 100644
--- a/src/shared/services/content/index.ts
+++ b/src/shared/services/content/index.ts
@@ -17,12 +17,14 @@ type UseCreateNewContentPayload = {
export const useCreateNewContent = () => {
return useMutation(
- ["create-new-content"],
- (payload: UseCreateNewContentPayload) => {
- return request.post<{
- message: string;
- }>("/blockchain.sendNewContentMessage", payload);
- },
+ ["create-new-content"],
+ (payload: UseCreateNewContentPayload) => {
+ return request.post<{
+ address: string;
+ amount: string;
+ payload: string;
+ }>("/blockchain.sendNewContentMessage", payload);
+ },
);
};
@@ -45,18 +47,22 @@ export const useViewContent = (contentId: string) => {
export const usePurchaseContent = () => {
return useMutation(
- ["purchase", "content"],
- ({
- content_address,
- license_type,
- }: {
- content_address: string;
- license_type: "listen" | "resale";
- }) => {
- return request.post("/blockchain.sendPurchaseContentMessage", {
- content_address,
- license_type,
- });
- },
+ ["purchase", "content"],
+ ({
+ content_address,
+ license_type,
+ }: {
+ content_address: string;
+ license_type: "listen" | "resale";
+ }) => {
+ return request.post<{
+ address: string;
+ amount: string;
+ payload: string;
+ }>("/blockchain.sendPurchaseContentMessage", {
+ content_address,
+ license_type,
+ });
+ },
);
};
diff --git a/src/shared/stores/root/index.ts b/src/shared/stores/root/index.ts
index 84c63be..50deba2 100644
--- a/src/shared/stores/root/index.ts
+++ b/src/shared/stores/root/index.ts
@@ -15,6 +15,9 @@ type RootStore = {
file: File | null;
setFile: (file: File) => void;
+ fileType: string;
+ setFileType: (type: string) => void;
+
fileSrc: string;
setFileSrc: (fileSrc: string) => void;
@@ -53,6 +56,9 @@ export const useRootStore = create((set) => ({
file: null,
setFile: (file) => set({ file }),
+ fileType: "",
+ setFileType: (fileType) => set({ fileType }),
+
fileSrc: "",
setFileSrc: (fileSrc) => set({ fileSrc }),
diff --git a/src/shared/ui/audio-player/index.tsx b/src/shared/ui/audio-player/index.tsx
new file mode 100644
index 0000000..70df25d
--- /dev/null
+++ b/src/shared/ui/audio-player/index.tsx
@@ -0,0 +1,130 @@
+import { FC, useEffect, useRef, useState } from "react";
+
+interface AudioPlayerProps {
+ src: string;
+}
+
+export const AudioPlayer: FC = ({ src }) => {
+ const [isPlaying, setIsPlaying] = useState(false);
+ const [currentTime, setCurrentTime] = useState(0);
+ const [duration, setDuration] = useState(0);
+ const audioRef = useRef(null);
+ const rangeRef = useRef(null);
+
+ useEffect(() => {
+ const audio = audioRef.current;
+
+ if (!audio) return;
+
+ const handleLoadedMetadata = () => {
+ setDuration(audio.duration);
+ };
+
+ const handleTimeUpdate = () => {
+ setCurrentTime(audio.currentTime);
+ updateRangeBackground(audio.currentTime);
+ };
+
+ audio.addEventListener("loadedmetadata", handleLoadedMetadata);
+ audio.addEventListener("timeupdate", handleTimeUpdate);
+
+ return () => {
+ audio.removeEventListener("loadedmetadata", handleLoadedMetadata);
+ audio.removeEventListener("timeupdate", handleTimeUpdate);
+ };
+ }, []);
+
+ const togglePlayPause = () => {
+ const audio = audioRef.current;
+ if (!audio) return;
+
+ if (isPlaying) {
+ audio.pause();
+ } else {
+ audio.play();
+ }
+ setIsPlaying(!isPlaying);
+ };
+
+ const handleSliderChange = (e: React.ChangeEvent) => {
+ const audio = audioRef.current;
+ if (!audio) return;
+
+ const newTime = parseFloat(e.target.value);
+ audio.currentTime = newTime;
+ setCurrentTime(newTime);
+ updateRangeBackground(newTime);
+ };
+
+ const formatTime = (time: number): string => {
+ const minutes = Math.floor(time / 60);
+ const seconds = Math.floor(time % 60);
+ return `${minutes}:${seconds < 10 ? "0" : ""}${seconds}`;
+ };
+
+ const updateRangeBackground = (currentTime: number) => {
+ if (rangeRef.current) {
+ const percentage = (currentTime / duration) * 100;
+ rangeRef.current.style.setProperty(
+ "--value-percentage",
+ `${percentage}%`,
+ );
+ }
+ };
+
+ return (
+
+
+
+
+
+
+
+
+
+ {formatTime(currentTime)}
+ {formatTime(duration)}
+
+
+