From a96b2d61fe05eacaaad793f2d9e19c3d99708137 Mon Sep 17 00:00:00 2001 From: bob Date: Tue, 14 May 2019 10:03:03 -0400 Subject: added non-working mp4 youtube video streamer --- src/client/views/nodes/PDFBox.tsx | 35 ++++++++-------------------- src/client/views/nodes/VideoBox.tsx | 46 +++++++++++++++++++++++++++++++++++++ 2 files changed, 56 insertions(+), 25 deletions(-) (limited to 'src') diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx index ff8737192..6cbf066ca 100644 --- a/src/client/views/nodes/PDFBox.tsx +++ b/src/client/views/nodes/PDFBox.tsx @@ -53,8 +53,10 @@ export class PDFBox extends DocComponent(PdfDocumen public static LayoutString() { return FieldView.LayoutString(PDFBox); } private _mainDiv = React.createRef(); + private renderHeight = 2400; @observable private _renderAsSvg = true; + @observable private _alt = false; private _reactionDisposer: Opt; @@ -65,8 +67,8 @@ export class PDFBox extends DocComponent(PdfDocumen @observable private _interactive: boolean = false; @observable private _loaded: boolean = false; - @computed private get curPage() { return FieldValue(this.Document.curPage, 1); } - @computed private get thumbnailPage() { return Cast(this.props.Document.thumbnailPage, "number", -1); } + @computed private get curPage() { return NumCast(this.Document.curPage, 1); } + @computed private get thumbnailPage() { return NumCast(this.props.Document.thumbnailPage, -1); } componentDidMount() { this._reactionDisposer = reaction( @@ -162,10 +164,8 @@ export class PDFBox extends DocComponent(PdfDocumen let index: any; this._pageInfo.divs.forEach((obj: any) => { obj.spans.forEach((element: any) => { - if (element === span) { - if (!index) { - index = this._pageInfo.divs.indexOf(obj); - } + if (element === span && !index) { + index = this._pageInfo.divs.indexOf(obj); } }); }); @@ -243,7 +243,6 @@ export class PDFBox extends DocComponent(PdfDocumen } - @action saveThumbnail = () => { this._renderAsSvg = false; @@ -284,20 +283,16 @@ export class PDFBox extends DocComponent(PdfDocumen this.props.Document.nativeHeight = nativeHeight; } } - renderHeight = 2400; @computed get pdfPage() { return ; } @computed get pdfContent() { - let page = this.curPage; - const renderHeight = 2400; let pdfUrl = Cast(this.props.Document[this.props.fieldKey], PdfField); if (!pdfUrl) { return

No pdf url to render

; } - let xf = FieldValue(this.Document.nativeHeight, 0) / renderHeight; let body = NumCast(this.props.Document.nativeHeight) ? this.pdfPage : @@ -307,6 +302,7 @@ export class PDFBox extends DocComponent(PdfDocumen } ; + let xf = NumCast(this.Document.nativeHeight) / this.renderHeight; return
{body} @@ -339,22 +335,11 @@ export class PDFBox extends DocComponent(PdfDocumen } return (null); } - @observable _alt = false; - @action - onKeyDown = (e: React.KeyboardEvent) => { - if (e.key === "Alt") { - this._alt = true; - } - } - @action - onKeyUp = (e: React.KeyboardEvent) => { - if (e.key === "Alt") { - this._alt = false; - } - } + @action onKeyDown = (e: React.KeyboardEvent) => e.key === "Alt" && (this._alt = true); + @action onKeyUp = (e: React.KeyboardEvent) => e.key === "Alt" && (this._alt = false); render() { trace(); - let classname = "pdfBox-cont" + (this.props.isSelected() && !InkingControl.Instance.selectedTool && !this._alt ? "-interactive" : ""); + let classname = "pdfBox-cont"; // + (this.props.isSelected() && !InkingControl.Instance.selectedTool && !this._alt ? "-interactive" : ""); return (
{this.pdfRenderer} diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx index 97c5d8818..740d4cc1b 100644 --- a/src/client/views/nodes/VideoBox.tsx +++ b/src/client/views/nodes/VideoBox.tsx @@ -1,6 +1,7 @@ import React = require("react"); import { observer } from "mobx-react"; import { FieldView, FieldViewProps } from './FieldView'; +import * as rp from "request-promise"; import "./VideoBox.scss"; import { action, computed, trace } from "mobx"; import { DocComponent } from "../DocComponent"; @@ -12,6 +13,8 @@ import { VideoField } from "../../../new_fields/URLField"; import Measure from "react-measure"; import "./VideoBox.scss"; import { Field, FieldResult, Opt } from "../../../new_fields/Doc"; +import { RouteStore } from "../../../server/RouteStore"; +import { DocServer } from "../../DocServer"; type VideoDocument = makeInterface<[typeof positionSchema, typeof pageSchema]>; const VideoDocument = makeInterface(positionSchema, pageSchema); @@ -63,11 +66,54 @@ export class VideoBox extends DocComponent(VideoD ; } + getMp4ForVideo(videoId: string = "JN5beCVArMs") { + return new Promise(async (resolve, reject) => { + const videoInfoRequestConfig = { + headers: { + connection: 'keep-alive', + "user-agent": 'Mozilla/5.0 (Windows NT 10.0; WOW64; rv:43.0) Gecko/20100101 Firefox/46.0', + }, + + } + try { + let responseSchema: any = {}; + const videoInfoResponse = await rp.get(DocServer.prepend(RouteStore.corsProxy + "/" + `https://www.youtube.com/watch?v=${videoId}`), videoInfoRequestConfig) + const dataHtml = videoInfoResponse; + const start = dataHtml.indexOf('ytplayer.config = ') + 18; + const end = dataHtml.indexOf(';ytplayer.load'); + const subString = dataHtml.substring(start, end) + const subJson = JSON.parse(subString); + const stringSub = subJson.args.player_response; + const stringSubJson = JSON.parse(stringSub); + const adaptiveFormats = stringSubJson.streamingData.adaptiveFormats; + const videoDetails = stringSubJson.videoDetails + responseSchema["adaptiveFormats"] = adaptiveFormats; + responseSchema["videoDetails"] = videoDetails; + resolve(responseSchema) + } + catch (err) { + console.log(` + --- Youtube --- + Function: getMp4ForVideo + Error: `, err) + reject(err) + } + }) + } + + render() { let field = Cast(this.Document[this.props.fieldKey], VideoField); if (!field) { return
Loading
; } + + // this.getMp4ForVideo().then((mp4) => { + // console.log(mp4); + // }).catch(e => { + // console.log("") + // }); + // // let content = this.videoContent(field.url.href); return NumCast(this.props.Document.nativeHeight) ? content : -- cgit v1.2.3-70-g09d2