fix animations not working on iOS 12.3 beta

2019-04-11 15:04:10 +00:00 · 2019-04-11 15:04:10 +00:00 · 83127bcdae
commit 83127bcdae
parent caa6b9a85e
23 changed files with 52 additions and 48 deletions
--- a/bigbluebutton-html5/imports/startup/client/base.jsx
+++ b/bigbluebutton-html5/imports/startup/client/base.jsx
@ -19,10 +19,10 @@ import IntlStartup from './intl';
 import Meetings from '../../api/meetings';
 import AnnotationsTextService from '/imports/ui/components/whiteboard/annotations/text/service';

-
 const CHAT_CONFIG = Meteor.settings.public.chat;
 const PUBLIC_GROUP_CHAT_ID = CHAT_CONFIG.public_group_id;
 const PUBLIC_CHAT_TYPE = CHAT_CONFIG.type_public;
+const HTML = document.getElementsByTagName('html')[0];

 const propTypes = {
  subscriptionsReady: PropTypes.bool.isRequired,
@ -70,6 +70,11 @@ class Base extends Component {
  }

  componentDidMount() {
+    const { animations } = this.props;
+
+    if (animations) HTML.classList.add('animationsEnabled');
+    if (!animations) HTML.classList.add('animationsDisabled');
+
    fullscreenChangedEvents.forEach((event) => {
      document.addEventListener(event, Base.handleFullscreenChange);
    });
@ -118,10 +123,15 @@ class Base extends Component {
      this.setMeetingExisted(false);
    }

+    const enabled = HTML.classList.contains('animationsEnabled');
+    const disabled = HTML.classList.contains('animationsDisabled');
+
    if (animations && animations !== prevProps.animations) {
-      document.documentElement.style.setProperty('--enableAnimation', 1);
+      if (disabled) HTML.classList.remove('animationsDisabled');
+      HTML.classList.add('animationsEnabled');
    } else if (!animations && animations !== prevProps.animations) {
-      document.documentElement.style.setProperty('--enableAnimation', 0);
+      if (enabled) HTML.classList.remove('animationsEnabled');
+      HTML.classList.add('animationsDisabled');
    }
  }

--- a/bigbluebutton-html5/imports/ui/components/app/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/app/styles.scss
@ -72,7 +72,7 @@
    opacity: 0;
    pointer-events: none;

-    [style~="--enableAnimation:1;"] & {
+    :global(.animationsEnabled) & {
      transition: opacity .3s;
    }
  }
--- a/bigbluebutton-html5/imports/ui/components/audio/audio-controls/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/audio/audio-controls/styles.scss
@ -25,10 +25,11 @@
 .glow {
  border-radius: 50%;
  
-  [style~="--enableAnimation:1;"] & {
+  :global(.animationsEnabled) & {
    animation: pulse 1s infinite ease-in;
  }
-  [style~="--enableAnimation:0;"] & span {
+
+  :global(.animationsDisabled) & span {
    content: '';
    outline: none !important;
    background-clip: padding-box;
--- a/bigbluebutton-html5/imports/ui/components/audio/audio-modal/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/audio/audio-modal/styles.scss
@ -147,7 +147,7 @@
    width: 0;
    margin-right: 1.25em;

-    [style~="--enableAnimation:1;"] & {
+    :global(.animationsEnabled) & {
      animation: ellipsis steps(4,end) 900ms infinite;
    }
  }
--- a/bigbluebutton-html5/imports/ui/components/audio/audio-test/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/audio/audio-test/styles.scss
@ -11,7 +11,7 @@
  i {
    color: var(--color-primary);

-    [style~="--enableAnimation:1;"] & {
+    :global(.animationsEnabled) & {
      transition: all .2s ease-in-out;
    }
  }
--- a/bigbluebutton-html5/imports/ui/components/audio/permissions-overlay/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/audio/permissions-overlay/styles.scss
@ -28,7 +28,7 @@
    content: "\E906";
    position: relative;

-    [style~="--enableAnimation:1;"] & {
+    :global(.animationsEnabled) & {
      animation: bounce 2s infinite;
    }
  }
@ -37,7 +37,7 @@
    top: var(--arrow-top-edge);
    left: var(--arrow-left-edge);
    font-size: 20px;
-    [style~="--enableAnimation:1;"] & {
+    :global(.animationsEnabled) & {
      animation: bounceRotate 2s infinite;
    }
  }
@ -82,7 +82,7 @@
  right: 0;
  background-color: rgba(0, 0, 0, .85);

-  [style~="--enableAnimation:1;"] & {
+  :global(.animationsEnabled) & {
    animation: fade-in .5s ease-in;
  }
 }
--- a/bigbluebutton-html5/imports/ui/components/breakout-room/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/breakout-room/styles.scss
@ -91,7 +91,7 @@
    width: 0;
    margin-right: 1.25em;

-    [style~="--enableAnimation:1;"] & {
+    :global(.animationsEnabled) & {
      animation: ellipsis steps(4,end) 900ms infinite;
    }
  }
--- a/bigbluebutton-html5/imports/ui/components/chat/message-form/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/chat/message-form/styles.scss
@ -28,7 +28,7 @@
  padding: var(--sm-padding-y) var(--sm-padding-x);
  cursor: pointer;

-  [style~="--enableAnimation:1;"] & {
+  :global(.animationsEnabled) & {
    transition: all .3s;
  }

--- a/bigbluebutton-html5/imports/ui/components/external-video-player/modal/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/external-video-player/modal/styles.scss
@ -134,7 +134,7 @@
    border: 1px solid var(--color-gray-lighter);
    border-radius: var(--border-radius);

-    [style~="--enableAnimation:1;"] & {
+    :global(.animationsEnabled) & {
      transition: box-shadow .2s;
    }
  }
@ -148,7 +148,7 @@
  color: red;
  padding: 1em;
  
-  [style~="--enableAnimation:1;"] & {
+  :global(.animationsEnabled) & {
    transition: 1s;
  }
 }
--- a/bigbluebutton-html5/imports/ui/components/join-handler/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/join-handler/component.jsx
@ -7,7 +7,6 @@ import { makeCall } from '/imports/ui/services/api';
 import deviceInfo from '/imports/utils/deviceInfo';
 import logger from '/imports/startup/client/logger';
 import LoadingScreen from '/imports/ui/components/loading-screen/component';
-import Settings from '/imports/ui/services/settings';

 const propTypes = {
  children: PropTypes.element.isRequired,
@ -34,10 +33,6 @@ class JoinHandler extends Component {

  componentDidMount() {
    this.fetchToken();
-
-    const { animations } = Settings.application;
-    const enableAnimation = (animations) ? 1 : 0;
-    document.documentElement.style.setProperty('--enableAnimation', enableAnimation);
  }

  changeToJoin(bool) {
--- a/bigbluebutton-html5/imports/ui/components/loading-screen/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/loading-screen/styles.scss
@ -41,19 +41,19 @@
  border-radius: 100%;
  display: inline-block;

-  [style~="--enableAnimation:1;"] & {
+  :global(.animationsEnabled) & {
    animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  }
 }

 .spinner .bounce1 {
-  [style~="--enableAnimation:1;"] & {
+  :global(.animationsEnabled) & {
    animation-delay: -0.32s;
  }
 }

 .spinner .bounce2 {
-  [style~="--enableAnimation:1;"] & {
+  :global(.animationsEnabled) & {
    animation-delay: -0.16s;
  }
 }
--- a/bigbluebutton-html5/imports/ui/components/presentation/default-content/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/presentation/default-content/styles.scss
@ -43,7 +43,7 @@
 .appearActive {
  opacity: 1;

-  [style~="--enableAnimation:1;"] & {
+  :global(.animationsEnabled) & {
    transition: opacity 700ms ease-in;
  }
 }
--- a/bigbluebutton-html5/imports/ui/components/presentation/presentation-uploader/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/presentation/presentation-uploader/styles.scss
@ -121,7 +121,7 @@
  );
  background-size: 1rem 1rem;

-  [style~="--enableAnimation:1;"] & {
+  :global(.animationsEnabled) & {
    animation: bar-stripes 1s linear infinite;
  }
 }
@ -142,7 +142,7 @@
  color: var(--color-gray-light);
  padding: 0;

-  [style~="--enableAnimation:1;"] & {
+  :global(.animationsEnabled) & {
    transition: all .25s;
  }

--- a/bigbluebutton-html5/imports/ui/components/presentation/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/presentation/styles.scss
@ -8,7 +8,7 @@
 .enterActive {
  opacity: 1;

-  [style~="--enableAnimation:1;"] & {
+  :global(.animationsEnabled) & {
    transition: opacity 400ms ease-in;
  }
 }
@ -20,7 +20,7 @@
 .appearActive {
  opacity: 1;

-  [style~="--enableAnimation:1;"] & {
+  :global(.animationsEnabled) & {
    transition: opacity 400ms ease-in;
  }
 }
--- a/bigbluebutton-html5/imports/ui/components/toast/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/toast/styles.scss
@ -172,7 +172,7 @@
  font-size: 70%;
  top: var(--lg-padding-y);

-  [style~="--enableAnimation:1;"] & {
+  :global(.animationsEnabled) & {
    transition: .3s ease;
  }

--- a/bigbluebutton-html5/imports/ui/components/user-avatar/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/user-avatar/styles.scss
@ -24,7 +24,7 @@
  text-transform: capitalize;
  font-size: .85rem;

-  [style~="--enableAnimation:1;"] & {
+  :global(.animationsEnabled) & {
    transition: .3s ease-in-out;
  }

@ -53,7 +53,7 @@
    letter-spacing: -.65rem;
    z-index: 1;

-    [style~="--enableAnimation:1;"] & {
+    :global(.animationsEnabled) & {
        transition: .3s ease-in-out;
    }
  }
@ -68,12 +68,12 @@
  background-color: var(--user-color);
  border-radius: inherit;

-  [style~="--enableAnimation:1;"] & {
+  :global(.animationsEnabled) & {
    animation: pulse 1s infinite ease-in;
  }

  &::before {
-    [style~="--enableAnimation:0;"] & {
+    :global(.animationsDisabled) & {
      content: '';
      position: absolute;
      top: 0;
--- a/bigbluebutton-html5/imports/ui/components/user-list/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/user-list/styles.scss
@ -48,7 +48,7 @@
  border-bottom-left-radius: 5px;
  cursor: pointer;

-  [style~="--enableAnimation:1;"] & {
+  :global(.animationsEnabled) & {
    transition: all .3s;
  }

@ -138,7 +138,7 @@
 .appearActive {
  opacity: 1;
  
-  [style~="--enableAnimation:1;"] & {
+  :global(.animationsEnabled) & {
    transition: all 600ms;
  }
 }
@ -150,7 +150,7 @@
 .leaveActive {
  opacity: 0;

-  [style~="--enableAnimation:1;"] & {
+  :global(.animationsEnabled) & {
    transition: all 600ms;
  }
 }
--- a/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-list-item/user-dropdown/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-list-item/user-dropdown/styles.scss
@ -17,7 +17,7 @@
  opacity: 1;
  max-height: 10rem;

-  [style~="--enableAnimation:1;"] & {
+  :global(.animationsEnabled) & {
    transition: all 300ms;
  }
 }
@ -31,7 +31,7 @@
  opacity: 0;
  max-height: 0rem;
  
-  [style~="--enableAnimation:1;"] & {
+  :global(.animationsEnabled) & {
    transition: all 500ms;
  }
 }
@ -49,7 +49,7 @@
  opacity: 1;
  max-height: 10rem;

-  [style~="--enableAnimation:1;"] & {
+  :global(.animationsEnabled) & {
    transition: all 500ms;
  }
 }
@ -63,7 +63,7 @@
  opacity: 0;
  transform: translateY(-100%);

-  [style~="--enableAnimation:1;"] & {
+  :global(.animationsEnabled) & {
    transition: all 300ms;
  }
 }
--- a/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-list-item/user-icons/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-list-item/user-icons/styles.scss
@ -7,7 +7,7 @@
  justify-content: center;
  margin-left: var(--sm-padding-x) / 2;

-  [style~="--enableAnimation:1;"] & {
+  :global(.animationsEnabled) & {
    transition: .3s all;
  }
 }
--- a/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-list-item/user-name/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-list-item/user-name/styles.scss
@ -18,7 +18,7 @@
  font-weight: 400;
  color: var(--color-gray-dark);

-  [style~="--enableAnimation:1;"] & {
+  :global(.animationsEnabled) & {
    transition: all .3s;
  }
 }
--- a/bigbluebutton-html5/imports/ui/components/video-provider/video-list/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/video-provider/video-list/styles.scss
@ -57,7 +57,7 @@
    opacity: 0;
    pointer-events: none;

-    [style~="--enableAnimation:1;"] & {
+    :global(.animationsEnabled) & {
      transition: opacity .1s;
    }
  }
@ -102,7 +102,7 @@
    font-family: 'bbb-icons' !important;
    display: inline-block;

-    [style~="--enableAnimation:1;"] & {
+    :global(.animationsEnabled) & {
      animation: spin 4s infinite linear;
    }
  }
--- a/bigbluebutton-html5/imports/ui/components/waiting-users/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/waiting-users/styles.scss
@ -84,8 +84,8 @@
  justify-content: space-between;
  border-radius: 5px;
  cursor: pointer;
-  [style~="--enableAnimation:1;"] & {
-    transition: all calc(var(--enableAnimation) * .3s);
+  :global(.animationsEnabled) & {
+    transition: all .3s;
  }

  &:first-child {
--- a/bigbluebutton-html5/imports/ui/stylesheets/variables/general.scss
+++ b/bigbluebutton-html5/imports/ui/stylesheets/variables/general.scss
@ -26,6 +26,4 @@
  --indicator-padding-bottom: 0.7em;

  --user-indicators-offset: -5px;
-
-  --enableAnimation: 1;
 }