sctructuring and adding externals

Author: Lucas Dias

.npmignore

@@ -1,5 +1,6 @@
 src
-demo
+example
 .babelrc
+webpack.config.dev.js
 webpack.config.js
 node_modules

example/index.js

@@ -1,12 +1,12 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import ReactNetflixPlayer from '../src';
+import ReactNetflixPlayer from '../dist/ReactNetflixPlayer.js';
 
 ReactDOM.render(
   <div>
     <ReactNetflixPlayer
       // Vídeo Link - Just data is required
-      src="http://lucasjunior.com.br/teste.mp4"
+      src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.mp4"
       // src={"http://videoinvalid"}
       title="Dragon Ball Z"
       subTitle="Opening"
@@ -15,15 +15,15 @@ ReactDOM.render(
       // Text language of player
       playerLanguage="pt"
       // Action when the button X (close) is clicked
-      backButton={() => {}}
+      backButton={() => { }}
       // The player use the all viewport
       fullPlayer
       autoPlay
       startPosition={0}
       // The info of the next video action
       dataNext={{ title: 'Não existe um próximo vídeo.' }}
       // The action call when the next video is clicked
-      onNextClick={() => {}}
+      onNextClick={() => { }}
       // The list reproduction data, will be render in this order
       reprodutionList={[
         {
@@ -45,9 +45,9 @@ ReactDOM.render(
         };
       }}
       // The function is call when the video finish
-      onEnded={() => {}}
+      onEnded={() => { }}
       // The function is call when the video is playing (One time for frame)
-      onTimeUpdate={() => {}}
+      onTimeUpdate={() => { }}
       // Enable the orverlay when player is paused
       overlayEnabled
       // Enabled the auto clode controlls of player
@@ -57,7 +57,7 @@ ReactDOM.render(
       secundaryColor="#ffffff"
       fontFamily="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif"
 
-      // subtitleMedia="/teste.vtt"
+    // subtitleMedia="/teste.vtt"
     />
   </div>,
   document.getElementById('root'),

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-netflix-player",
-  "version": "1.1.3",
+  "version": "1.1.5",
   "description": "React Video Player Based in Netflix Design",
   "main": "./dist/ReactNetflixPlayer.js",
   "license": "MIT",
@@ -25,10 +25,6 @@
     "printWidth": 120
   },
   "author": "Lucas Junior Dias",
-  "peerDependencies": {
-    "react": "^16.0.0",
-    "react-dom": "^16.13.1"
-  },
   "devDependencies": {
     "babel-cli": "^6.26.0",
     "babel-core": "^6.21.0",
@@ -47,16 +43,19 @@
     "eslint-plugin-react": "^7.20.6",
     "eslint-plugin-react-hooks": "^4.1.0",
     "extract-text-webpack-plugin": "^3.0.2",
-    "path": "^0.12.7",
     "prettier": "^2.0.5",
     "webpack": "^4.43.0",
     "webpack-cli": "^3.2.1",
     "webpack-dev-server": "^3.11.0"
   },
+  "peerDependencies": {
+    "react": "^16 || ^17",
+    "react-dom": "^16 || ^17"
+  },
   "dependencies": {
     "i18next": "^19.7.0",
     "react-i18next": "^11.7.1",
     "react-icons": "^3.9.0",
     "styled-components": "^5.1.1"
   }
-}
+}

src/index.js renamed to src/components/ReactNetflixPlayer/index.js

@@ -31,8 +31,7 @@ import {
   ItemListReproduction,
   ItemListQuality,
 } from './styles';
-
-import translations from './translations';
+import translations from '../../i18n';
 
 i18n.use(initReactI18next).init({
   resources: translations,
@@ -63,7 +62,7 @@ export default function ReactNetflixPlayer({
   onErrorVideo = false,
   onNextClick = false,
   onClickItemListReproduction = false,
-  onCrossClick = () => {},
+  onCrossClick = () => { },
   startPosition = 0,
 
   dataNext = {},

src/styles.js renamed to src/components/ReactNetflixPlayer/styles.js

@@ -19,16 +19,16 @@ const toUpOpacity = keyframes`
 
 export const Container = styled.div`
   text-align: left;
-  
+
   & > * {
     outline: 0;
     box-sizing: border-box;
     margin: 0;
     padding: 0;
     font-family: ${props =>
-      props.fontFamily
-        ? props.fontFamily
-        : "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif"};
+    props.fontFamily
+      ? props.fontFamily
+      : "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif"};
   }
 
   width: 100%;
@@ -51,9 +51,9 @@ export const Container = styled.div`
       text-shadow: #222 0 0 5px;
       background: none;
       font-family: ${props =>
-        props.fontFamily
-          ? props.fontFamily
-          : "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif"};
+    props.fontFamily
+      ? props.fontFamily
+      : "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif"};
     }
   }
 

src/components/index..js

@@ -0,0 +1,3 @@
+import ReactNetflixPlayer from './ReactNetflixPlayer';
+
+export { ReactNetflixPlayer };

src/i18n/index.js

@@ -0,0 +1,9 @@
+import enUs from './locales/en-us';
+import ptBr from './locales/pt-br';
+
+const translations = {
+  pt: ptBr,
+  en: enUs,
+};
+
+export default translations;

src/i18n/locales/en-us.js

@@ -0,0 +1,14 @@
+const enUs = {
+  translation: {
+    youAreWatching: 'Você está assistindo',
+    paused: 'Pausado',
+    tryAccessingOtherQuality: 'Tente acessar por outra qualidade',
+    goBack: 'Voltar à navegação',
+    speeds: 'Velocidades',
+    nextEpisode: 'Próximo Episódio',
+    playlist: 'Lista de Reprodução',
+    playError: 'Ocorreu um erro ao tentar reproduzir este vídeo -_-',
+  },
+};
+
+export default enUs;

src/i18n/locales/pt-br.js

@@ -0,0 +1,14 @@
+const ptBr = {
+  translation: {
+    youAreWatching: "You're watching",
+    paused: 'Paused',
+    tryAccessingOtherQuality: 'Try changing the image quality',
+    goBack: 'Go Back',
+    speeds: 'Speed',
+    nextEpisode: 'Next Episode',
+    playlist: 'Playlist',
+    playError: 'Something went wrong playing this video',
+  },
+};
+
+export default ptBr;