для створення React-додатки тут буде використаний Codesandbox (ви також можете використовувати create-react-app). Ми створимо невеликий додаток, в якому HTML5-елемент video буде відтворюватися тільки в тому випадку, якщо вкладка браузера знаходиться у фокусі або активна, інакше він буде призупинений автоматично. Video використовується, щоб полегшити тестування функцій Програми.
-
почніть зі створення найпростішої частини, тобто компонента video.це буде простий компонент з параметрами Boolean active і String src, що містить URL-адресу для video. Якщо active props істинно, video буде відтворюватися. В іншому випадку воно буде зупинено.
-
Створіть простий react-клас і елемент video з його вихідним кодом, який приймає URL-адресу, передану за допомогою src.тут використовується новий REF API для приєднання посилання до DOM-node video. Налаштуємо video на Автовідтворення, припускаючи, що коли ми запустимо додаток, сторінка буде активна.
- Safari не дозволяє автоматично відтворювати елементи мультимедіа без взаємодії з користувачем. Метод componentDidUpdate дуже зручний при обробці ефектів при зміні властивості компонента. Тому тут буде використаний цей метод для відтворення і призупинення відео на основі поточного значення this.props.active.
-
Створіть функцію утиліти.відмінності в префіксах браузера не завжди зручні у використанні певних API-інтерфейсів, і Page Visibility API один з них. Ми створимо просту функцію утиліти, яка буде обробляти ці відмінності і повертати єдиний API на основі браузера користувача. Створіть та експортуйте цю функцію з pageVisibilityUtils.js в src directory.
- У цій функції будемо використовувати оператор if-else, щоб повернути API-інтерфейс, специфічний для браузера. Видно, що ми додаємо префікс ms для Internet Explorer і префікс webkit для WebKit-браузерів. Ми будемо зберігати потрібний API в hidden і visibilityChange змінних і повертати їх з функції у вигляді простого об'єкта. Нарешті, експортуємо функцію.
-
перейдіть на основний компонент. Ми інкапсулюємо всю логіку відстеження видимості сторінки у використовуваному клас-компоненті React, використовуючи шаблон render Props. Створіть клас-компонент VisibilityManager. Цей компонент буде обробляти додавання і видалення всіх подій на основі Dom listeners.
-
почніть з імпорту раніше створеної допоміжної функції та її виклику для отримання правильних API-інтерфейсів браузера.потім створіть react-компонент і ініціалізуйте його стан з одним єдиним полем isVisible встановленим в true. Це Boolean поле буде відповідати за стан видимості сторінки.
-
у componentDidMount додайте event listener до document для visibilitychange за допомогою методу this.handleVisibilityChange в якості обробника.також додайте event listener для подій focus і blur в document, а також елемента window. Цього разу ми встановимо this.forceVisibilityTrue і this.forceVisibilityFalse як обробники для подій focus і blur.
-
потім створіть метод handleVisibilityChange, який приймає аргумент forceFlag.Аргумент forceFlag буде використовуватися для визначення того, чи викликаний метод через події visibilitychange або подій focus і blur. Це відбувається тому, що методи forceVisibilityTrue і forceVisibilityFalse нічого не роблять, крім виклику методу handleVisibilityChange з істинним і помилковим значенням для forceFlag.
-
всередині методу handleVisibilityChange спочатку перевірте, чи є значення аргументу forceFlag логічним (якщо він викликається з обробника події visibilitychange, то переданий аргумент буде об'єктом SyntheticEvent).
- Якщо це Boolean, перевірте, істинно воно чи помилково. Коли значення істинно, викликаємо метод setVisibility з true або викликаємо метод з false. Метод setVisibility використовує this.setState метод для оновлення значення isVisible в стані компонента.
- якщо forceFlag не Boolean, перевірте значення прихованого атрибута в document і відповідним чином викликаємо метод setVisibility. Це завершує логіку відстеження стану видимості сторінки.
-
зробіть компонент багаторазовим.для цього використовуйте патерн render Props. Тобто замість рендеринга компонента з методу render ми викликаємо this.props.children як функцію з this.state.isVisible.
<літій клас="final_li" ідентифікатор="крок-ІД-09">
<<б клас="whb по"> встановіть реагувати-додаток в покажчик у файлі будинок.JS.імпортуйте два компоненти реагують видимість диспетчері і відео і створіть компонент програми, з'єднавши їх. Ми передаємо функцію як дочірній елемент компонента видимості менеджер, який приймає на вхід видно і передає його компоненту відео на виході. Також URL-адресу-адресу передаємо відео як СРЦ для компонента відео. Ось як застосовується компонент відчутна присутність менеджера на основі RenderProps. В кінці використовуємо ReactDOM метод.render для рендеринга програми на DOM-Node з ідентифікатором "root".
б>
літій>