pixeldrain/fnx_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make abuse report window more user friendly

Browse Source
This commit is contained in:
Wim Brand
2021-05-17 11:16:20 +02:00
parent 5be98caadc
commit 5875d187b6
8 changed files with 92 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
res/include/script/file_viewer/AbuseReportWindow.js
View File

@@ -4,7 +4,7 @@ function AbuseReportWindow(viewer) {
this.modal = new Modal(
document.getElementById("file_viewer"),
() => { this.toggle() },
"Report abuse", "600px", "auto",
"Report abuse", "650px", "auto",
)
this.btnReportAbuse = document.getElementById("btn_report_abuse")

14
res/include/script/file_viewer/viewer_scripts/AbuseViewer.js
View File

@@ -1,7 +1,7 @@
function AbuseViewer(viewer, file, next) {
this.viewer = viewer
this.file = file
this.next = next
this.file = file
this.next = next
this.container = document.createElement("div")
this.container.classList = "image-container"
@@ -12,17 +12,17 @@ function AbuseViewer(viewer, file, next) {
this.container.appendChild(this.title)
this.description = document.createElement("p")
this.description.innerText = "This file has received an abuse report and "+
this.description.innerText = "This file has received an abuse report and " +
"was taken down."
this.container.appendChild(this.description)
this.description2 = document.createElement("p")
this.description2.innerText = "Type of abuse: '"+file.abuse_type+"'. "+
"Reporter: '"+file.abuse_reporter_name+"'."
this.description2.innerText = "Type of abuse: " + file.abuse_type + ". " +
"Reporter: " + file.abuse_reporter_name + "."
this.container.appendChild(this.description2)
}
AbuseViewer.prototype.render = function(parent) {
AbuseViewer.prototype.render = function (parent) {
parent.appendChild(this.container)
// Disable the download button
@@ -30,7 +30,7 @@ AbuseViewer.prototype.render = function(parent) {
this.viewer.toolbar.btnDownload.style.display = "none"
}
AbuseViewer.prototype.destroy = function(parent) {
AbuseViewer.prototype.destroy = function (parent) {
// Restore the download button
this.viewer.toolbar.btnDownload.style.display = this.btnDownloadDisplay
}

10
res/include/style/viewer.css
View File

@@ -265,6 +265,16 @@
table {width: auto !important;}
/* Abuse report label*/
.abuse_type_form > label {
display: block;
border-bottom: 1px var(--layer_2_color_border) solid;
padding: 0.5em;
}
.abuse_type_form > label:last-of-type {
border-bottom: none;
}
/* ====================
|| LIST NAVIGATOR ||

38
res/template/file_viewer.html
View File

@@ -325,18 +325,30 @@
</p>
<form class="abuse_type_form" style="width: 100%">
<h3>Abuse type</h3>
<input type="radio" id="abuse_type_terrorism" name="abuse_type" value="terrorism">
<label for="abuse_type_terrorism">Terrorism</label>
<br/>
<input type="radio" id="abuse_type_gore" name="abuse_type" value="gore">
<label for="abuse_type_gore">Gore</label>
<br/>
<input type="radio" id="abuse_type_child_abuse" name="abuse_type" value="child_abuse">
<label for="abuse_type_child_abuse">Child abuse</label>
<br/>
<input type="radio" id="abuse_type_malware" name="abuse_type" value="malware">
<label for="abuse_type_malware">Malware</label>
<br/>
<p>
Which type of abuse is shown in this file? Pick the most
appropriate one.
</p>
<label for="abuse_type_terrorism">
<input type="radio" id="abuse_type_terrorism" name="abuse_type" value="terrorism">
<b>Terrorism</b>: Videos, images or audio fragments showing
the use of intentional violence to achieve political aims.
</label>
<label for="abuse_type_gore">
<input type="radio" id="abuse_type_gore" name="abuse_type" value="gore">
<b>Gore</b>: Graphic and shocking videos or images depicting
severe harm to humans (or animals).
</label>
<label for="abuse_type_child_abuse">
<input type="radio" id="abuse_type_child_abuse" name="abuse_type" value="child_abuse">
<b>Child abuse</b>: Videos or images depicting inappropriate
touching or nudity of minors.
</label>
<label for="abuse_type_malware">
<input type="radio" id="abuse_type_malware" name="abuse_type" value="malware">
<b>Malware</b>: Software programs designed to cause harm to
computer systems.
</label>
<!--
<h3>E-mail address</h3>
<p>
@@ -352,7 +364,7 @@
<div class="abuse_report_notification" style="display: none;"></div>
<p>
Abuse reports are manually reviewed. Normally this shouldn't
take more than 24 hours. But during busy periods it can take
take more than 24 hours. During busy periods it can take
longer.
</p>
<div style="text-align: right;">

6
res/template/home.html
View File

@@ -286,7 +286,11 @@
</div>
<div>
<div class="feat_label"><a href="javascript:void(0);" onclick="return explainDirectLinking();">Direct linking</a></div>
<div class="feat_pro">Rate limiting mode will be enabled when a file has 3 times more downloads than views</div>
<div class="feat_pro">
Rate limiting mode will be enabled when a file has 3
times more downloads than views. Pro users will never be
asked to fill in a captcha
</div>
</div>
<div>
<div></div>

11
svelte/src/admin_abuse_reports/AbuseReport.svelte
View File

@@ -28,19 +28,18 @@ let set_status = async (action, report_type) => {
alert(err);
}
}
</script>
<Expandable bind:this={expandable} expanded={report.status === "pending"}>
<Expandable bind:this={expandable} expanded={report.status === "pending" && report.reports.length > 2}>
<div slot="header" class="header" on:click={expandable.toggle}>
<div class="icon_cell">
<img class="file_icon" src={"/api/file/"+report.file.id+"/thumbnail"} alt="File thumbnail"/>
</div>
<div class="title">{report.file.name}</div>
<div class="stats">Type<br/>
{report.file.abuse_type === "" ? report.type : report.file.abuse_type}
</div>
<div class="stats">Type<br/>
{report.file.abuse_type === "" ? report.type : report.file.abuse_type}
</div>
{#if report.status !== "pending"}
<div class="stats">Status<br/>{report.status}</div>
{/if}
@@ -77,7 +76,7 @@ let set_status = async (action, report_type) => {
</tr>
{#each report.reports as user_report}
<tr>
<td>{formatDate(user_report.time, true, true, true, true)}</td>
<td>{formatDate(user_report.time, true, true, false)}</td>
<td>{user_report.ip_address}</td>
<td>{user_report.type}</td>
<td>{user_report.status}</td>

45
svelte/src/admin_abuse_reports/AbuseReports.svelte
View File

@@ -4,12 +4,12 @@ import Spinner from "../util/Spinner.svelte";
import AbuseReport from "./AbuseReport.svelte";
let loading = true
let reports = []
let reports_pending = []
let reports_processed = []
let startPicker
let endPicker
const get_reports = async () => {
loading = true;
@@ -23,11 +23,21 @@ const get_reports = async () => {
if(resp.status >= 400) {
throw new Error(resp.text());
}
reports = await resp.json();
let reports = await resp.json();
// Sort files from new to old
// Sort files by number of reports. If the number of reports is equal we
// sort by number of views. If the number of views is equal we sort by
// date of the first report received
reports.sort((a, b) => {
if (a.first_report_time > b.first_report_time) {
if (a.reports.length > b.reports.length) {
return -1
} else if (a.reports.length < b.reports.length) {
return 1
} else if (a.file.views > b.file.views) {
return -1
} else if (a.file.views < b.file.views) {
return 1
} else if (a.first_report_time > b.first_report_time) {
return -1
} else if (a.first_report_time < b.first_report_time) {
return 1
@@ -36,7 +46,11 @@ const get_reports = async () => {
}
})
// Sort individual reports from old to new
reports_pending = []
reports_processed = []
// Sort individual reports of each file from old to new, then separate
// pending reports and processed reports
reports.forEach(v => {
v.reports.sort((a, b) => {
if (a.time > b.time) {
@@ -47,7 +61,17 @@ const get_reports = async () => {
return 0
}
})
if (v.status === "pending") {
reports_pending.push(v)
} else {
reports_processed.push(v)
}
})
// Update svelte views
reports_processed = reports_processed
reports_pending = reports_pending
} catch (err) {
alert(err);
} finally {
@@ -57,7 +81,7 @@ const get_reports = async () => {
onMount(() => {
let start = new Date()
start.setMonth(start.getMonth() - 1)
start.setDate(start.getDate() - 14)
let end = new Date()
startPicker.valueAsNumber = start.getTime()
@@ -88,14 +112,14 @@ onMount(() => {
</div>
<h2>Pending</h2>
{#each reports as report}
{#each reports_pending as report}
{#if report.status === "pending"}
<AbuseReport report={report} on:refresh={get_reports}/>
{/if}
{/each}
<h2>Resolved</h2>
{#each reports as report}
{#each reports_processed as report}
{#if report.status !== "pending"}
<AbuseReport report={report} on:refresh={get_reports}/>
{/if}
@@ -107,9 +131,10 @@ onMount(() => {
.spinner_container {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
height: 100px;
width: 100px;
z-index: 1000;
}
.toolbar {
display: flex;

16
webcontroller/file_viewer.go
View File

@@ -46,20 +46,12 @@ func adType() int {
// Intn returns a number up to n, but never n itself. So to get a random 0
// or 1 we need to give it n=2. We can use this function to make other
// splits like 1/3 1/4, etc
switch i := rand.Intn(20); i {
case 0, 1: // 10%
switch i := rand.Intn(10); i {
case 0: // 10%
return amarulaSolutions
case 2: // 5%
return pdpro1
case 3: // 5%
return pdpro2
case 4: // 5%
return pdpro3
case 5: // 5%
return pdpro4
case 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17: // 60%
case 1, 2, 3, 4, 5: // 50%
return brave
case 18, 19: // 10%
case 6, 7, 8, 9: // 40%
return aAds
default:
panic(fmt.Errorf("random number generator returned unrecognised number: %d", i))