use restart notification for settings changes
This commit is contained in:
parent
b71743b8f6
commit
e064297187
|
@ -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>
|
||||
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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()`.
|
||||
|
|
Loading…
Reference in New Issue