Merge pull request #242 from NicolasConstant/topic_enhanced-cw

Topic enhanced cw

src/app/app.module.ts

@@ -169,6 +169,7 @@ const routes: Routes = [
             StreamsState,
             SettingsState
         ]),
+        //], { developmentMode: !environment.production }),
         NgxsStoragePluginModule.forRoot(),
         ContextMenuModule.forRoot(),
         HotkeyModule.forRoot(),

src/app/components/floating-column/settings/settings.component.html

@@ -39,24 +39,64 @@
         <div class="sub-section">
             <span class="sub-section__title">switch column:</span><br />
 
-            <input class="sub-section__checkbox" [checked]="columnShortcutEnabled === 1"
+            <input class="sub-section__checkbox" [checked]="columnShortcutEnabled === 1" (change)="onShortcutChange(1)"
-                (change)="onShortcutChange(1)" type="radio" name="column-ctrl" value="column-ctrl"
+                type="radio" name="column-ctrl" value="column-ctrl" id="column-ctrl">
-                id="column-ctrl">
             <label class="noselect sub-section__label" for="column-ctrl">Ctrl + Left | Ctrl + Right</label>
             <br>
 
-            <input class="sub-section__checkbox" [checked]="columnShortcutEnabled === 2"
+            <input class="sub-section__checkbox" [checked]="columnShortcutEnabled === 2" (change)="onShortcutChange(2)"
-                (change)="onShortcutChange(2)" type="radio" name="colmun-win"
+                type="radio" name="colmun-win" value="colmun-win" id="colmun-win">
-                value="colmun-win" id="colmun-win">
             <label class="noselect sub-section__label" for="colmun-win">Win + Alt + Left | Win + Alt + Right</label>
             <br>
 
-            <span class="sub-section__title" *ngIf="columnShortcutChanged">this settings needs a <a href (click)="reload()">reload</a> to be effective.</span>
+            <span class="sub-section__title" *ngIf="columnShortcutChanged">this settings needs a <a href
+                    (click)="reload()">reload</a> to be effective.</span>
+        </div>
+
+        <h4 class="panel__subtitle">Content-Warning Policies</h4>
+        <div class="sub-section">
+            <span class="sub-section__title">global behavior:</span><br />
+            <input class="sub-section__checkbox" [checked]="contentWarningPolicy === 1" (change)="onCwPolicyChange(1)"
+                type="radio" name="cw-none" value="cw-none" id="cw-none">
+            <label class="noselect sub-section__label" for="cw-none">None</label>
+            <br>
+
+            <input class="sub-section__checkbox" [checked]="contentWarningPolicy === 2" (change)="onCwPolicyChange(2)"
+                type="radio" name="cw-hide-all" value="cw-hide-all" id="cw-hide-all">
+            <label class="noselect sub-section__label" for="cw-hide-all">Hide all CWs</label>
+            <br>
+            <div class="sub-section__cw-settings" *ngIf="contentWarningPolicy === 2">
+                <span class="sub-section__title">but add CW on content containing:</span><br />
+                <div class="sub-text-input">
+                    <input type="text" class="form-control form-control-sm sub_section__text-input"
+                        [(ngModel)]="setAddCwOnContent" placeholder="example;other example" />
+                </div>
+            </div>
+
+            <input class="sub-section__checkbox" [checked]="contentWarningPolicy === 3" (change)="onCwPolicyChange(3)"
+                type="radio" name="cw-add-on-all" value="cw-add-on-all" id="cw-add-on-all">
+            <label class="noselect sub-section__label" for="cw-add-on-all">Add CW on all content</label>
+            <br>
+            <div class="sub-section__cw-settings" *ngIf="contentWarningPolicy === 3">
+                <span class="sub-section__title">unless content is containing:</span><br />
+                <div class="sub-text-input">
+                    <input type="text" class="form-control form-control-sm sub_section__text-input"
+                        [(ngModel)]="setRemoveCwOnContent" placeholder="example;other example" />
+                </div>
+            </div>
+
+            <span class="sub-section__title">hide completely content containing:</span><br />
+            <div class="sub-text-input">
+                <input type="text" class="form-control form-control-sm sub_section__text-input"
+                    [(ngModel)]="setContentHidedCompletely" placeholder="example;other example" />
+            </div>
+
+            <span class="sub-section__title" *ngIf="contentWarningPolicyChanged"><br/>this settings needs a <a href (click)="reload()">reload</a> to be effective.</span>
         </div>
 
         <h4 class="panel__subtitle">About</h4>
         <p class="version">
-            Sengi version: {{version}}<br/>
+            Sengi version: {{version}}<br />
             <a href class="version__link" (click)="checkForUpdates()">check for updates</a>
             <app-waiting-animation *ngIf="isCheckingUpdates" class="waiting-icon"></app-waiting-animation>
         </p>
@@ -79,6 +119,7 @@
                 (click)="cancelClearAll()">
                 Cancel
             </a>
+            <br/>
         </div>
 
     </div>

src/app/components/floating-column/settings/settings.component.scss

@@ -58,6 +58,29 @@
             text-decoration: underline;
         }
     }   
+
+    &__text-input {
+
+    }
+
+    &__cw-settings {
+        padding: 0 0 10px 15px;
+    }
+}
+
+.form-control {
+    border: 1px solid $settings-text-input-border;
+    color: $settings-text-input-foreground;
+    background-color: $settings-text-input-background;
+    height: 24px;
+
+    &:focus {
+        box-shadow: none;
+    }
+}
+
+.sub-text-input {
+    padding: 0 5px;
 }
 
 .sound {

src/app/components/floating-column/settings/settings.component.ts

@@ -6,6 +6,7 @@ import { environment } from '../../../../environments/environment';
 import { ToolsService } from '../../../services/tools.service';
 import { UserNotificationService, NotificationSoundDefinition } from '../../../services/user-notification.service';
 import { ServiceWorkerService } from '../../../services/service-worker.service';
+import { ContentWarningPolicy, ContentWarningPolicyEnum } from '../../../states/settings.state';
 
 @Component({
     selector: 'app-settings',
@@ -27,6 +28,36 @@ export class SettingsComponent implements OnInit {
     columnShortcutEnabled: ColumnShortcut = ColumnShortcut.Ctrl;
     columnShortcutChanged = false;
 
+    contentWarningPolicy: ContentWarningPolicyEnum = ContentWarningPolicyEnum.None;
+    contentWarningPolicyChanged = false;
+
+    private addCwOnContent: string;
+    set setAddCwOnContent(value: string) {
+        this.setCwPolicy(null, value, null, null);
+        this.addCwOnContent = value.trim();
+    }
+    get setAddCwOnContent(): string {
+        return this.addCwOnContent;
+    }
+
+    private removeCwOnContent: string;
+    set setRemoveCwOnContent(value: string) {
+        this.setCwPolicy(null, null, value, null);
+        this.removeCwOnContent = value.trim();
+    }
+    get setRemoveCwOnContent(): string {
+        return this.removeCwOnContent;
+    }
+
+    private contentHidedCompletely: string;
+    set setContentHidedCompletely(value: string) {
+        this.setCwPolicy(null, null, null, value);
+        this.contentHidedCompletely = value.trim();
+    }
+    get setContentHidedCompletely(): string {
+        return this.contentHidedCompletely;
+    }
+
     constructor(
         private formBuilder: FormBuilder,
         private serviceWorkersService: ServiceWorkerService,
@@ -53,17 +84,65 @@ export class SettingsComponent implements OnInit {
         } else {
             this.columnShortcutEnabled = ColumnShortcut.Win;
         }
+
+        this.contentWarningPolicy = settings.contentWarningPolicy.policy;
+        this.addCwOnContent = settings.contentWarningPolicy.addCwOnContent.join(';');
+        this.removeCwOnContent = settings.contentWarningPolicy.removeCwOnContent.join(';');
+        this.contentHidedCompletely = settings.contentWarningPolicy.hideCompletlyContent.join(';');
     }
 
     onShortcutChange(id: ColumnShortcut) {
         this.columnShortcutEnabled = id;
         this.columnShortcutChanged = true;
 
-        let settings = this.toolsService.getSettings()
+        let settings = this.toolsService.getSettings();
         settings.columnSwitchingWinAlt = id === ColumnShortcut.Win;
         this.toolsService.saveSettings(settings);
     }
 
+    onCwPolicyChange(id: ContentWarningPolicyEnum) {
+        this.contentWarningPolicy = id;
+        this.contentWarningPolicyChanged = true;
+
+        this.setCwPolicy(id);
+    }
+
+    private setCwPolicy(id: ContentWarningPolicyEnum = null, addCw: string = null, removeCw: string = null, hide: string = null){
+        this.contentWarningPolicyChanged = true;
+        let settings = this.toolsService.getSettings();        
+        let cwPolicySettings = new ContentWarningPolicy();
+
+        if(id !== null){
+            cwPolicySettings.policy = id;
+        } else {
+            cwPolicySettings.policy = settings.contentWarningPolicy.policy;
+        }
+
+        if(addCw !== null){
+            cwPolicySettings.addCwOnContent = this.splitCwValues(addCw);
+        } else {
+            cwPolicySettings.addCwOnContent = settings.contentWarningPolicy.addCwOnContent;
+        }
+
+        if(removeCw !== null){
+            cwPolicySettings.removeCwOnContent = this.splitCwValues(removeCw);
+        } else {
+            cwPolicySettings.removeCwOnContent = settings.contentWarningPolicy.removeCwOnContent;
+        }
+
+        if(hide !== null){
+            cwPolicySettings.hideCompletlyContent = this.splitCwValues(hide);
+        } else {
+            cwPolicySettings.hideCompletlyContent = settings.contentWarningPolicy.hideCompletlyContent;
+        }
+
+        this.toolsService.saveContentWarningPolicy(cwPolicySettings);
+    }
+
+    private splitCwValues(data: string): string[]{
+        return data.split(';').map(x => x.trim().toLowerCase()).filter((value, index, self) => self.indexOf(value) === index).filter(y => y !== '');
+    }
+
     reload(): boolean {
         window.location.reload();
         return false;
@@ -136,7 +215,6 @@ export class SettingsComponent implements OnInit {
     }
 }
 
-
 enum ColumnShortcut {
     Ctrl = 1,
     Win = 2

src/app/components/stream/status/status.component.html

@@ -1,4 +1,4 @@
-<div class="status-wrapper" [class.direct-message]="isDirectMessage" [class.status-selected]="isSelected">
+<div *ngIf="!hideStatus" class="status-wrapper" [class.direct-message]="isDirectMessage" [class.status-selected]="isSelected">
     <div class="reblog" *ngIf="reblog">
         <a class="reblog__profile-link" href title="{{ status.account.acct }}" 
             (click)="openAccount(status.account)"

src/app/components/stream/status/status.component.ts

@@ -6,6 +6,8 @@ import { OpenThreadEvent, ToolsService } from "../../../services/tools.service";
 import { ActionBarComponent } from "./action-bar/action-bar.component";
 import { StatusWrapper } from '../../../models/common.model';
 import { EmojiConverter, EmojiTypeEnum } from '../../../tools/emoji.tools';
+import { ContentWarningPolicyEnum } from '../../../states/settings.state';
+import { stat } from 'fs';
 
 @Component({
     selector: "app-status",
@@ -38,6 +40,8 @@ export class StatusComponent implements OnInit {
     isDirectMessage: boolean;
     isSelected: boolean;
 
+    hideStatus: boolean = false;
+
     @Output() browseAccountEvent = new EventEmitter<string>();
     @Output() browseHashtagEvent = new EventEmitter<string>();
     @Output() browseThreadEvent = new EventEmitter<OpenThreadEvent>();
@@ -95,10 +99,52 @@ export class StatusComponent implements OnInit {
     }
 
     private checkContentWarning(status: Status) {
-        if (status.sensitive || status.spoiler_text) {
+        let cwPolicy = this.toolsService.getSettings().contentWarningPolicy;
-            this.isContentWarned = true;
+
-            this.contentWarningText =  this.emojiConverter.applyEmojis(this.displayedStatus.emojis, status.spoiler_text, EmojiTypeEnum.medium);
+        let splittedContent = [];
+        if ((cwPolicy.policy === ContentWarningPolicyEnum.HideAll && cwPolicy.addCwOnContent.length > 0)
+            || (cwPolicy.policy === ContentWarningPolicyEnum.AddOnAllContent && cwPolicy.removeCwOnContent.length > 0)
+            || (cwPolicy.hideCompletlyContent && cwPolicy.hideCompletlyContent.length > 0)) {
+            let parser = new DOMParser();
+            let dom = parser.parseFromString((status.content + ' ' + status.spoiler_text).replace("<br/>", " ").replace("<br>", " ").replace(/\n/g, ' '), 'text/html')
+            let contentToParse = dom.body.textContent;
+            splittedContent = contentToParse.toLowerCase().split(' ');
         }
+
+        if (cwPolicy.policy === ContentWarningPolicyEnum.None && (status.sensitive || status.spoiler_text)) {
+            this.setContentWarning(status);
+        } else if (cwPolicy.policy === ContentWarningPolicyEnum.HideAll) {
+            let detected = cwPolicy.addCwOnContent.filter(x => splittedContent.find(y => y == x || y == `#${x}`));
+            if (!detected || detected.length === 0) {
+                this.status.sensitive = false;
+            } else {
+                if (!status.spoiler_text) {
+                    status.spoiler_text = detected.join(' ');
+                }
+                this.setContentWarning(status);
+            }
+        } else if (cwPolicy.policy === ContentWarningPolicyEnum.AddOnAllContent) {
+            let detected = cwPolicy.removeCwOnContent.filter(x => splittedContent.find(y => y == x || y == `#${x}`));
+
+            if (detected && detected.length > 0) {
+                this.status.sensitive = false;
+            } else {               
+                this.setContentWarning(status);
+            }
+        }
+
+        if (cwPolicy.hideCompletlyContent && cwPolicy.hideCompletlyContent.length > 0) {
+            let detected = cwPolicy.hideCompletlyContent.filter(x => splittedContent.find(y => y == x || y == `#${x}`));
+            if (detected && detected.length > 0) {
+                this.hideStatus = true;
+            }
+        }
+    }
+
+    private setContentWarning(status: Status) {
+        this.status.sensitive = true;
+        this.isContentWarned = true;
+        this.contentWarningText = this.emojiConverter.applyEmojis(this.displayedStatus.emojis, status.spoiler_text, EmojiTypeEnum.medium);
     }
 
     removeContentWarning(): boolean {
@@ -167,7 +213,7 @@ export class StatusComponent implements OnInit {
     }
 
     textSelected(): boolean {
-        if(this.isSelected) return false;
+        if (this.isSelected) return false;
 
         const status = this._statusWrapper.status;
         const accountInfo = this._statusWrapper.provider;

src/app/services/tools.service.ts

@@ -5,7 +5,7 @@ import { AccountInfo } from '../states/accounts.state';
 import { MastodonWrapperService } from './mastodon-wrapper.service';
 import { Account, Results, Status, Emoji } from "./models/mastodon.interfaces";
 import { StatusWrapper } from '../models/common.model';
-import { AccountSettings, SaveAccountSettings, GlobalSettings, SaveSettings } from '../states/settings.state';
+import { AccountSettings, SaveAccountSettings, GlobalSettings, SaveSettings, ContentWarningPolicy, SaveContentWarningPolicy } from '../states/settings.state';
 import { AppInfo, RegisteredAppsStateModel } from '../states/registered-apps.state';
 
 @Injectable({
@@ -96,6 +96,13 @@ export class ToolsService {
 
     getSettings(): GlobalSettings {
         let settings = <GlobalSettings>this.store.snapshot().globalsettings.settings;
+
+        if(!settings.contentWarningPolicy){
+            var newCwPolicy = new ContentWarningPolicy();
+            this.saveContentWarningPolicy(newCwPolicy);
+            return <GlobalSettings>this.store.snapshot().globalsettings.settings;
+        }
+
         return settings;
     }
 
@@ -105,6 +112,12 @@ export class ToolsService {
         ]);
     }
 
+    saveContentWarningPolicy(cwSettings: ContentWarningPolicy){
+        this.store.dispatch([
+            new SaveContentWarningPolicy(cwSettings)
+        ]);
+    }
+
     findAccount(account: AccountInfo, accountName: string): Promise<Account> {
         let findAccountFunc = (result: Results) => {
             if (accountName[0] === '@') accountName = accountName.substr(1);

src/app/states/settings.state.ts

@@ -5,6 +5,11 @@ export class RemoveAccountSettings {
     constructor(public accountId: string) {}
 }
 
+export class SaveContentWarningPolicy {
+    static readonly type = '[Settings] Save ContentWarningPolicy';
+    constructor(public contentWarningPolicy: ContentWarningPolicy) {}
+}
+
 export class SaveAccountSettings {
     static readonly type = '[Settings] Save AccountSettings';
     constructor(public accountSettings: AccountSettings) {}
@@ -29,6 +34,19 @@ export class AccountSettings {
     customStatusCharLength: number = 500;
 }
 
+export enum ContentWarningPolicyEnum {
+    None = 1, 
+    HideAll = 2,
+    AddOnAllContent = 3
+}
+
+export class ContentWarningPolicy {
+    policy: ContentWarningPolicyEnum = ContentWarningPolicyEnum.None;
+    addCwOnContent: string[] = [];
+    removeCwOnContent: string[] = [];
+    hideCompletlyContent: string[] = [];
+}
+
 export class GlobalSettings {
     disableAutofocus = false;
     disableAvatarNotifications = false;
@@ -36,6 +54,8 @@ export class GlobalSettings {
     
     notificationSoundFileId: string = '0';
 
+    contentWarningPolicy: ContentWarningPolicy = new ContentWarningPolicy();
+
     columnSwitchingWinAlt = false;
 
     accountSettings: AccountSettings[] = [];
@@ -65,6 +85,7 @@ export class SettingsState {
         let newSettings = new GlobalSettings();
 
         newSettings = this.setGlobalSettingsValues(newSettings, state.settings);
+        newSettings.contentWarningPolicy = state.settings.contentWarningPolicy;
         newSettings.accountSettings = [...state.settings.accountSettings.filter(x => x.accountId !== action.accountId)];
                   
         ctx.patchState({
@@ -78,6 +99,7 @@ export class SettingsState {
 
         let newSettings = new GlobalSettings();
         newSettings = this.setGlobalSettingsValues(newSettings, state.settings);
+        newSettings.contentWarningPolicy = state.settings.contentWarningPolicy;
         newSettings.accountSettings = [...state.settings.accountSettings.filter(x => x.accountId !== action.accountSettings.accountId), action.accountSettings];
 
         ctx.patchState({
@@ -91,6 +113,7 @@ export class SettingsState {
 
         let newSettings = new GlobalSettings();
         newSettings = this.setGlobalSettingsValues(newSettings, action.settings);
+        newSettings.contentWarningPolicy = state.settings.contentWarningPolicy;
         newSettings.accountSettings = [...state.settings.accountSettings];        
         
         ctx.patchState({
@@ -98,6 +121,21 @@ export class SettingsState {
         });
     }
 
+    @Action(SaveContentWarningPolicy)
+    SaveContentWarningPolicy(ctx: StateContext<SettingsStateModel>, action: SaveContentWarningPolicy){
+        const state = ctx.getState();
+
+        let newSettings = new GlobalSettings();
+
+        newSettings = this.setGlobalSettingsValues(newSettings, state.settings);
+        newSettings.accountSettings = [...state.settings.accountSettings];
+        newSettings.contentWarningPolicy = action.contentWarningPolicy;
+
+        ctx.patchState({
+            settings: newSettings
+        });
+    }
+
     private setGlobalSettingsValues(newSettings: GlobalSettings, oldSettings: GlobalSettings): GlobalSettings {
 
         newSettings.disableAutofocus = oldSettings.disableAutofocus;

src/sass/_variables.scss

@@ -96,3 +96,7 @@ $scheduler-background: #3e455f;
 $notification-column-selector-background: #171c29;
 $notification-column-selector-color: #999fb1;
 $notification-column-selector-color-hover: white;
+
+$settings-text-input-background: #242836;
+$settings-text-input-foreground: white;
+$settings-text-input-border: #32384d;