chore: upgrade docs site to vime 5

g3r4n · Dec 17, 2020 · 1c7d15a · 1c7d15a
1 parent 6ed5dfa
commit 1c7d15a
Show file tree

Hide file tree

Showing 21 changed files with 11,371 additions and 230 deletions.
diff --git a/.gitignore b/.gitignore
@@ -46,7 +46,6 @@ chrome-profiler-events*.json
 speed-measure-plugin*.json
 !yarn.lock
 
-docs/yarn.lock
 examples/*/yarn.lock
 
 /tmp

diff --git a/docs/docs/welcome/introduction.md b/docs/docs/welcome/introduction.md
@@ -19,9 +19,9 @@ import { Seo } from '../../src/seo';
 Vime is a customizable, extensible, accessible and framework agnostic media player.
 </p>
 
-import BasicPlayer from '../../src/components/players/LoadableBasicPlayer'
+import IntroPlayer from '../../src/components/players/LoadableIntroPlayer'
 
-<BasicPlayer showDefaultUi />
+<IntroPlayer />
 <br />
 
 <div style={{

diff --git a/docs/docusaurus.config.js b/docs/docusaurus.config.js
@@ -10,8 +10,8 @@ module.exports = {
   organizationName: 'vm-js',
   projectName: 'vime',
   stylesheets: [
-    'https://cdn.jsdelivr.net/npm/@vime/core@^4/themes/default.css',
-    'https://cdn.jsdelivr.net/npm/@vime/core@^4/themes/light.css',
+    'https://cdn.jsdelivr.net/npm/@vime/core@^5/themes/default.css',
+    'https://cdn.jsdelivr.net/npm/@vime/core@^5/themes/light.css',
   ],
   themeConfig: {
     announcementBar: {

diff --git a/docs/package.json b/docs/package.json
@@ -16,7 +16,7 @@
     "@docusaurus/preset-classic": "^2.0.0-alpha.62",
     "@loadable/component": "^5.14.1",
     "@mdx-js/react": "^1.6.16",
-    "@vime/react": "^4.0.0",
+    "@vime/react": "^5.0.0",
     "babel-loader": "^8.1.0",
     "clsx": "^1.1.1",
     "prism-react-renderer": "^1.1.1",

diff --git a/docs/src/components/demo/DemoPlayer.js b/docs/src/components/demo/DemoPlayer.js
@@ -1,21 +1,21 @@
 import React, { Fragment } from 'react';
 import { 
-  VimePlayer, 
-  VimeVideo, 
-  VimeDefaultUi, 
-  VimeYoutube, 
-  VimeVimeo,
-  VimeDailymotion,
-  VimeDash,
-  VimeHls,
-  VimeAudio,
+  Player as VmPlayer, 
+  Video as VmVideo, 
+  DefaultUi as VmDefaultUi, 
+  Youtube as VmYoutube, 
+  Vimeo as VmVimeo,
+  Dailymotion as VmDailymotion,
+  Dash as VmDash,
+  Hls as VmHls,
+  Audio as VmAudio,
 } from '@vime/react';
 
 const poster = 'https://media.vimejs.com/poster.png';
 
-const YouTube = () => (<VimeYoutube videoId="DyTCOwB0DVw" />);
-const Vimeo = () => (<VimeVimeo videoId="411652396" />);
-const Dailymotion = () => (<VimeDailymotion videoId="k3b11PemcuTrmWvYe0q" />);
+const YouTube = () => (<VmYoutube videoId="DyTCOwB0DVw" />);
+const Vimeo = () => (<VmVimeo videoId="411652396" />);
+const Dailymotion = () => (<VmDailymotion videoId="k3b11PemcuTrmWvYe0q" />);
 
 const Tracks = () => (
   <Fragment>
@@ -30,30 +30,30 @@ const Tracks = () => (
 );
 
 const Hls = () => (
-  <VimeHls crossOrigin="" poster={poster}>
+  <VmHls crossOrigin="" poster={poster}>
     <source data-src="https://media.vimejs.com/hls/index.m3u8" type="application/x-mpegURL" />
     <Tracks />
-  </VimeHls>  
+  </VmHls>  
 );
 
 const Dash = () => (
-  <VimeDash src="https://media.vimejs.com/mpd/manifest.mpd" poster={poster} />
+  <VmDash src="https://media.vimejs.com/mpd/manifest.mpd" poster={poster} />
 );
 
 const Audio = () => (
-  <VimeAudio crossOrigin="">
+  <VmAudio crossOrigin="">
     <source data-src="https://media.vimejs.com/audio.mp3" type="audio/mp3" />
-  </VimeAudio>
+  </VmAudio>
 );
 
 const Video = () => (
-  <VimeVideo crossOrigin="" poster={poster}>
+  <VmVideo crossOrigin="" poster={poster}>
     <source 
       data-src="https://media.vimejs.com/720p.mp4" 
       type="video/mp4" 
     />
     <Tracks />
-  </VimeVideo> 
+  </VmVideo> 
 );
 
 const ProviderMap = {
@@ -84,16 +84,16 @@ const DemoPlayer = ({
   provider = 'video',
   showDefaultUi = false,
 }) => (
-  <VimePlayer 
+  <VmPlayer 
     key={genKey(provider, showDefaultUi)}
     theme={theme} 
     style={{ '--vm-player-theme': color }} 
     controls={!showDefaultUi}
     noSkeleton
   >
     {ProviderMap[provider]}
-    {showDefaultUi && <VimeDefaultUi />}
-  </VimePlayer>
+    {showDefaultUi && <VmDefaultUi />}
+  </VmPlayer>
 );
 
 export default DemoPlayer;
diff --git a/docs/src/components/players/BasicPlayer.tsx b/docs/src/components/players/BasicPlayer.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
-import { VimePlayer, VimeVideo, VimeDefaultUi } from '@vime/react';
+import { Player, Video, DefaultUi } from '@vime/react';
 
 const BasicPlayer = ({ 
   showDefaultUi = false,
   defaultUiProps = {}
 }) => (
-  <VimePlayer controls={!showDefaultUi}>
-    <VimeVideo crossOrigin="" poster="https://media.vimejs.com/poster.png">
+  <Player controls={!showDefaultUi}>
+    <Video crossOrigin="" poster="https://media.vimejs.com/poster.png">
       <source 
         data-src="https://media.vimejs.com/720p.mp4" 
         type="video/mp4" 
@@ -18,10 +18,10 @@ const BasicPlayer = ({
         srcLang="en" 
         label="English" 
       />
-    </VimeVideo> 
+    </Video> 
 
-    {showDefaultUi && <VimeDefaultUi {...defaultUiProps} />}
-  </VimePlayer>
+    {showDefaultUi && <DefaultUi {...defaultUiProps} />}
+  </Player>
 );
 
 export default BasicPlayer;
diff --git a/docs/src/components/players/ClickPlayer.tsx b/docs/src/components/players/ClickPlayer.tsx
@@ -1,16 +1,16 @@
 import React from 'react';
 import { 
-  VimePlayer, 
-  VimeVideo, 
-  VimeUi, 
-  VimeClickToPlay,
-  VimeSpinner,
+  Player, 
+  Video, 
+  Ui, 
+  ClickToPlay,
+  Spinner,
 } from '@vime/react';
 import { TapSidesToSeek } from './TapSidesToSeek';
 
 const ClickPlayer = () => (
-  <VimePlayer>
-    <VimeVideo crossOrigin="" poster="https://media.vimejs.com/poster.png">
+  <Player>
+    <Video crossOrigin="" poster="https://media.vimejs.com/poster.png">
       <source 
         data-src="https://media.vimejs.com/720p.mp4" 
         type="video/mp4" 
@@ -22,14 +22,14 @@ const ClickPlayer = () => (
         srcLang="en" 
         label="English" 
       />
-    </VimeVideo> 
+    </Video> 
 
-    <VimeUi>
-      <VimeClickToPlay />
-      <VimeSpinner />
+    <Ui>
+      <ClickToPlay />
+      <Spinner />
       <TapSidesToSeek />
-    </VimeUi>
-  </VimePlayer>
+    </Ui>
+  </Player>
 );
 
 export default ClickPlayer;
diff --git a/docs/src/components/players/CustomControlsPlayer.tsx b/docs/src/components/players/CustomControlsPlayer.tsx
@@ -1,19 +1,19 @@
 import React from 'react';
 import { 
-  VimePlayer,
-  VimeVideo, 
-  VimeDefaultUi, 
-  VimeScrim,
-  VimeControls,
-  VimeControlSpacer,
-  VimeMuteControl,
-  VimePlaybackControl,
-  VimeTimeProgress,
+  Player,
+  Video, 
+  DefaultUi, 
+  Scrim,
+  Controls,
+  ControlSpacer,
+  MuteControl,
+  PlaybackControl,
+  TimeProgress,
 } from '@vime/react';
 
 const CustomControlsPlayer = () => (
-  <VimePlayer>
-    <VimeVideo crossOrigin="" poster="https://media.vimejs.com/poster.png">
+  <Player>
+    <Video crossOrigin="" poster="https://media.vimejs.com/poster.png">
       <source 
         data-src="https://media.vimejs.com/720p.mp4" 
         type="video/mp4" 
@@ -25,27 +25,26 @@ const CustomControlsPlayer = () => (
         srcLang="en" 
         label="English" 
       />
-    </VimeVideo> 
+    </Video> 
 
-    <VimeDefaultUi noControls>
-      <VimeScrim />
+    <DefaultUi noControls>
+      <Scrim />
 
-      <VimeControls fullWidth pin="topLeft">
-        <VimeControlSpacer />
-        <VimeMuteControl />
-      </VimeControls>
+      <Controls fullWidth pin="topLeft">
+        <ControlSpacer />
+        <MuteControl />
+      </Controls>
 
-      <VimeControls pin="center">
-        {/* @ts-ignore */}
-        <VimePlaybackControl hideTooltip style={{ '--vm-control-scale': 1.7 }} />
-      </VimeControls>
+      <Controls pin="center">
+        <PlaybackControl hideTooltip style={{ '--vm-control-scale': 1.7 }} />
+      </Controls>
 
-      <VimeControls fullWidth pin="bottomLeft">
-        <VimeControlSpacer />
-        <VimeTimeProgress />
-      </VimeControls>
-    </VimeDefaultUi>
-  </VimePlayer>
+      <Controls fullWidth pin="bottomLeft">
+        <ControlSpacer />
+        <TimeProgress />
+      </Controls>
+    </DefaultUi>
+  </Player>
 );
 
 export default CustomControlsPlayer;
diff --git a/docs/src/components/players/CustomSettingsPlayer.tsx b/docs/src/components/players/CustomSettingsPlayer.tsx
@@ -1,34 +1,34 @@
 import React, { useState } from 'react';
 import { 
-  VimePlayer,
-  VimeVideo, 
-  VimeDefaultUi,
-  VimeSettings,
-  VimeMenuItem,
-  VimeSubmenu,
-  VimeMenuRadio,
-  VimeMenuRadioGroup,
+  Player,
+  Video, 
+  DefaultUi,
+  Settings,
+  MenuItem,
+  Submenu,
+  MenuRadio,
+  MenuRadioGroup,
 } from '@vime/react';
 
 const CustomSettingsPlayer = () => {
   const [value, setValue] = useState('1');
 
-  const onVimeMenuItem1Click = () => {
+  const onMenuItem1Click = () => {
     console.log('Clicked menu item 1');
   };
 
-  const onVimeMenuItem2Click = () => {
+  const onMenuItem2Click = () => {
     console.log('Clicked menu item 2');
   };
 
   const onCheck = (event: Event) => {
-    const radio = event.target as HTMLVimeMenuRadioElement;
+    const radio = event.target as HTMLVmMenuRadioElement;
     setValue(radio.value);
   };
 
   return (
-    <VimePlayer>
-      <VimeVideo crossOrigin="" poster="https://media.vimejs.com/poster.png">
+    <Player>
+      <Video crossOrigin="" poster="https://media.vimejs.com/poster.png">
         <source 
           data-src="https://media.vimejs.com/720p.mp4" 
           type="video/mp4" 
@@ -40,25 +40,25 @@ const CustomSettingsPlayer = () => {
           srcLang="en" 
           label="English" 
         />
-      </VimeVideo> 
+      </Video> 
 
-      <VimeDefaultUi noSettings>
-        <VimeSettings>
-          <VimeMenuItem label="Menu Item 1" badge="BADGE" onClick={onVimeMenuItem1Click} />
-          <VimeMenuItem label="Menu Item 2" hint="Hint" onClick={onVimeMenuItem2Click} />
-          <VimeSubmenu label="VimeSubmenu 1" hint={value}>
-            <VimeMenuRadioGroup value={value} onVCheck={onCheck}>
-              <VimeMenuRadio label="Option 1" value="1" />
-              <VimeMenuRadio label="Option 2" value="2" />
-              <VimeMenuRadio label="Option 3" value="3" />
-            </VimeMenuRadioGroup>
-          </VimeSubmenu>
-          <VimeSubmenu label="VimeSubmenu 2">
+      <DefaultUi noSettings>
+        <Settings>
+          <MenuItem label="Menu Item 1" badge="BADGE" onClick={onMenuItem1Click} />
+          <MenuItem label="Menu Item 2" hint="Hint" onClick={onMenuItem2Click} />
+          <Submenu label="Submenu 1" hint={value}>
+            <MenuRadioGroup value={value} onVmCheck={onCheck}>
+              <MenuRadio label="Option 1" value="1" />
+              <MenuRadio label="Option 2" value="2" />
+              <MenuRadio label="Option 3" value="3" />
+            </MenuRadioGroup>
+          </Submenu>
+          <Submenu label="Submenu 2">
             Random content in here.
-          </VimeSubmenu>
-        </VimeSettings>
-      </VimeDefaultUi>
-    </VimePlayer>
+          </Submenu>
+        </Settings>
+      </DefaultUi>
+    </Player>
   );
 };