railbird/react-native-video
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix ESLint setup and errors

Browse Source
This commit is contained in:
Frieder Bluemle 2020-07-09 19:53:34 -07:00
parent 6c86713aff
commit ad98bfa878
No known key found for this signature in database
GPG Key ID: EEAAFC3A01B5FFC6
6 changed files with 78 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.eslintignore Normal file
View File

@ -0,0 +1 @@
examples/

96
dom/RCTVideo.js
View File

@ -1,11 +1,13 @@
// @flow // @flow
import { RCTEvent, RCTView, type RCTBridge } from "react-native-dom"; /* eslint-env browser */
import shaka from "shaka-player";
import resizeModes from "./resizeModes"; import { RCTView, type RCTBridge } from 'react-native-dom';
import type { VideoSource } from "./types"; import shaka from 'shaka-player';
import RCTVideoEvent from "./RCTVideoEvent";
import resizeModes from './resizeModes';
import type { VideoSource } from './types';
import RCTVideoEvent from './RCTVideoEvent';
class RCTVideo extends RCTView { class RCTVideo extends RCTView {
playPromise: Promise<void> = Promise.resolve(); playPromise: Promise<void> = Promise.resolve();
@ -24,7 +26,7 @@ class RCTVideo extends RCTView {
constructor(bridge: RCTBridge) { constructor(bridge: RCTBridge) {
super(bridge); super(bridge);
this.eventDispatcher = bridge.getModuleByName("EventDispatcher"); this.eventDispatcher = bridge.getModuleByName('EventDispatcher');
shaka.polyfill.installAll(); shaka.polyfill.installAll();
@ -35,12 +37,12 @@ class RCTVideo extends RCTView {
this.onProgress = this.onProgress.bind(this); this.onProgress = this.onProgress.bind(this);
this.videoElement = this.initializeVideoElement(); this.videoElement = this.initializeVideoElement();
this.videoElement.addEventListener("ended", this.onEnd); this.videoElement.addEventListener('ended', this.onEnd);
this.videoElement.addEventListener("loadeddata", this.onLoad); this.videoElement.addEventListener('loadeddata', this.onLoad);
this.videoElement.addEventListener("canplay", this.onReadyForDisplay); this.videoElement.addEventListener('canplay', this.onReadyForDisplay);
this.videoElement.addEventListener("loadstart", this.onLoadStart); this.videoElement.addEventListener('loadstart', this.onLoadStart);
this.videoElement.addEventListener("pause", this.onPause); this.videoElement.addEventListener('pause', this.onPause);
this.videoElement.addEventListener("play", this.onPlay); this.videoElement.addEventListener('play', this.onPlay);
this.player = new shaka.Player(this.videoElement); this.player = new shaka.Player(this.videoElement);
this.muted = false; this.muted = false;
@ -50,26 +52,26 @@ class RCTVideo extends RCTView {
} }
detachFromView(view: UIView) { detachFromView(view: UIView) {
this.videoElement.removeEventListener("ended", this.onEnd); this.videoElement.removeEventListener('ended', this.onEnd);
this.videoElement.removeEventListener("loadeddata", this.onLoad); this.videoElement.removeEventListener('loadeddata', this.onLoad);
this.videoElement.removeEventListener("canplay", this.onReadyForDisplay); this.videoElement.removeEventListener('canplay', this.onReadyForDisplay);
this.videoElement.removeEventListener("loadstart", this.onLoadStart); this.videoElement.removeEventListener('loadstart', this.onLoadStart);
this.videoElement.removeEventListener("pause", this.onPause); this.videoElement.removeEventListener('pause', this.onPause);
this.videoElement.removeEventListener("play", this.onPlay); this.videoElement.removeEventListener('play', this.onPlay);
this.stopProgressTimer(); this.stopProgressTimer();
} }
initializeVideoElement() { initializeVideoElement() {
const elem = document.createElement("video"); const elem = document.createElement('video');
Object.assign(elem.style, { Object.assign(elem.style, {
display: "block", display: 'block',
position: "absolute", position: 'absolute',
top: "0", top: '0',
left: "0", left: '0',
width: "100%", width: '100%',
height: "100%" height: '100%',
}); });
return elem; return elem;
@ -81,7 +83,7 @@ class RCTVideo extends RCTView {
set controls(value: boolean) { set controls(value: boolean) {
this.videoElement.controls = value; this.videoElement.controls = value;
this.videoElement.style.pointerEvents = value ? "auto" : ""; this.videoElement.style.pointerEvents = value ? 'auto' : '';
} }
set id(value: string) { set id(value: string) {
@ -121,19 +123,19 @@ class RCTVideo extends RCTView {
set resizeMode(value: number) { set resizeMode(value: number) {
switch (value) { switch (value) {
case resizeModes.ScaleNone: { case resizeModes.ScaleNone: {
this.videoElement.style.objectFit = "none"; this.videoElement.style.objectFit = 'none';
break; break;
} }
case resizeModes.ScaleToFill: { case resizeModes.ScaleToFill: {
this.videoElement.style.objectFit = "fill"; this.videoElement.style.objectFit = 'fill';
break; break;
} }
case resizeModes.ScaleAspectFit: { case resizeModes.ScaleAspectFit: {
this.videoElement.style.objectFit = "contain"; this.videoElement.style.objectFit = 'contain';
break; break;
} }
case resizeModes.ScaleAspectFill: { case resizeModes.ScaleAspectFill: {
this.videoElement.style.objectFit = "cover"; this.videoElement.style.objectFit = 'cover';
break; break;
} }
} }
@ -146,16 +148,16 @@ class RCTVideo extends RCTView {
set source(value: VideoSource) { set source(value: VideoSource) {
let uri = value.uri; let uri = value.uri;
if (uri.startsWith("blob:")) { if (uri.startsWith('blob:')) {
let blob = this.bridge.blobManager.resolveURL(uri); let blob = this.bridge.blobManager.resolveURL(uri);
if (blob.type === "text/xml") { if (blob.type === 'text/xml') {
blob = new Blob([blob], { type: "video/mp4" }); blob = new Blob([blob], { type: 'video/mp4' });
} }
uri = URL.createObjectURL(blob); uri = URL.createObjectURL(blob);
} }
if (!shaka.Player.isBrowserSupported()) { // primarily iOS WebKit if (!shaka.Player.isBrowserSupported()) { // primarily iOS WebKit
this.videoElement.setAttribute("src", uri); this.videoElement.setAttribute('src', uri);
if (!this._paused) { if (!this._paused) {
this.requestPlay(); this.requestPlay();
} }
@ -181,12 +183,12 @@ class RCTVideo extends RCTView {
onEnd = () => { onEnd = () => {
this.onProgress(); this.onProgress();
this.sendEvent("topVideoEnd", null); this.sendEvent('topVideoEnd', null);
this.stopProgressTimer(); this.stopProgressTimer();
} }
onError = error => { onError = error => {
console.warn("topVideoError", error); console.warn('topVideoError', error);
} }
onLoad = () => { onLoad = () => {
@ -199,23 +201,23 @@ class RCTVideo extends RCTView {
naturalSize: { naturalSize: {
width, width,
height, height,
orientation: width >= height ? "landscape" : "portrait" orientation: width >= height ? 'landscape' : 'portrait',
} },
}; };
this.sendEvent("topVideoLoad", payload); this.sendEvent('topVideoLoad', payload);
} }
onReadyForDisplay = () => { onReadyForDisplay = () => {
this.sendEvent("onReadyForDisplay"); this.sendEvent('onReadyForDisplay');
} }
onLoadStart = () => { onLoadStart = () => {
const src = this.videoElement.currentSrc; const src = this.videoElement.currentSrc;
const payload = { const payload = {
isNetwork: !src.match(/^https?:\/\/localhost/), // require is served from localhost isNetwork: !src.match(/^https?:\/\/localhost/), // require is served from localhost
uri: this.videoElement.currentSrc uri: this.videoElement.currentSrc,
}; };
this.sendEvent("topVideoLoadStart", payload); this.sendEvent('topVideoLoadStart', payload);
} }
onPause = () => { onPause = () => {
@ -229,13 +231,13 @@ class RCTVideo extends RCTView {
onProgress = () => { onProgress = () => {
const payload = { const payload = {
currentTime: this.videoElement.currentTime, currentTime: this.videoElement.currentTime,
seekableDuration: this.videoElement.duration seekableDuration: this.videoElement.duration,
}; };
this.sendEvent("topVideoProgress", payload); this.sendEvent('topVideoProgress', payload);
} }
onRejectedAutoplay = () => { onRejectedAutoplay = () => {
this.sendEvent("topVideoRejectedAutoplay", null); this.sendEvent('topVideoRejectedAutoplay', null);
} }
requestPlay() { requestPlay() {
@ -273,6 +275,6 @@ class RCTVideo extends RCTView {
} }
} }
customElements.define("rct-video", RCTVideo); customElements.define('rct-video', RCTVideo);
export default RCTVideo; export default RCTVideo;

8
dom/RCTVideoEvent.js
View File

@ -4,10 +4,10 @@ interface RCTEvent {
viewTag: number; viewTag: number;
eventName: string; eventName: string;
coalescingKey: number; coalescingKey: number;
canCoalesce(): boolean; canCoalesce(): boolean;
coalesceWithEvent(event: RCTEvent): RCTEvent; coalesceWithEvent(event: RCTEvent): RCTEvent;
moduleDotMethod(): string; moduleDotMethod(): string;
arguments(): Array<any>; arguments(): Array<any>;
} }
@ -38,14 +38,14 @@ export default class RCTVideoEvent implements RCTEvent {
} }
moduleDotMethod(): string { moduleDotMethod(): string {
return "RCTEventEmitter.receiveEvent"; return 'RCTEventEmitter.receiveEvent';
} }
arguments(): Array<any> { arguments(): Array<any> {
const args = [ const args = [
this.viewTag, this.viewTag,
this.eventName, this.eventName,
this.data this.data,
]; ];
return args; return args;
} }

42
dom/RCTVideoManager.js
View File

@ -1,14 +1,14 @@
// @flow // @flow
import { RCTViewManager } from "react-native-dom"; import { RCTViewManager } from 'react-native-dom';
import RCTVideo from "./RCTVideo"; import RCTVideo from './RCTVideo';
import resizeModes from "./resizeModes"; import resizeModes from './resizeModes';
import type { VideoSource } from "./types"; import type { VideoSource } from './types';
class RCTVideoManager extends RCTViewManager { class RCTVideoManager extends RCTViewManager {
static moduleName = "RCTVideoManager"; static moduleName = 'RCTVideoManager';
view() { view() {
return new RCTVideo(this.bridge); return new RCTVideo(this.bridge);
@ -17,22 +17,22 @@ class RCTVideoManager extends RCTViewManager {
describeProps() { describeProps() {
return super return super
.describeProps() .describeProps()
.addBooleanProp("controls", this.setControls) .addBooleanProp('controls', this.setControls)
.addStringProp("id", this.setId) .addStringProp('id', this.setId)
.addBooleanProp("muted", this.setMuted) .addBooleanProp('muted', this.setMuted)
.addBooleanProp("paused", this.setPaused) .addBooleanProp('paused', this.setPaused)
.addNumberProp("progressUpdateInterval", this.setProgressUpdateInterval) .addNumberProp('progressUpdateInterval', this.setProgressUpdateInterval)
.addBooleanProp("rate", this.setRate) .addBooleanProp('rate', this.setRate)
.addBooleanProp("repeat", this.setRepeat) .addBooleanProp('repeat', this.setRepeat)
.addNumberProp("resizeMode", this.setResizeMode) .addNumberProp('resizeMode', this.setResizeMode)
.addNumberProp("seek", this.setSeek) .addNumberProp('seek', this.setSeek)
.addObjectProp("src", this.setSource) .addObjectProp('src', this.setSource)
.addNumberProp("volume", this.setVolume) .addNumberProp('volume', this.setVolume)
.addDirectEvent("onVideoEnd") .addDirectEvent('onVideoEnd')
.addDirectEvent("onVideoError") .addDirectEvent('onVideoError')
.addDirectEvent("onVideoLoad") .addDirectEvent('onVideoLoad')
.addDirectEvent("onVideoLoadStart") .addDirectEvent('onVideoLoadStart')
.addDirectEvent("onVideoProgress"); .addDirectEvent('onVideoProgress');
} }
dismissFullscreenPlayer() { dismissFullscreenPlayer() {

2
dom/index.js
View File

@ -1,3 +1,3 @@
// @flow // @flow
module.exports = require("./RCTVideoManager"); module.exports = require('./RCTVideoManager');

3
package.json
View File

@ -34,6 +34,7 @@
"react-dom": "16.9.0", "react-dom": "16.9.0",
"react-hot-loader": "^4.12.19", "react-hot-loader": "^4.12.19",
"react-native": "0.61.5", "react-native": "0.61.5",
"react-native-dom": "^0.5.0",
"react-native-windows": "^0.61.0-0" "react-native-windows": "^0.61.0-0"
}, },
"dependencies": { "dependencies": {
@ -42,7 +43,7 @@
"shaka-player": "^2.5.9" "shaka-player": "^2.5.9"
}, },
"scripts": { "scripts": {
"lint": "yarn eslint *.js" "lint": "eslint ."
}, },
"files": [ "files": [
"android-exoplayer", "android-exoplayer",