codelabs-react - npm Package Compare versions

Comparing version 1.9.0 to 2.0.0

dist/core.test.js

@@ -9,6 +9,4 @@ "use strict";
 
-var _document = require("../stories/document-1607876232180.json");
+var _document = _interopRequireDefault(require("../stories/document-1607876232180.json"));
 
-var _document1607876232180Inline = require("../stories/document-1607876232180-inline.json");
-
 var _extract = _interopRequireDefault(require("./extract"));
@@ -26,3 +24,3 @@
 test("Extract parses the document", function () {
-  var tree = _extract["default"].parse(_document.body.content, _document1607876232180Inline.inlineObjects);
+  var tree = _extract["default"].parse(_document["default"]);
 
@@ -29,0 +27,0 @@ expect(tree).toMatchSnapshot();

dist/extract.js

@@ -25,3 +25,5 @@ "use strict";
 
-function parse(content, images) {
+function parse(response) {
+  var content = response.body.content;
+  var inlineObjects = response.inlineObjects;
   var title = extractTitle(content);
@@ -33,3 +35,3 @@ var headings = extractHeadings(content);
       if (node.paragraph) {
-        return parseParagraph(node.paragraph, images);
+        return parseParagraph(node.paragraph, inlineObjects);
       } else if (node.table) {
@@ -49,3 +51,4 @@ return parseTable(node.table);
 
-function parseParagraph(paragraph, images) {
+function parseParagraph(paragraph, inlineObjects) {
+  var YouTubeBase = "youtube.com/watch?v=";
   return _objectSpread(_objectSpread({}, getParagraphDetails(paragraph)), {}, {
@@ -57,10 +60,18 @@ content: paragraph.elements.map(function (element) {
       if (element.inlineObjectElement) {
-        var _inlineObject$inlineO, _inlineObject$inlineO2, _inlineObject$inlineO3;
+        var _inlineObject$inlineO, _inlineObject$inlineO2, _inlineObject$inlineO3, _inlineObject$inlineO4, _inlineObject$inlineO5, _inlineObject$inlineO6;
 
         var inlineObjectId = element.inlineObjectElement.inlineObjectId;
-        var inlineObject = images[inlineObjectId];
+        var inlineObject = inlineObjects[inlineObjectId];
         if (!inlineObject) return null;
+
+        if ((_inlineObject$inlineO = inlineObject.inlineObjectProperties) !== null && _inlineObject$inlineO !== void 0 && (_inlineObject$inlineO2 = _inlineObject$inlineO.embeddedObject) !== null && _inlineObject$inlineO2 !== void 0 && (_inlineObject$inlineO3 = _inlineObject$inlineO2.description) !== null && _inlineObject$inlineO3 !== void 0 && _inlineObject$inlineO3.includes(YouTubeBase)) {
+          return {
+            type: "youtube",
+            v: inlineObject.inlineObjectProperties.embeddedObject.description.split(YouTubeBase)[1]
+          };
+        }
+
         return {
           type: "img",
-          src: (_inlineObject$inlineO = inlineObject.inlineObjectProperties) === null || _inlineObject$inlineO === void 0 ? void 0 : (_inlineObject$inlineO2 = _inlineObject$inlineO.embeddedObject) === null || _inlineObject$inlineO2 === void 0 ? void 0 : (_inlineObject$inlineO3 = _inlineObject$inlineO2.imageProperties) === null || _inlineObject$inlineO3 === void 0 ? void 0 : _inlineObject$inlineO3.contentUri
+          src: (_inlineObject$inlineO4 = inlineObject.inlineObjectProperties) === null || _inlineObject$inlineO4 === void 0 ? void 0 : (_inlineObject$inlineO5 = _inlineObject$inlineO4.embeddedObject) === null || _inlineObject$inlineO5 === void 0 ? void 0 : (_inlineObject$inlineO6 = _inlineObject$inlineO5.imageProperties) === null || _inlineObject$inlineO6 === void 0 ? void 0 : _inlineObject$inlineO6.contentUri
         };
@@ -67,0 +78,0 @@ } // TODO(): add horizontal rule support

dist/index.js

@@ -194,2 +194,22 @@ "use strict";
 
+    if (element.type === "youtube") {
+      return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
+        style: {
+          position: "relative",
+          paddingTop: "56.25%"
+        }
+      }, /*#__PURE__*/_react["default"].createElement("iframe", {
+        src: "https://www.youtube.com/embed/".concat(element.v),
+        frameborder: "0",
+        allowfullscreen: true,
+        style: {
+          position: "absolute",
+          top: 0,
+          left: 0,
+          width: "100%",
+          height: "100%"
+        }
+      })));
+    }
+
     return /*#__PURE__*/_react["default"].createElement("span", {
@@ -196,0 +216,0 @@ style: {

package.json

 {
   "name": "codelabs-react",
-  "version": "1.9.0",
+  "version": "2.0.0",
   "description": "",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

README.md

@@ -22,8 +22,5 @@ # codelabs-react
 <Codelabs
-  // required, response from the google docs api
+  // required, full API response from https://docs.googleapis.com/v1/documents/{documentId}
+  // has a shape like: {title, body : {content}, inlineObjects}
   content={content}
-  // optional, response from the google docs api
-  // GET https://docs.googleapis.com/v1/documents/{documentId}?fields=inlineObjects
-  // needed, if you want images to be rendered
-  images={images}
   // optional, if your app needs to know about a page change
@@ -30,0 +27,0 @@ onPageChange={({ nextPage }) => {}}

src/core.test.js

@@ -11,4 +11,3 @@ import React from "react";
 
-import { body } from "../stories/document-1607876232180.json";
-import { inlineObjects } from "../stories/document-1607876232180-inline.json";
+import response from "../stories/document-1607876232180.json";
 import Extract from "./extract";
@@ -21,3 +20,3 @@
 test("Extract parses the document", () => {
-  const tree = Extract.parse(body.content, inlineObjects);
+  const tree = Extract.parse(response);
   expect(tree).toMatchSnapshot();
@@ -24,0 +23,0 @@ });

src/extract.js

 const infoColor = { red: 0.8509804, green: 0.91764706, blue: 0.827451 };
 const warningColor = { red: 0.9882353, green: 0.8980392, blue: 0.8039216 };
 
-function parse(content, images) {
+function parse(response) {
+  const { content } = response.body;
+  const { inlineObjects } = response;
   const title = extractTitle(content);
@@ -13,3 +15,3 @@ const headings = extractHeadings(content);
       if (node.paragraph) {
-        return parseParagraph(node.paragraph, images);
+        return parseParagraph(node.paragraph, inlineObjects);
       } else if (node.table) {
@@ -30,3 +32,4 @@ return parseTable(node.table);
 
-function parseParagraph(paragraph, images) {
+function parseParagraph(paragraph, inlineObjects) {
+  const YouTubeBase = "youtube.com/watch?v=";
   return {
@@ -38,5 +41,18 @@ ...getParagraphDetails(paragraph),
         const { inlineObjectId } = element.inlineObjectElement;
-        const inlineObject = images[inlineObjectId];
+        const inlineObject = inlineObjects[inlineObjectId];
         if (!inlineObject) return null;
 
+        if (
+          inlineObject.inlineObjectProperties?.embeddedObject?.description?.includes(
+            YouTubeBase
+          )
+        ) {
+          return {
+            type: "youtube",
+            v: inlineObject.inlineObjectProperties.embeddedObject.description.split(
+              YouTubeBase
+            )[1],
+          };
+        }
+
         return {
@@ -43,0 +59,0 @@ type: "img",

src/index.js

@@ -171,2 +171,24 @@ import React, { useState } from "react";
 
+        if (element.type === "youtube") {
+          return (
+            <div>
+              <div style={{ position: "relative", paddingTop: "56.25%" }}>
+                {/* https://jameshfisher.com/2017/08/30/how-do-i-make-a-full-width-iframe/ */}
+                <iframe
+                  src={`https://www.youtube.com/embed/${element.v}`}
+                  frameborder="0"
+                  allowfullscreen
+                  style={{
+                    position: "absolute",
+                    top: 0,
+                    left: 0,
+                    width: "100%",
+                    height: "100%",
+                  }}
+                />
+              </div>
+            </div>
+          );
+        }
+
         return (
@@ -173,0 +195,0 @@ <span

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

325901

increased by0.64%

Lines of code

1467

increased by4.49%

Worsened metrics

Number of lines in readme file

74

decreased by-3.9%

No dependency changes