From c027879bd7714f5f9a22481e1f0044319ac89698 Mon Sep 17 00:00:00 2001 From: Frieder Bluemle Date: Thu, 9 Jul 2020 19:52:24 -0700 Subject: [PATCH 1/4] Remove duplicate LICENSE --- dom/LICENSE.md | 9 --------- 1 file changed, 9 deletions(-) delete mode 100644 dom/LICENSE.md diff --git a/dom/LICENSE.md b/dom/LICENSE.md deleted file mode 100644 index aa185c82..00000000 --- a/dom/LICENSE.md +++ /dev/null @@ -1,9 +0,0 @@ -MIT License - -Copyright (c) 2018 Vincent Riemer - -Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: - -The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. - -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. From 6c86713aff1b4686f1a7418c6cda33324775ea9d Mon Sep 17 00:00:00 2001 From: Frieder Bluemle Date: Thu, 9 Jul 2020 19:57:34 -0700 Subject: [PATCH 2/4] Fix react-native peer deps --- package.json | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index cb8d146e..e145a3b0 100644 --- a/package.json +++ b/package.json @@ -28,13 +28,12 @@ "url": "git@github.com:react-native-community/react-native-video.git" }, "devDependencies": { - "@react-native-community/eslint-config": "0.0.7", - "babel-eslint": "10.0.3", - "eslint": "6.8.0", - "react": "^16.12.0", - "react-dom": "^16.12.0", + "@react-native-community/eslint-config": "^0.0.5", + "eslint": "^6.5.1", + "react": "16.9.0", + "react-dom": "16.9.0", "react-hot-loader": "^4.12.19", - "react-native": "^0.61.5", + "react-native": "0.61.5", "react-native-windows": "^0.61.0-0" }, "dependencies": { From ad98bfa8784411861ed28514acdf44f408233b15 Mon Sep 17 00:00:00 2001 From: Frieder Bluemle Date: Thu, 9 Jul 2020 19:53:34 -0700 Subject: [PATCH 3/4] Fix ESLint setup and errors --- .eslintignore | 1 + dom/RCTVideo.js | 96 +++++++++++++++++++++--------------------- dom/RCTVideoEvent.js | 8 ++-- dom/RCTVideoManager.js | 42 +++++++++--------- dom/index.js | 2 +- package.json | 3 +- 6 files changed, 78 insertions(+), 74 deletions(-) create mode 100644 .eslintignore 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", From 18f1c0d7605dac5d944e207119c2ee38e2c8018e Mon Sep 17 00:00:00 2001 From: Frieder Bluemle Date: Thu, 9 Jul 2020 20:38:54 -0700 Subject: [PATCH 4/4] Enable basic GitHub Actions CI --- .github/workflows/ci.yml | 10 ++++++++++ README.md | 4 ++++ 2 files changed, 14 insertions(+) create mode 100644 .github/workflows/ci.yml diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml new file mode 100644 index 00000000..efe65552 --- /dev/null +++ b/.github/workflows/ci.yml @@ -0,0 +1,10 @@ +name: ci +on: [push, pull_request] +jobs: + build: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v2 + - uses: actions/setup-node@v1 + - run: yarn --no-lockfile + - run: yarn lint diff --git a/README.md b/README.md index 9c396a2f..04f56375 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,7 @@ ## react-native-video +[![ci][4]][5] + A `