imbhargav5 · imbhargav5 · Dec 25, 2019 · Oct 11, 2019 · Oct 11, 2019 · Oct 12, 2019
diff --git a/packages/fullscreen/.babelrc b/packages/fullscreen/.babelrc
@@ -0,0 +1,3 @@
+{
+  "presets": ["@babel/preset-env", "@babel/preset-react", "babel-preset-minify"]
+}
diff --git a/packages/fullscreen/.eslintrc b/packages/fullscreen/.eslintrc
@@ -0,0 +1,3 @@
+{
+  "extends": ["rooks"]
+}
diff --git a/packages/fullscreen/.npmignore b/packages/fullscreen/.npmignore
@@ -0,0 +1,3 @@
+src
+test
+*.log
diff --git a/packages/fullscreen/README.md b/packages/fullscreen/README.md
@@ -0,0 +1,39 @@
+# @rooks/use-fullscreen
+
+### Use full screen api for making beautiful and emersive experinces.
+
+[![Build Status](https://travis-ci.org/imbhargav5/rooks.svg?branch=master)](https://travis-ci.org/imbhargav5/rooks) ![](https://img.shields.io/npm/v/@rooks/use-fullscreen/latest.svg) ![](https://img.shields.io/npm/l/@rooks/use-fullscreen.svg) ![](https://img.shields.io/bundlephobia/min/@rooks/use-fullscreen.svg) ![](https://img.shields.io/david/imbhargav5/rooks.svg?path=packages%2Ffullscreen)
+
+<a href="https://spectrum.chat/rooks"><img src="https://withspectrum.github.io/badge/badge.svg" alt="Join the community on Spectrum"/></a>
+
+### Installation
+
+```
+npm install --save @rooks/use-fullscreen
+```
+
+### Importing the hook
+
+```javascript
+import useFullscreen from "@rooks/use-fullscreen"
+```
+
+### Usage
+
+```jsx
+function Demo() {
+  const [isEnabled, toggle] = useFullscreen();
+  return (    
+    <img
+      src=""
+      onClick={(e) => {
+        if(isEnabled) {          
+          toggle(e.target)}
+        }
+      } 
+    />
+  )
+}
+
+render(<Demo/>)
+```
diff --git a/packages/fullscreen/index.d.ts b/packages/fullscreen/index.d.ts
@@ -0,0 +1 @@
+export default function useFullscreen(): void;
diff --git a/packages/fullscreen/package.json b/packages/fullscreen/package.json
@@ -0,0 +1,44 @@
+{
+  "main": "lib/index.js",
+  "jsnext:main": "lib/index.esm.js",
+  "module": "lib/index.esm.js",
+  "types": "lib/index.d.ts",
+  "license": "MIT",
+  "description": "A React Hooks package for fullscreen.",
+  "name": "@rooks/use-fullscreen",
+  "homepage": "https://react-hooks.org/hook/use-fullscreen",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/imbhargav5/rooks.git"
+  },
+  "scripts": {
+    "test": "jest",
+    "lint": "eslint src test",
+    "clean": "rimraf lib",
+    "prebuild": "yarn clean",
+    "build": "rollup -c ../../scripts/rollup.config.js",
+    "test:example": "parcel test/index.html",
+    "prepublish": "yarn run build",
+    "pregenerate:types": "rimraf index.d.ts",
+    "generate:types": "tsc"
+  },
+  "keywords": [
+    "use",
+    "react",
+    "hooks",
+    "rooks",
+    "react-hooks.org",
+    "useFullscreen",
+    "fullscreen hook",
+    "fullscreen"
+  ],
+  "peerDependencies": {
+    "react": ">=16.8.0"
+  },
+  "version": "1.0.0",
+  "_id": "@rooks/use-fullscreen@",
+  "readme": "ERROR: No README data found!",
+  "publishConfig": {
+    "access": "public"
+  }
+}
diff --git a/packages/fullscreen/src/index.ts b/packages/fullscreen/src/index.ts
@@ -0,0 +1 @@
+export { useFullscreen as default } from "./useFullscreen";
diff --git a/packages/fullscreen/src/useFullscreen.ts b/packages/fullscreen/src/useFullscreen.ts
@@ -0,0 +1,158 @@
+import { useState } from "react";
+
+type EventCallback = (this: Document, ev: any) => any;
+interface NormalizedFullscreenApi {
+  requestFullscreen: string;
+  exitFullscreen: string;
+  fullscreenElement: string;
+  fullscreenEnabled: string;
+  fullscreenchange: string;
+  fullscreenerror: string;
+}
+
+const getBrowserFunctions = (): NormalizedFullscreenApi => {
+  const fnMap = [
+    [
+      "requestFullscreen",
+      "exitFullscreen",
+      "fullscreenElement",
+      "fullscreenEnabled",
+      "fullscreenchange",
+      "fullscreenerror"
+    ],
+    // New WebKit
+    [
+      "webkitRequestFullscreen",
+      "webkitExitFullscreen",
+      "webkitFullscreenElement",
+      "webkitFullscreenEnabled",
+      "webkitfullscreenchange",
+      "webkitfullscreenerror"
+    ],
+    // Old WebKit
+    [
+      "webkitRequestFullScreen",
+      "webkitCancelFullScreen",
+      "webkitCurrentFullScreenElement",
+      "webkitCancelFullScreen",
+      "webkitfullscreenchange",
+      "webkitfullscreenerror"
+    ],
+    [
+      "mozRequestFullScreen",
+      "mozCancelFullScreen",
+      "mozFullScreenElement",
+      "mozFullScreenEnabled",
+      "mozfullscreenchange",
+      "mozfullscreenerror"
+    ],
+    [
+      "msRequestFullscreen",
+      "msExitFullscreen",
+      "msFullscreenElement",
+      "msFullscreenEnabled",
+      "MSFullscreenChange",
+      "MSFullscreenError"
+    ]
+  ];
+
+  const ret = {} as NormalizedFullscreenApi;
+
+  fnMap.forEach(fnSet => {
+    if (fnSet && fnSet[1] in document) {
+      fnSet.forEach((_fn, i) => {
+        ret[fnMap[0][i]] = fnSet[i];
+      });
+    }
+  });
+  return ret;
+};
+
+type FullscreenApi = [
+  boolean, // isEnabled
+  (element?: HTMLElement) => Promise<unknown>, // toggle
+  (callback: EventCallback) => void, // onchange
+  (callback: EventCallback) => void, // onerror
+  (element?: HTMLElement) => Promise<unknown>, // request
+  () => Promise<unknown>, // exit
+  boolean, // isFullscreen
+  HTMLElement // element
+];
+
+export const useFullscreen = (): FullscreenApi => {
+  const fn = getBrowserFunctions();
+  const [isFullscreen, setIsFullscreen] = useState(
+    Boolean(document[fn.fullscreenElement])
+  );
+  const [element, setElement] = useState(document[fn.fullscreenElement]);
+
+  const eventNameMap = {
+    change: fn.fullscreenchange,
+    error: fn.fullscreenerror
+  };
+
+  const request = (element?: HTMLElement) =>
+    new Promise((resolve, reject) => {
+      const onFullScreenEntered = () => {
+        setIsFullscreen(true);
+        off("change", onFullScreenEntered);
+        resolve();
+      };
+
+      on("change", onFullScreenEntered);
+
+      element = element || document.documentElement;
+      setElement(element);
+
+      Promise.resolve(element[fn.requestFullscreen]()).catch(reject);
+    });
+
+  const on = (event: string, callback: EventCallback) => {
+    const eventName = eventNameMap[event];
+    if (eventName) {
+      document.addEventListener(eventName, callback, false);
+    }
+  };
+  const off = (event: string, callback: EventCallback) => {
+    const eventName = eventNameMap[event];
+    if (eventName) {
+      document.removeEventListener(eventName, callback, false);
+    }
+  };
+  const exit = () =>
+    new Promise((resolve, reject) => {
+      if (!Boolean(document[fn.fullscreenElement])) {
+        resolve();
+        return;
+      }
+
+      const onFullScreenExit = () => {
+        setIsFullscreen(false);
+        off("change", onFullScreenExit);
+        resolve();
+      };
+
+      on("change", onFullScreenExit);
+      setElement(null);
+
+      Promise.resolve(document[fn.exitFullscreen]()).catch(reject);
+    });
+
+  const toggle = (element?: HTMLElement) =>
+    Boolean(document[fn.fullscreenElement]) ? exit() : request(element);
+
+  return [
+    Boolean(document[fn.fullscreenEnabled]),
+    toggle,
+    (callback: EventCallback) => {
+      on("change", callback);
+    }, // onchange
+    (callback: EventCallback) => {
+      on("error", callback);
+    }, // onerror
+    request,
+    exit,
+    isFullscreen,
+    element
+  ];
+};
diff --git a/packages/fullscreen/test/index.spec.js b/packages/fullscreen/test/index.spec.js
@@ -0,0 +1,13 @@
+/**
+ * @jest-environment jsdom
+ */
+import React from "react";
+import useFullscreen from "..";
+
+describe("useFullscreen", () => {
+  it("should be defined", () => {
+    expect(useFullscreen).toBeDefined();
+  });
+});
+
+// figure out tests
-Original file line number
+Diff line change
@@ -0,0 +1,3 @@
+    src
+    test
+    *.log
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { useFullscreen as default } from "./useFullscreen";