aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/shared/shared-moderation/video-report.component.ts
blob: 7977e4cca269a327fa4801f8c274024b3c6a05ca (plain) (blame)
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
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
import { mapValues, pickBy } from 'lodash-es'
import { buildVideoEmbed, buildVideoLink } from 'src/assets/player/utils'
import { Component, Input, OnInit, ViewChild } from '@angular/core'
import { DomSanitizer, SafeHtml } from '@angular/platform-browser'
import { Notifier } from '@app/core'
import { AbuseValidatorsService, FormReactive, FormValidatorService } from '@app/shared/shared-forms'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap/modal/modal-ref'
import { I18n } from '@ngx-translate/i18n-polyfill'
import { abusePredefinedReasonsMap, AbusePredefinedReasonsString } from '@shared/models'
import { Video } from '../shared-main'
import { AbuseService } from './abuse.service'

@Component({
  selector: 'my-video-report',
  templateUrl: './video-report.component.html',
  styleUrls: [ './video-report.component.scss' ]
})
export class VideoReportComponent extends FormReactive implements OnInit {
  @Input() video: Video = null

  @ViewChild('modal', { static: true }) modal: NgbModal

  error: string = null
  predefinedReasons: { id: AbusePredefinedReasonsString, label: string, description?: string, help?: string }[] = []
  embedHtml: SafeHtml

  private openedModal: NgbModalRef

  constructor (
    protected formValidatorService: FormValidatorService,
    private modalService: NgbModal,
    private abuseValidatorsService: AbuseValidatorsService,
    private abuseService: AbuseService,
    private notifier: Notifier,
    private sanitizer: DomSanitizer,
    private i18n: I18n
  ) {
    super()
  }

  get currentHost () {
    return window.location.host
  }

  get originHost () {
    if (this.isRemoteVideo()) {
      return this.video.account.host
    }

    return ''
  }

  get timestamp () {
    return this.form.get('timestamp').value
  }

  getVideoEmbed () {
    return this.sanitizer.bypassSecurityTrustHtml(
      buildVideoEmbed(
        buildVideoLink({
          baseUrl: this.video.embedUrl,
          title: false,
          warningTitle: false
        })
      )
    )
  }

  ngOnInit () {
    this.buildForm({
      reason: this.abuseValidatorsService.ABUSE_REASON,
      predefinedReasons: mapValues(abusePredefinedReasonsMap, r => null),
      timestamp: {
        hasStart: null,
        startAt: null,
        hasEnd: null,
        endAt: null
      }
    })

    this.predefinedReasons = [
      {
        id: 'violentOrRepulsive',
        label: this.i18n('Violent or repulsive'),
        help: this.i18n('Contains offensive, violent, or coarse language or iconography.')
      },
      {
        id: 'hatefulOrAbusive',
        label: this.i18n('Hateful or abusive'),
        help: this.i18n('Contains abusive, racist or sexist language or iconography.')
      },
      {
        id: 'spamOrMisleading',
        label: this.i18n('Spam, ad or false news'),
        help: this.i18n('Contains marketing, spam, purposefully deceitful news, or otherwise misleading thumbnail/text/tags. Please provide reputable sources to report hoaxes.')
      },
      {
        id: 'privacy',
        label: this.i18n('Privacy breach or doxxing'),
        help: this.i18n('Contains personal information that could be used to track, identify, contact or impersonate someone (e.g. name, address, phone number, email, or credit card details).')
      },
      {
        id: 'rights',
        label: this.i18n('Intellectual property violation'),
        help: this.i18n('Infringes my intellectual property or copyright, wrt. the regional rules with which the server must comply.')
      },
      {
        id: 'serverRules',
        label: this.i18n('Breaks server rules'),
        description: this.i18n('Anything not included in the above that breaks the terms of service, code of conduct, or general rules in place on the server.')
      },
      {
        id: 'thumbnails',
        label: this.i18n('Thumbnails'),
        help: this.i18n('The above can only be seen in thumbnails.')
      },
      {
        id: 'captions',
        label: this.i18n('Captions'),
        help: this.i18n('The above can only be seen in captions (please describe which).')
      }
    ]

    this.embedHtml = this.getVideoEmbed()
  }

  show () {
    this.openedModal = this.modalService.open(this.modal, { centered: true, keyboard: false, size: 'lg' })
  }

  hide () {
    this.openedModal.close()
    this.openedModal = null
  }

  report () {
    const reason = this.form.get('reason').value
    const predefinedReasons = Object.keys(pickBy(this.form.get('predefinedReasons').value)) as AbusePredefinedReasonsString[]
    const { hasStart, startAt, hasEnd, endAt } = this.form.get('timestamp').value

    this.abuseService.reportVideo({
      reason,
      predefinedReasons,
      video: {
        id: this.video.id,
        startAt: hasStart && startAt ? startAt : undefined,
        endAt: hasEnd && endAt ? endAt : undefined
      }
    }).subscribe(
      () => {
        this.notifier.success(this.i18n('Video reported.'))
        this.hide()
      },

      err => this.notifier.error(err.message)
    )
  }

  isRemoteVideo () {
    return !this.video.isLocal
  }
}