BigBlueButton/bigbluebutton-Github
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix animations not working on iOS 12.3 beta

Browse Source
This commit is contained in:
KDSBrowne 2019-04-11 15:04:10 +00:00
parent caa6b9a85e
commit 83127bcdae
23 changed files with 52 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
bigbluebutton-html5/imports/startup/client/base.jsx
View File

@ -19,10 +19,10 @@ import IntlStartup from './intl';
import Meetings from '../../api/meetings'; import Meetings from '../../api/meetings';
import AnnotationsTextService from '/imports/ui/components/whiteboard/annotations/text/service'; import AnnotationsTextService from '/imports/ui/components/whiteboard/annotations/text/service';
const CHAT_CONFIG = Meteor.settings.public.chat; const CHAT_CONFIG = Meteor.settings.public.chat;
const PUBLIC_GROUP_CHAT_ID = CHAT_CONFIG.public_group_id; const PUBLIC_GROUP_CHAT_ID = CHAT_CONFIG.public_group_id;
const PUBLIC_CHAT_TYPE = CHAT_CONFIG.type_public; const PUBLIC_CHAT_TYPE = CHAT_CONFIG.type_public;
const HTML = document.getElementsByTagName('html')[0];
const propTypes = { const propTypes = {
subscriptionsReady: PropTypes.bool.isRequired, subscriptionsReady: PropTypes.bool.isRequired,
@ -70,6 +70,11 @@ class Base extends Component {
} }
componentDidMount() { componentDidMount() {
const { animations } = this.props;
if (animations) HTML.classList.add('animationsEnabled');
if (!animations) HTML.classList.add('animationsDisabled');
fullscreenChangedEvents.forEach((event) => { fullscreenChangedEvents.forEach((event) => {
document.addEventListener(event, Base.handleFullscreenChange); document.addEventListener(event, Base.handleFullscreenChange);
}); });
@ -118,10 +123,15 @@ class Base extends Component {
this.setMeetingExisted(false); this.setMeetingExisted(false);
} }
const enabled = HTML.classList.contains('animationsEnabled');
const disabled = HTML.classList.contains('animationsDisabled');
if (animations && animations !== prevProps.animations) { 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) { } else if (!animations && animations !== prevProps.animations) {
document.documentElement.style.setProperty('--enableAnimation', 0); if (enabled) HTML.classList.remove('animationsEnabled');
HTML.classList.add('animationsDisabled');
} }
} }

2
bigbluebutton-html5/imports/ui/components/app/styles.scss
View File

@ -72,7 +72,7 @@
opacity: 0; opacity: 0;
pointer-events: none; pointer-events: none;
[style~="--enableAnimation:1;"] & { :global(.animationsEnabled) & {
transition: opacity .3s; transition: opacity .3s;
} }
} }

5
bigbluebutton-html5/imports/ui/components/audio/audio-controls/styles.scss
View File

@ -25,10 +25,11 @@
.glow { .glow {
border-radius: 50%; border-radius: 50%;
[style~="--enableAnimation:1;"] & { :global(.animationsEnabled) & {
animation: pulse 1s infinite ease-in; animation: pulse 1s infinite ease-in;
} }
[style~="--enableAnimation:0;"] & span {
:global(.animationsDisabled) & span {
content: ''; content: '';
outline: none !important; outline: none !important;
background-clip: padding-box; background-clip: padding-box;

2
bigbluebutton-html5/imports/ui/components/audio/audio-modal/styles.scss
View File

@ -147,7 +147,7 @@
width: 0; width: 0;
margin-right: 1.25em; margin-right: 1.25em;
[style~="--enableAnimation:1;"] & { :global(.animationsEnabled) & {
animation: ellipsis steps(4,end) 900ms infinite; animation: ellipsis steps(4,end) 900ms infinite;
} }
} }

2
bigbluebutton-html5/imports/ui/components/audio/audio-test/styles.scss
View File

@ -11,7 +11,7 @@
i { i {
color: var(--color-primary); color: var(--color-primary);
[style~="--enableAnimation:1;"] & { :global(.animationsEnabled) & {
transition: all .2s ease-in-out; transition: all .2s ease-in-out;
} }
} }

6
bigbluebutton-html5/imports/ui/components/audio/permissions-overlay/styles.scss
View File

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

2
bigbluebutton-html5/imports/ui/components/breakout-room/styles.scss
View File

@ -91,7 +91,7 @@
width: 0; width: 0;
margin-right: 1.25em; margin-right: 1.25em;
[style~="--enableAnimation:1;"] & { :global(.animationsEnabled) & {
animation: ellipsis steps(4,end) 900ms infinite; animation: ellipsis steps(4,end) 900ms infinite;
} }
} }

2
bigbluebutton-html5/imports/ui/components/chat/message-form/styles.scss
View File

@ -28,7 +28,7 @@
padding: var(--sm-padding-y) var(--sm-padding-x); padding: var(--sm-padding-y) var(--sm-padding-x);
cursor: pointer; cursor: pointer;
[style~="--enableAnimation:1;"] & { :global(.animationsEnabled) & {
transition: all .3s; transition: all .3s;
} }

4
bigbluebutton-html5/imports/ui/components/external-video-player/modal/styles.scss
View File

@ -134,7 +134,7 @@
border: 1px solid var(--color-gray-lighter); border: 1px solid var(--color-gray-lighter);
border-radius: var(--border-radius); border-radius: var(--border-radius);
[style~="--enableAnimation:1;"] & { :global(.animationsEnabled) & {
transition: box-shadow .2s; transition: box-shadow .2s;
} }
} }
@ -148,7 +148,7 @@
color: red; color: red;
padding: 1em; padding: 1em;
[style~="--enableAnimation:1;"] & { :global(.animationsEnabled) & {
transition: 1s; transition: 1s;
} }
} }

5
bigbluebutton-html5/imports/ui/components/join-handler/component.jsx
View File

@ -7,7 +7,6 @@ import { makeCall } from '/imports/ui/services/api';
import deviceInfo from '/imports/utils/deviceInfo'; import deviceInfo from '/imports/utils/deviceInfo';
import logger from '/imports/startup/client/logger'; import logger from '/imports/startup/client/logger';
import LoadingScreen from '/imports/ui/components/loading-screen/component'; import LoadingScreen from '/imports/ui/components/loading-screen/component';
import Settings from '/imports/ui/services/settings';
const propTypes = { const propTypes = {
children: PropTypes.element.isRequired, children: PropTypes.element.isRequired,
@ -34,10 +33,6 @@ class JoinHandler extends Component {
componentDidMount() { componentDidMount() {
this.fetchToken(); this.fetchToken();
const { animations } = Settings.application;
const enableAnimation = (animations) ? 1 : 0;
document.documentElement.style.setProperty('--enableAnimation', enableAnimation);
} }
changeToJoin(bool) { changeToJoin(bool) {

6
bigbluebutton-html5/imports/ui/components/loading-screen/styles.scss
View File

@ -41,19 +41,19 @@
border-radius: 100%; border-radius: 100%;
display: inline-block; display: inline-block;
[style~="--enableAnimation:1;"] & { :global(.animationsEnabled) & {
animation: sk-bouncedelay 1.4s infinite ease-in-out both; animation: sk-bouncedelay 1.4s infinite ease-in-out both;
} }
} }
.spinner .bounce1 { .spinner .bounce1 {
[style~="--enableAnimation:1;"] & { :global(.animationsEnabled) & {
animation-delay: -0.32s; animation-delay: -0.32s;
} }
} }
.spinner .bounce2 { .spinner .bounce2 {
[style~="--enableAnimation:1;"] & { :global(.animationsEnabled) & {
animation-delay: -0.16s; animation-delay: -0.16s;
} }
} }

2
bigbluebutton-html5/imports/ui/components/presentation/default-content/styles.scss
View File

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

4
bigbluebutton-html5/imports/ui/components/presentation/presentation-uploader/styles.scss
View File

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

4
bigbluebutton-html5/imports/ui/components/presentation/styles.scss
View File

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

2
bigbluebutton-html5/imports/ui/components/toast/styles.scss
View File

@ -172,7 +172,7 @@
font-size: 70%; font-size: 70%;
top: var(--lg-padding-y); top: var(--lg-padding-y);
[style~="--enableAnimation:1;"] & { :global(.animationsEnabled) & {
transition: .3s ease; transition: .3s ease;
} }

8
bigbluebutton-html5/imports/ui/components/user-avatar/styles.scss
View File

@ -24,7 +24,7 @@
text-transform: capitalize; text-transform: capitalize;
font-size: .85rem; font-size: .85rem;
[style~="--enableAnimation:1;"] & { :global(.animationsEnabled) & {
transition: .3s ease-in-out; transition: .3s ease-in-out;
} }
@ -53,7 +53,7 @@
letter-spacing: -.65rem; letter-spacing: -.65rem;
z-index: 1; z-index: 1;
[style~="--enableAnimation:1;"] & { :global(.animationsEnabled) & {
transition: .3s ease-in-out; transition: .3s ease-in-out;
} }
} }
@ -68,12 +68,12 @@
background-color: var(--user-color); background-color: var(--user-color);
border-radius: inherit; border-radius: inherit;
[style~="--enableAnimation:1;"] & { :global(.animationsEnabled) & {
animation: pulse 1s infinite ease-in; animation: pulse 1s infinite ease-in;
} }
&::before { &::before {
[style~="--enableAnimation:0;"] & { :global(.animationsDisabled) & {
content: ''; content: '';
position: absolute; position: absolute;
top: 0; top: 0;

6
bigbluebutton-html5/imports/ui/components/user-list/styles.scss
View File

@ -48,7 +48,7 @@
border-bottom-left-radius: 5px; border-bottom-left-radius: 5px;
cursor: pointer; cursor: pointer;
[style~="--enableAnimation:1;"] & { :global(.animationsEnabled) & {
transition: all .3s; transition: all .3s;
} }
@ -138,7 +138,7 @@
.appearActive { .appearActive {
opacity: 1; opacity: 1;
[style~="--enableAnimation:1;"] & { :global(.animationsEnabled) & {
transition: all 600ms; transition: all 600ms;
} }
} }
@ -150,7 +150,7 @@
.leaveActive { .leaveActive {
opacity: 0; opacity: 0;
[style~="--enableAnimation:1;"] & { :global(.animationsEnabled) & {
transition: all 600ms; transition: all 600ms;
} }
} }

8
bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-list-item/user-dropdown/styles.scss
View File

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

2
bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-list-item/user-icons/styles.scss
View File

@ -7,7 +7,7 @@
justify-content: center; justify-content: center;
margin-left: var(--sm-padding-x) / 2; margin-left: var(--sm-padding-x) / 2;
[style~="--enableAnimation:1;"] & { :global(.animationsEnabled) & {
transition: .3s all; transition: .3s all;
} }
} }

2
bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-list-item/user-name/styles.scss
View File

@ -18,7 +18,7 @@
font-weight: 400; font-weight: 400;
color: var(--color-gray-dark); color: var(--color-gray-dark);
[style~="--enableAnimation:1;"] & { :global(.animationsEnabled) & {
transition: all .3s; transition: all .3s;
} }
} }

4
bigbluebutton-html5/imports/ui/components/video-provider/video-list/styles.scss
View File

@ -57,7 +57,7 @@
opacity: 0; opacity: 0;
pointer-events: none; pointer-events: none;
[style~="--enableAnimation:1;"] & { :global(.animationsEnabled) & {
transition: opacity .1s; transition: opacity .1s;
} }
} }
@ -102,7 +102,7 @@
font-family: 'bbb-icons' !important; font-family: 'bbb-icons' !important;
display: inline-block; display: inline-block;
[style~="--enableAnimation:1;"] & { :global(.animationsEnabled) & {
animation: spin 4s infinite linear; animation: spin 4s infinite linear;
} }
} }

4
bigbluebutton-html5/imports/ui/components/waiting-users/styles.scss
View File

@ -84,8 +84,8 @@
justify-content: space-between; justify-content: space-between;
border-radius: 5px; border-radius: 5px;
cursor: pointer; cursor: pointer;
[style~="--enableAnimation:1;"] & { :global(.animationsEnabled) & {
transition: all calc(var(--enableAnimation) * .3s); transition: all .3s;
} }
&:first-child { &:first-child {

2
bigbluebutton-html5/imports/ui/stylesheets/variables/general.scss
View File

@ -26,6 +26,4 @@
--indicator-padding-bottom: 0.7em; --indicator-padding-bottom: 0.7em;
--user-indicators-offset: -5px; --user-indicators-offset: -5px;
--enableAnimation: 1;
} }