misc

src/components/checkboxField.ts

@@ -10,6 +10,7 @@ import {LangPackKey, _i18n} from '../lib/langPack';
 import getDeepProperty from '../helpers/object/getDeepProperty';
 import rootScope from '../lib/rootScope';
 import apiManagerProxy from '../lib/mtproto/mtprotoworker';
+import simulateEvent from '../helpers/dom/dispatchEvent';
 
 export type CheckboxFieldOptions = {
   text?: LangPackKey,
@@ -19,6 +20,7 @@ export type CheckboxFieldOptions = {
   toggle?: boolean,
   stateKey?: string,
   stateValues?: any[],
+  stateValueReverse?: boolean,
   disabled?: boolean,
   checked?: boolean,
   restriction?: boolean,
@@ -73,12 +75,16 @@ export default class CheckboxField {
           value = options.stateValues[input.checked ? 1 : 0];
         } else {
           value = input.checked;
+
+          if(options.stateValueReverse) {
+            value = !value;
+          }
         }
 
         rootScope.managers.appStateManager.setByKey(options.stateKey, value);
       };
 
-      apiManagerProxy.getState().then((state) => {
+      options.checked === undefined && apiManagerProxy.getState().then((state) => {
         loaded = true;
         const stateValue = getDeepProperty(state, options.stateKey);
         let checked: boolean;
@@ -86,6 +92,10 @@ export default class CheckboxField {
           checked = options.stateValues.indexOf(stateValue) === 1;
         } else {
           checked = stateValue;
+
+          if(options.stateValueReverse) {
+            checked = !checked;
+          }
         }
 
         this.setValueSilently(checked);
@@ -162,17 +172,20 @@ export default class CheckboxField {
     } */
 
     this.setValueSilently(checked);
-
-    const event = new Event('change', {bubbles: true, cancelable: true});
-    this.input.dispatchEvent(event);
+    simulateEvent(this.input, 'change');
   }
 
   public setValueSilently(checked: boolean) {
     this.input.checked = checked;
   }
 
+  public isDisabled() {
+    return this.label.classList.contains('checkbox-disabled');
+  }
+
   public toggleDisability(disable: boolean) {
     this.label.classList.toggle('checkbox-disabled', disable);
+    this.input.disabled = disable;
     return () => this.toggleDisability(!disable);
   }
 }

src/components/radioField.ts

@@ -4,6 +4,7 @@
  * https://github.com/morethanwords/tweb/blob/master/LICENSE
  */
 
+import simulateEvent from '../helpers/dom/dispatchEvent';
 import getDeepProperty from '../helpers/object/getDeepProperty';
 import {LangPackKey, _i18n} from '../lib/langPack';
 import apiManagerProxy from '../lib/mtproto/mtprotoworker';
@@ -75,9 +76,7 @@ export default class RadioField {
 
   set checked(checked: boolean) {
     this.setValueSilently(checked);
-
-    const event = new Event('change', {bubbles: true, cancelable: true});
-    this.input.dispatchEvent(event);
+    simulateEvent(this.input, 'change');
   }
 
   public setValueSilently(checked: boolean) {

src/components/row.ts

@@ -285,6 +285,10 @@ export default class Row {
     return media;
   }
 
+  public isDisabled() {
+    return this.container.classList.contains('is-disabled');
+  }
+
   public toggleDisability(disable = !this.container.classList.contains('is-disabled')) {
     this.container.classList.toggle('is-disabled', disable);
     return () => this.toggleDisability(!disable);

src/components/sidebarLeft/index.ts

@@ -55,6 +55,8 @@ import {FOLDER_ID_ARCHIVE} from '../../lib/mtproto/mtproto_config';
 import mediaSizes from '../../helpers/mediaSizes';
 import {fastRaf} from '../../helpers/schedulers';
 import {getInstallPrompt} from '../../helpers/dom/installPrompt';
+import liteMode from '../../helpers/liteMode';
+import AppPowerSavingTab from './tabs/powerSaving';
 
 export const LEFT_COLUMN_ACTIVE_CLASSNAME = 'is-left-column-shown';
 
@@ -175,8 +177,17 @@ export class AppSidebarLeft extends SidebarSlider {
       checkboxField: new CheckboxField({
         toggle: true,
         checked: true,
-        stateKey: 'settings.animationsEnabled'
-      })
+        stateKey: 'settings.liteMode.animations',
+        stateValueReverse: true
+      }),
+      verify: () => !liteMode.isEnabled()
+    }, {
+      icon: 'animations',
+      text: 'LiteMode.Title',
+      onClick: () => {
+        this.createTab(AppPowerSavingTab).open();
+      },
+      verify: () => liteMode.isEnabled()
     }, {
       icon: 'help',
       text: 'TelegramFeatures',

src/components/sidebarLeft/tabs/generalSettings.ts

@@ -35,6 +35,7 @@ import RLottiePlayer from '../../../lib/rlottie/rlottiePlayer';
 import themeController from '../../../helpers/themeController';
 import liteMode from '../../../helpers/liteMode';
 import AppPowerSavingTab from './powerSaving';
+import {toastNew} from '../../toast';
 
 export class RangeSettingSelector {
   public container: HTMLDivElement;
@@ -130,8 +131,28 @@ export default class AppGeneralSettingsTab extends SliderSuperTabEventable {
 
       const onUpdate = () => {
         i.compareAndUpdate({key: getLiteModeStatus()});
+        animationsCheckboxField.setValueSilently(liteMode.isAvailable('animations'));
+        animationsCheckboxField.toggleDisability(liteMode.isEnabled());
       };
-      onUpdate();
+
+      const animationsCheckboxField = new CheckboxField({
+        text: 'EnableAnimations',
+        name: 'animations',
+        stateKey: 'settings.liteMode.animations',
+        stateValueReverse: true,
+        checked: false,
+        listenerSetter: this.listenerSetter
+      });
+
+      const animationsRow = new Row({
+        checkboxField: animationsCheckboxField,
+        clickable: () => {
+          if(animationsCheckboxField.isDisabled()) {
+            toastNew({langPackKey: 'LiteMode.DisableAlert'});
+          }
+        },
+        listenerSetter: this.listenerSetter
+      });
 
       const liteModeRow = new Row({
         icon: 'animations',
@@ -143,11 +164,14 @@ export default class AppGeneralSettingsTab extends SliderSuperTabEventable {
         listenerSetter: this.listenerSetter
       });
 
+      onUpdate();
+
       this.listenerSetter.add(rootScope)('settings_updated', onUpdate);
 
       container.append(
         range.container,
         chatBackgroundButton,
+        animationsRow.container,
         liteModeRow.container
       );
     }

src/components/sidebarLeft/tabs/powerSaving.ts

@@ -39,8 +39,8 @@ export default class AppPowerSavingTab extends SliderSuperTab {
       'all',
       'video',
       'gif',
-      ['stickers', ['stickers_panel', 'stickers_chat']],
-      ['emoji', ['emoji_panel', 'emoji_messages']],
+      // ['stickers', ['stickers_panel', 'stickers_chat']],
+      // ['emoji', ['emoji_panel', 'emoji_messages']],
       ['effects', ['effects_reactions', 'effects_premiumstickers', 'effects_emoji']],
       ['chat', ['chat_background', 'chat_spoilers']],
       'animations'

src/config/app.ts

@@ -21,7 +21,7 @@ const App = {
   version: process.env.VERSION,
   versionFull: process.env.VERSION_FULL,
   build: +process.env.BUILD,
-  langPackVersion: '0.9.7',
+  langPackVersion: '0.9.8',
   langPack: 'webk',
   langPackCode: 'en',
   domains: MAIN_DOMAINS,

src/helpers/liteMode.ts

@@ -14,6 +14,10 @@ export type LiteModeKey = 'all' | 'gif' | 'video' |
   'chat' | 'chat_background' | 'chat_spoilers' | 'animations';
 
 export class LiteMode {
+  public isEnabled() {
+    return rootScope.settings.liteMode.all;
+  }
+
   public isAvailable(key: LiteModeKey) {
     return !rootScope.settings.liteMode.all && !rootScope.settings.liteMode[key];
   }

src/lib/appManagers/utils/state/loadState.ts

@@ -377,6 +377,12 @@ async function loadStateInner() {
       }
     }
 
+    if(state.build < 309) {
+      state.settings.liteMode.animations = !state.settings.animationsEnabled;
+      state.settings.liteMode.video = !state.settings.autoPlay.videos;
+      state.settings.liteMode.gif = !state.settings.autoPlay.gifs;
+    }
+
     if(compareVersion(state.version, STATE_VERSION) !== 0) {
       newVersion = STATE_VERSION;
       oldVersion = state.version;