diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 00000000..d838da98 --- /dev/null +++ b/.eslintignore @@ -0,0 +1 @@ +examples/ diff --git a/dom/RCTVideo.js b/dom/RCTVideo.js index 32128973..77e9dc88 100644 --- a/dom/RCTVideo.js +++ b/dom/RCTVideo.js @@ -1,11 +1,13 @@ // @flow -import { RCTEvent, RCTView, type RCTBridge } from "react-native-dom"; -import shaka from "shaka-player"; +/* eslint-env browser */ -import resizeModes from "./resizeModes"; -import type { VideoSource } from "./types"; -import RCTVideoEvent from "./RCTVideoEvent"; +import { RCTView, type RCTBridge } from 'react-native-dom'; +import shaka from 'shaka-player'; + +import resizeModes from './resizeModes'; +import type { VideoSource } from './types'; +import RCTVideoEvent from './RCTVideoEvent'; class RCTVideo extends RCTView { playPromise: Promise = Promise.resolve(); @@ -24,7 +26,7 @@ class RCTVideo extends RCTView { constructor(bridge: RCTBridge) { super(bridge); - this.eventDispatcher = bridge.getModuleByName("EventDispatcher"); + this.eventDispatcher = bridge.getModuleByName('EventDispatcher'); shaka.polyfill.installAll(); @@ -35,12 +37,12 @@ class RCTVideo extends RCTView { this.onProgress = this.onProgress.bind(this); this.videoElement = this.initializeVideoElement(); - this.videoElement.addEventListener("ended", this.onEnd); - this.videoElement.addEventListener("loadeddata", this.onLoad); - this.videoElement.addEventListener("canplay", this.onReadyForDisplay); - this.videoElement.addEventListener("loadstart", this.onLoadStart); - this.videoElement.addEventListener("pause", this.onPause); - this.videoElement.addEventListener("play", this.onPlay); + this.videoElement.addEventListener('ended', this.onEnd); + this.videoElement.addEventListener('loadeddata', this.onLoad); + this.videoElement.addEventListener('canplay', this.onReadyForDisplay); + this.videoElement.addEventListener('loadstart', this.onLoadStart); + this.videoElement.addEventListener('pause', this.onPause); + this.videoElement.addEventListener('play', this.onPlay); this.player = new shaka.Player(this.videoElement); this.muted = false; @@ -50,26 +52,26 @@ class RCTVideo extends RCTView { } detachFromView(view: UIView) { - this.videoElement.removeEventListener("ended", this.onEnd); - this.videoElement.removeEventListener("loadeddata", this.onLoad); - this.videoElement.removeEventListener("canplay", this.onReadyForDisplay); - this.videoElement.removeEventListener("loadstart", this.onLoadStart); - this.videoElement.removeEventListener("pause", this.onPause); - this.videoElement.removeEventListener("play", this.onPlay); + this.videoElement.removeEventListener('ended', this.onEnd); + this.videoElement.removeEventListener('loadeddata', this.onLoad); + this.videoElement.removeEventListener('canplay', this.onReadyForDisplay); + this.videoElement.removeEventListener('loadstart', this.onLoadStart); + this.videoElement.removeEventListener('pause', this.onPause); + this.videoElement.removeEventListener('play', this.onPlay); this.stopProgressTimer(); } initializeVideoElement() { - const elem = document.createElement("video"); + const elem = document.createElement('video'); Object.assign(elem.style, { - display: "block", - position: "absolute", - top: "0", - left: "0", - width: "100%", - height: "100%" + display: 'block', + position: 'absolute', + top: '0', + left: '0', + width: '100%', + height: '100%', }); return elem; @@ -81,7 +83,7 @@ class RCTVideo extends RCTView { set controls(value: boolean) { this.videoElement.controls = value; - this.videoElement.style.pointerEvents = value ? "auto" : ""; + this.videoElement.style.pointerEvents = value ? 'auto' : ''; } set id(value: string) { @@ -121,19 +123,19 @@ class RCTVideo extends RCTView { set resizeMode(value: number) { switch (value) { case resizeModes.ScaleNone: { - this.videoElement.style.objectFit = "none"; + this.videoElement.style.objectFit = 'none'; break; } case resizeModes.ScaleToFill: { - this.videoElement.style.objectFit = "fill"; + this.videoElement.style.objectFit = 'fill'; break; } case resizeModes.ScaleAspectFit: { - this.videoElement.style.objectFit = "contain"; + this.videoElement.style.objectFit = 'contain'; break; } case resizeModes.ScaleAspectFill: { - this.videoElement.style.objectFit = "cover"; + this.videoElement.style.objectFit = 'cover'; break; } } @@ -146,16 +148,16 @@ class RCTVideo extends RCTView { set source(value: VideoSource) { let uri = value.uri; - if (uri.startsWith("blob:")) { + if (uri.startsWith('blob:')) { let blob = this.bridge.blobManager.resolveURL(uri); - if (blob.type === "text/xml") { - blob = new Blob([blob], { type: "video/mp4" }); + if (blob.type === 'text/xml') { + blob = new Blob([blob], { type: 'video/mp4' }); } uri = URL.createObjectURL(blob); } if (!shaka.Player.isBrowserSupported()) { // primarily iOS WebKit - this.videoElement.setAttribute("src", uri); + this.videoElement.setAttribute('src', uri); if (!this._paused) { this.requestPlay(); } @@ -181,12 +183,12 @@ class RCTVideo extends RCTView { onEnd = () => { this.onProgress(); - this.sendEvent("topVideoEnd", null); - this.stopProgressTimer(); + this.sendEvent('topVideoEnd', null); + this.stopProgressTimer(); } onError = error => { - console.warn("topVideoError", error); + console.warn('topVideoError', error); } onLoad = () => { @@ -199,23 +201,23 @@ class RCTVideo extends RCTView { naturalSize: { width, height, - orientation: width >= height ? "landscape" : "portrait" - } + orientation: width >= height ? 'landscape' : 'portrait', + }, }; - this.sendEvent("topVideoLoad", payload); + this.sendEvent('topVideoLoad', payload); } onReadyForDisplay = () => { - this.sendEvent("onReadyForDisplay"); + this.sendEvent('onReadyForDisplay'); } onLoadStart = () => { const src = this.videoElement.currentSrc; const payload = { 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 = () => { @@ -229,13 +231,13 @@ class RCTVideo extends RCTView { onProgress = () => { const payload = { currentTime: this.videoElement.currentTime, - seekableDuration: this.videoElement.duration + seekableDuration: this.videoElement.duration, }; - this.sendEvent("topVideoProgress", payload); + this.sendEvent('topVideoProgress', payload); } onRejectedAutoplay = () => { - this.sendEvent("topVideoRejectedAutoplay", null); + this.sendEvent('topVideoRejectedAutoplay', null); } requestPlay() { @@ -273,6 +275,6 @@ class RCTVideo extends RCTView { } } -customElements.define("rct-video", RCTVideo); +customElements.define('rct-video', RCTVideo); export default RCTVideo; diff --git a/dom/RCTVideoEvent.js b/dom/RCTVideoEvent.js index 699a88c4..4a772cf5 100644 --- a/dom/RCTVideoEvent.js +++ b/dom/RCTVideoEvent.js @@ -4,10 +4,10 @@ interface RCTEvent { viewTag: number; eventName: string; coalescingKey: number; - + canCoalesce(): boolean; coalesceWithEvent(event: RCTEvent): RCTEvent; - + moduleDotMethod(): string; arguments(): Array; } @@ -38,14 +38,14 @@ export default class RCTVideoEvent implements RCTEvent { } moduleDotMethod(): string { - return "RCTEventEmitter.receiveEvent"; + return 'RCTEventEmitter.receiveEvent'; } arguments(): Array { const args = [ this.viewTag, this.eventName, - this.data + this.data, ]; return args; } diff --git a/dom/RCTVideoManager.js b/dom/RCTVideoManager.js index 2eb5309b..efeb4ae0 100644 --- a/dom/RCTVideoManager.js +++ b/dom/RCTVideoManager.js @@ -1,14 +1,14 @@ // @flow -import { RCTViewManager } from "react-native-dom"; +import { RCTViewManager } from 'react-native-dom'; -import RCTVideo from "./RCTVideo"; -import resizeModes from "./resizeModes"; +import RCTVideo from './RCTVideo'; +import resizeModes from './resizeModes'; -import type { VideoSource } from "./types"; +import type { VideoSource } from './types'; class RCTVideoManager extends RCTViewManager { - static moduleName = "RCTVideoManager"; + static moduleName = 'RCTVideoManager'; view() { return new RCTVideo(this.bridge); @@ -17,22 +17,22 @@ class RCTVideoManager extends RCTViewManager { describeProps() { return super .describeProps() - .addBooleanProp("controls", this.setControls) - .addStringProp("id", this.setId) - .addBooleanProp("muted", this.setMuted) - .addBooleanProp("paused", this.setPaused) - .addNumberProp("progressUpdateInterval", this.setProgressUpdateInterval) - .addBooleanProp("rate", this.setRate) - .addBooleanProp("repeat", this.setRepeat) - .addNumberProp("resizeMode", this.setResizeMode) - .addNumberProp("seek", this.setSeek) - .addObjectProp("src", this.setSource) - .addNumberProp("volume", this.setVolume) - .addDirectEvent("onVideoEnd") - .addDirectEvent("onVideoError") - .addDirectEvent("onVideoLoad") - .addDirectEvent("onVideoLoadStart") - .addDirectEvent("onVideoProgress"); + .addBooleanProp('controls', this.setControls) + .addStringProp('id', this.setId) + .addBooleanProp('muted', this.setMuted) + .addBooleanProp('paused', this.setPaused) + .addNumberProp('progressUpdateInterval', this.setProgressUpdateInterval) + .addBooleanProp('rate', this.setRate) + .addBooleanProp('repeat', this.setRepeat) + .addNumberProp('resizeMode', this.setResizeMode) + .addNumberProp('seek', this.setSeek) + .addObjectProp('src', this.setSource) + .addNumberProp('volume', this.setVolume) + .addDirectEvent('onVideoEnd') + .addDirectEvent('onVideoError') + .addDirectEvent('onVideoLoad') + .addDirectEvent('onVideoLoadStart') + .addDirectEvent('onVideoProgress'); } dismissFullscreenPlayer() { diff --git a/dom/index.js b/dom/index.js index d68d5bba..e097d5fb 100644 --- a/dom/index.js +++ b/dom/index.js @@ -1,3 +1,3 @@ // @flow -module.exports = require("./RCTVideoManager"); +module.exports = require('./RCTVideoManager'); diff --git a/package.json b/package.json index e145a3b0..29507d8b 100644 --- a/package.json +++ b/package.json @@ -34,6 +34,7 @@ "react-dom": "16.9.0", "react-hot-loader": "^4.12.19", "react-native": "0.61.5", + "react-native-dom": "^0.5.0", "react-native-windows": "^0.61.0-0" }, "dependencies": { @@ -42,7 +43,7 @@ "shaka-player": "^2.5.9" }, "scripts": { - "lint": "yarn eslint *.js" + "lint": "eslint ." }, "files": [ "android-exoplayer",