File size: 4,380 Bytes
8f2b05f
 
 
 
 
 
ac7030c
f42b4a1
8f2b05f
ac7030c
8f2b05f
ac7030c
8f2b05f
 
 
ac7030c
8f2b05f
 
 
 
 
 
 
 
 
 
 
 
 
38d787b
8f2b05f
 
 
2d214d1
8f2b05f
 
2d214d1
8f2b05f
 
 
964db57
b6060f3
8f2b05f
 
ac7030c
8f2b05f
 
ac7030c
8f2b05f
ac7030c
8f2b05f
ac7030c
8f2b05f
 
 
b6060f3
8f2b05f
 
 
 
 
b6060f3
 
 
 
 
8f2b05f
 
 
 
ac7030c
8f2b05f
 
ac7030c
8f2b05f
ac7030c
8f2b05f
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
2d214d1
8f2b05f
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
import { ReactNode, useState } from "react"
import { LuShieldAlert } from "react-icons/lu"

import { Button } from "@/components/ui/button"
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTrigger } from "@/components/ui/dialog"

import { ChannelInfo, MediaInfo } from "@/types/general"
import { ActionButton } from "@/components/interface/action-button"

// modal to report a media or channel
export function ReportModal({
    media,
    channel,
    children,
  }: {
    media?: MediaInfo
    channel?: ChannelInfo
    children?: ReactNode
  }) {
  const [isOpen, setOpen] = useState(false)

  return (
    <Dialog open={isOpen} onOpenChange={(open) => {
      if (!open) {
        setOpen(open)
      }
    }}>
      <DialogTrigger asChild>
      <ActionButton onClick={() => setOpen(true)}>
          <LuShieldAlert className="w-5 h-5" />
          <span>Report</span>
        </ActionButton>
      </DialogTrigger>
      <DialogContent className="sm:max-w-[512px] text-zinc-200 overflow-y-scroll">
        <DialogHeader>
          <DialogDescription className="w-full text-center text-lg font-normal text-stone-300">
            Report an issue with the content
          </DialogDescription>
        </DialogHeader>

        <div className="flex flex-col w-full space-y-3">
          <p className="text-sm">If you believe there is an issue with a content, you can ask the author to remove it, by creating a pull request explaining why:</p>

          <div className="flex flex-row py-2">
            {media && media.id ? <ActionButton
              href={
                `https://huggingface.co/datasets/${
                  media.channel.datasetUser
                }/${
                  media.channel.datasetName
                }/delete/main/prompt_${
                  media.id
                }.md`
                  }
                >
                <span>Request author for content removal</span>
              </ActionButton>
            : null}
          </div>

          <p className="text-sm">
            Note: it may take some time for the AiTube robot to synchronize and delete the video.
          </p>

          <p className="text-sm">
            If the content is in violation of <a href="https://huggingface.co/content-guidelines" target="_blank">our content guidelines</a>,
            you can flag the channel from the Hugging Face dataset page:
          </p>

          <div className="flex flex-row py-2">
          {media && media.id ? <ActionButton
            href={
              `https://huggingface.co/datasets/${
                media.channel.datasetUser
              }/${
                media.channel.datasetName
              }`
                }
              >
              <span>Click here to open the dataset</span>
            </ActionButton>
          : null}

  
          {channel && channel.id ? <ActionButton
            href={
              `https://huggingface.co/datasets/${
                channel.datasetUser
              }/${
                channel.datasetName
              }`
                }
              >
              <span>Click here to open the dataset</span>
            </ActionButton>
            : null}
          </div>

          <div className="flex flex-col items-center justify-center">
            <img src="/report.jpg" className="rounded w-[280px]" />
          </div>

            <p className="text-sm">
            Finally, if you believe the content violates or infringes your intellectual property rights,
            you may <span className="text-medium">send your complaint</span> to <a href="mailto:dmca@huggingface.co" target="_blank" className="font-mono text-xs bg-neutral-200 rounded-lg text-neutral-700 px-1 py-0.5">dmca@huggingface.co</a> with detailed and accurate information supporting your claim,
            in addition to the possibility of flagging the allegedly infringing Content.
            
            You also represent and warrant that you will not knowingly provide misleading information to support your claim.
          </p>
          </div>
        <DialogFooter>
        <Button
            type="button"
            variant="outline"
            onClick={() => {
              setOpen(false)
            }}
          >
          Close
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}