osr-discourse-src/app/assets/javascripts/discourse/components/desktop-notification-config.js.es6

import computed from 'ember-addons/ember-computed-decorators';
import KeyValueStore from 'discourse/lib/key-value-store';
import { context, confirmNotification } from 'discourse/lib/desktop-notifications';
import {
  subscribe as subscribePushNotification,
  unsubscribe as unsubscribePushNotification,
  isPushNotificationsSupported,
  keyValueStore as pushNotificationKeyValueStore,
  userSubscriptionKey as pushNotificationUserSubscriptionKey
} from 'discourse/lib/push-notifications';

const keyValueStore = new KeyValueStore(context);

export default Ember.Component.extend({
  classNames: ['controls'],

  @computed("isNotSupported")
  notificationsPermission(isNotSupported) {
    return isNotSupported ? "" : Notification.permission;
  },

  @computed
  notificationsDisabled: {
    set(value) {
      keyValueStore.setItem('notifications-disabled', value);
      return keyValueStore.getItem('notifications-disabled');
    },
    get() {
      return keyValueStore.getItem('notifications-disabled');
    }
  },

  @computed
  isNotSupported() {
    return typeof window.Notification === "undefined";
  },

  @computed("isNotSupported", "notificationsPermission")
  isDeniedPermission(isNotSupported, notificationsPermission) {
    return isNotSupported ? false : notificationsPermission === "denied";
  },

  @computed("isNotSupported", "notificationsPermission")
  isGrantedPermission(isNotSupported, notificationsPermission) {
    return isNotSupported ? false : notificationsPermission === "granted";
  },

  @computed("isGrantedPermission", "notificationsDisabled")
  isEnabledDesktop(isGrantedPermission, notificationsDisabled) {
    return isGrantedPermission ? !notificationsDisabled : false;
  },

  @computed
  isEnabledPush: {
    set(value) {
      const user = this.currentUser;
      if(!user) {
        return false;
      }
      pushNotificationKeyValueStore.setItem(pushNotificationUserSubscriptionKey(user), value);
      return pushNotificationKeyValueStore.getItem(pushNotificationUserSubscriptionKey(user));
    },
    get() {
      const user = this.currentUser;
      return user ? pushNotificationKeyValueStore.getItem(pushNotificationUserSubscriptionKey(user)) : false;
    }
  },

  isEnabled: Ember.computed.or("isEnabledDesktop", "isEnabledPush"),

  isPushNotificationsPreferred() {
    if(!this.site.mobileView) {
      return false;
    }
    return isPushNotificationsSupported(this.site.mobileView);
  },

  actions: {
    recheckPermission() {
      this.propertyDidChange('notificationsPermission');
    },

    turnoff() {
      if(this.get('isEnabledDesktop')) {
        this.set('notificationsDisabled', 'disabled');
        this.propertyDidChange('notificationsPermission');
      }
      if(this.get('isEnabledPush')) {
        unsubscribePushNotification(this.currentUser, () => {
          this.set("isEnabledPush", '');
        });
      }
    },

    turnon() {
      if(this.isPushNotificationsPreferred()) {
        subscribePushNotification(() => {
          this.set("isEnabledPush", 'subscribed');
        }, this.siteSettings.vapid_public_key_bytes);
      }
      else {
        this.set('notificationsDisabled', '');
        Notification.requestPermission(() =>  {
          confirmNotification();
          this.propertyDidChange('notificationsPermission');
        });
      }
    }
  }
});