use restart notification for settings changes

This commit is contained in:
Nicolas Constant 2020-04-30 22:38:16 -04:00
parent b71743b8f6
commit e064297187
No known key found for this signature in database
GPG Key ID: 1E9F677FB01A5688
6 changed files with 56 additions and 57 deletions

View File

@ -10,9 +10,9 @@
</div>
</div>
<div *ngIf="showUpdate" class="auto-update" [class.auto-update__activated]="updateAvailable">
<div *ngIf="showRestartNotification" class="auto-update" [class.auto-update__activated]="restartNotificationAvailable">
<div class="auto-update__display">
<div class="auto-update__display--text">A new version is available!</div> <a href class="auto-update__display--reload" (click)="loadNewVersion()">reload</a> <a href class="auto-update__display--close" (click)="closeAutoUpdate()"><fa-icon [icon]="faTimes"></fa-icon></a>
<div class="auto-update__display--text">{{restartNotificationLabel}}</div> <a href class="auto-update__display--reload" (click)="loadNewVersion()" title="reload">reload</a> <a href class="auto-update__display--close" (click)="closeRestartNotification()" title="close"><fa-icon [icon]="faTimes"></fa-icon></a>
</div>
</div>

View File

@ -33,8 +33,9 @@ export class AppComponent implements OnInit, OnDestroy {
tutorialActive: boolean;
openedMediaEvent: OpenMediaEvent
updateAvailable: boolean;
showUpdate: boolean;
restartNotificationLabel: string;
restartNotificationAvailable: boolean;
showRestartNotification: boolean;
private authStorageKey: string = 'tempAuth';
@ -42,8 +43,8 @@ export class AppComponent implements OnInit, OnDestroy {
private openMediaSub: Subscription;
private streamSub: Subscription;
private dragoverSub: Subscription;
private updateAvailableSub: Subscription;
private paramsSub: Subscription;
private restartNotificationSub: Subscription;
@Select(state => state.streamsstatemodel.streams) streamElements$: Observable<StreamElement[]>;
@ -54,7 +55,7 @@ export class AppComponent implements OnInit, OnDestroy {
private readonly mastodonService: MastodonWrapperService,
private readonly authService: AuthService,
private readonly activatedRoute: ActivatedRoute,
private readonly serviceWorkerService: ServiceWorkerService,
private readonly serviceWorkerService: ServiceWorkerService, // Ensure update checks
private readonly toolsService: ToolsService,
private readonly mediaService: MediaService,
private readonly navigationService: NavigationService) {
@ -115,12 +116,6 @@ export class AppComponent implements OnInit, OnDestroy {
});
});
this.updateAvailableSub = this.serviceWorkerService.newAppVersionIsAvailable.subscribe((updateAvailable) => {
if(updateAvailable){
this.showAutoUpdate();
}
});
this.streamSub = this.streamElements$.subscribe((streams: StreamElement[]) => {
if (streams && streams.length === 0) {
this.tutorialActive = true;
@ -151,7 +146,13 @@ export class AppComponent implements OnInit, OnDestroy {
)
.subscribe(() => {
this.drag = false;
})
});
this.restartNotificationSub = this.notificationService.restartNotificationStream.subscribe((label: string) => {
if (label) {
this.displayRestartNotification(label);
}
});
}
ngOnDestroy(): void {
@ -159,8 +160,8 @@ export class AppComponent implements OnInit, OnDestroy {
this.columnEditorSub.unsubscribe();
this.openMediaSub.unsubscribe();
this.dragoverSub.unsubscribe();
this.updateAvailableSub.unsubscribe();
this.paramsSub.unsubscribe();
this.restartNotificationSub.unsubscribe();
}
closeMedia() {
@ -199,23 +200,25 @@ export class AppComponent implements OnInit, OnDestroy {
}
loadNewVersion(): boolean {
this.serviceWorkerService.loadNewAppVersion();
document.location.reload();
// this.serviceWorkerService.loadNewAppVersion();
return false;
}
showAutoUpdate(): boolean {
this.showUpdate = true;
displayRestartNotification(label: string): boolean {
this.restartNotificationLabel = label;
this.showRestartNotification = true;
setTimeout(() => {
this.updateAvailable = true;
this.restartNotificationAvailable = true;
}, 200);
return false;
}
closeAutoUpdate(): boolean {
this.updateAvailable = false;
closeRestartNotification(): boolean {
this.restartNotificationAvailable = false;
setTimeout(() => {
this.showUpdate = false;
this.showRestartNotification = false;
}, 250);
return false;

View File

@ -48,9 +48,6 @@
type="radio" name="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>
</div>
<h4 class="panel__subtitle">Content-Warning Policies</h4>
@ -90,9 +87,6 @@
<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">Timelines</h4>
@ -123,9 +117,6 @@
<label class="noselect sub-section__label" for="timelineheader-5">Title</label>
<br>
<span class="sub-section__title" *ngIf="timeLineHeaderChanged">this settings needs a <a href
(click)="reload()">reload</a> to be effective.</span>
<span class="sub-section__title">loading behavior:</span><br />
<input class="sub-section__checkbox" [checked]="timeLineMode === 1" (change)="onTimeLineModeChange(1)"
@ -142,9 +133,6 @@
type="radio" name="timelinemode-3" value="timelinemode-3" id="timelinemode-3">
<label class="noselect sub-section__label" for="timelinemode-3">Slow mode (manual loading)</label>
<br>
<span class="sub-section__title" *ngIf="timeLineModeChanged">this settings needs a <a href
(click)="reload()">reload</a> to be effective.</span>
</div>
<h4 class="panel__subtitle">Other</h4>

View File

@ -7,6 +7,7 @@ import { ToolsService } from '../../../services/tools.service';
import { UserNotificationService, NotificationSoundDefinition } from '../../../services/user-notification.service';
import { ServiceWorkerService } from '../../../services/service-worker.service';
import { ContentWarningPolicy, ContentWarningPolicyEnum, TimeLineModeEnum, TimeLineHeaderEnum } from '../../../states/settings.state';
import { NotificationService } from '../../../services/notification.service';
@Component({
selector: 'app-settings',
@ -27,16 +28,9 @@ export class SettingsComponent implements OnInit {
version: string;
columnShortcutEnabled: ColumnShortcut = ColumnShortcut.Ctrl;
columnShortcutChanged = false;
timeLineHeader: TimeLineHeaderEnum = TimeLineHeaderEnum.Title_DomainName;
timeLineHeaderChanged = false;
timeLineMode: TimeLineModeEnum = TimeLineModeEnum.OnTop;
timeLineModeChanged = false;
contentWarningPolicy: ContentWarningPolicyEnum = ContentWarningPolicyEnum.None;
contentWarningPolicyChanged = false;
private addCwOnContent: string;
set setAddCwOnContent(value: string) {
@ -69,6 +63,7 @@ export class SettingsComponent implements OnInit {
private formBuilder: FormBuilder,
private serviceWorkersService: ServiceWorkerService,
private readonly toolsService: ToolsService,
private readonly notificationService: NotificationService,
private readonly userNotificationsService: UserNotificationService) { }
ngOnInit() {
@ -104,7 +99,7 @@ export class SettingsComponent implements OnInit {
onShortcutChange(id: ColumnShortcut) {
this.columnShortcutEnabled = id;
this.columnShortcutChanged = true;
this.notifyRestartNeeded();
let settings = this.toolsService.getSettings();
settings.columnSwitchingWinAlt = id === ColumnShortcut.Win;
@ -113,7 +108,7 @@ export class SettingsComponent implements OnInit {
onTimeLineHeaderChange(id: TimeLineHeaderEnum){
this.timeLineHeader = id;
this.timeLineHeaderChanged = true;
this.notifyRestartNeeded();
let settings = this.toolsService.getSettings();
settings.timelineHeader = id;
@ -122,7 +117,7 @@ export class SettingsComponent implements OnInit {
onTimeLineModeChange(id: TimeLineModeEnum){
this.timeLineMode = id;
this.timeLineModeChanged = true;
this.notifyRestartNeeded();
let settings = this.toolsService.getSettings();
settings.timelineMode = id;
@ -131,13 +126,13 @@ export class SettingsComponent implements OnInit {
onCwPolicyChange(id: ContentWarningPolicyEnum) {
this.contentWarningPolicy = id;
this.contentWarningPolicyChanged = true;
this.notifyRestartNeeded();
this.setCwPolicy(id);
}
private setCwPolicy(id: ContentWarningPolicyEnum = null, addCw: string = null, removeCw: string = null, hide: string = null){
this.contentWarningPolicyChanged = true;
this.notifyRestartNeeded();
let settings = this.toolsService.getSettings();
let cwPolicySettings = new ContentWarningPolicy();
@ -172,10 +167,10 @@ export class SettingsComponent implements OnInit {
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;
}
// reload(): boolean {
// window.location.reload();
// return false;
// }
onChange(soundId: string) {
this.notificationSoundId = soundId;
@ -196,6 +191,7 @@ export class SettingsComponent implements OnInit {
}
onDisableAutofocusChanged() {
this.notifyRestartNeeded();
let settings = this.toolsService.getSettings();
settings.disableAutofocus = this.disableAutofocusEnabled;
this.toolsService.saveSettings(settings);
@ -208,6 +204,7 @@ export class SettingsComponent implements OnInit {
}
onDisableAvatarNotificationsChanged() {
this.notifyRestartNeeded();
let settings = this.toolsService.getSettings();
settings.disableAvatarNotifications = this.disableAvatarNotificationsEnabled;
this.toolsService.saveSettings(settings);
@ -248,6 +245,10 @@ export class SettingsComponent implements OnInit {
});
return false;
}
notifyRestartNeeded(){
this.notificationService.notifyRestartNotification('Reload to apply changes');
}
}
enum ColumnShortcut {

View File

@ -9,6 +9,7 @@ import { ToolsService } from './tools.service';
@Injectable()
export class NotificationService {
public restartNotificationStream = new Subject<string>();
public notifactionStream = new Subject<NotificatioData>();
public newRespondPostedStream = new Subject<NewReplyData>();
public hideAccountUrlStream = new Subject<string>();
@ -60,6 +61,10 @@ export class NotificationService {
public deleteStatus(status: StatusWrapper) {
this.deletedStatusStream.next(status);
}
public notifyRestartNotification(label: string){
this.restartNotificationStream.next(label);
}
}
export class NotificatioData {

View File

@ -1,17 +1,19 @@
import { Injectable, ApplicationRef } from '@angular/core';
import { SwUpdate } from '@angular/service-worker';
import { first } from 'rxjs/operators';
import { interval, concat, BehaviorSubject } from 'rxjs';
import { NotificationService } from './notification.service';
@Injectable({
providedIn: 'root'
})
export class ServiceWorkerService {
newAppVersionIsAvailable = new BehaviorSubject<boolean>(false);
private isListening = false;
constructor(appRef: ApplicationRef, private updates: SwUpdate) {
constructor(
appRef: ApplicationRef,
private updates: SwUpdate,
private notificationService: NotificationService) {
//https://angular.io/guide/service-worker-communications
@ -19,7 +21,7 @@ export class ServiceWorkerService {
console.log('current version is', event.current);
console.log('available version is', event.available);
this.newAppVersionIsAvailable.next(true);
this.notificationService.notifyRestartNotification('A new version is available!');
});
// Allow the app to stabilize first, before starting polling for updates with `interval()`.