chore: Updated documentation to clarify the workflo when setting cont…

…rol layers
openplayerjs · Aug 27, 2022 · 1fde38a · 1fde38a
1 parent a5256b4
commit 1fde38a
Showing 1 changed file with 47 additions and 43 deletions.
diff --git a/docs/customize.md b/docs/customize.md
@@ -6,9 +6,10 @@ OpenPlayerJS now offers the ability to move elements into new DOM layers, in an
 
 In the following diagram, you will see a representation of the areas that the player offers (**main** is only for video, though).
 
-The default controls are situated at the left, middle and right layers, so by using CSS3 (specially flexbox) and setting the control items in the new different layers, you can create more complex players.
+The default controls configuration does NOT encapsulate the elements in layers, but it assigns them a class indicating each control item's position (`left`, `middle` and `center`).
 
-![Layers](https://user-images.githubusercontent.com/910829/96354476-24eb9800-10a5-11eb-9ebf-90abc16d6c0d.png)
+The only way the player generates new layers within the controls' container is when the `top` or `bottom` layers are set in the player's configuration, since the assumption is that the markup will be drastically complex as opposed to the default one, and it will need more than the `middle` layer, as described in the following layout's diagram.
+![Layers' diagram](https://user-images.githubusercontent.com/910829/96354476-24eb9800-10a5-11eb-9ebf-90abc16d6c0d.png)
 
 ## Add Control
 
@@ -17,30 +18,33 @@ Do you need to add a new control (or multiple ones) to your player and you are c
 ```javascript
 const player = new OpenPlayerJS('[PLAYER ID]');
 player.addControl({
-  icon:'/path/to/image',
-  id: '[MY CONTROL ID]',
-  title: '[TOOLTIP LABEL]',
-  content: '', // Can override the content generated inside the control
-  // Possible values: 'bottom-left', 'bottom-middle', 'bottom-right',
-  // 'left', 'middle', 'right', 'top-left', 'top-middle', 'top-right',
-  // or `main` to add it in the video area
-  position: 'right',
-  showInAds: false, // or true
-  subitems: [{    // optional list of items to render a menu
-      id: '[ITEM ID]', 
-      label: '[ITEM LABEL]', 
-      title: '[TOOLTIP ITEM]', // optional
-      icon:'/path/to/item-image', // optional
-      click: () => {},
-   }],
-  init: (player) => {}, // Pass an instance of the player for advanced operations
-  click: () => {},
-  mouseenter: () => {},
-  mouseleave: () => {},
-  keydown: () => {},
-  blur: () => {},
-  focus: () => {},
-  destroy: (player) => {}, // Pass an instance of the player for advanced operations
+    icon: '/path/to/image',
+    id: '[MY CONTROL ID]',
+    title: '[TOOLTIP LABEL]',
+    content: '', // Can override the content generated inside the control
+    // Possible values: 'bottom-left', 'bottom-middle', 'bottom-right',
+    // 'left', 'middle', 'right', 'top-left', 'top-middle', 'top-right',
+    // or `main` to add it in the video area
+    position: 'right',
+    showInAds: false, // or true
+    subitems: [
+        {
+            // optional list of items to render a menu
+            id: '[ITEM ID]',
+            label: '[ITEM LABEL]',
+            title: '[TOOLTIP ITEM]', // optional
+            icon: '/path/to/item-image', // optional
+            click: () => {},
+        },
+    ],
+    init: (player) => {}, // Pass an instance of the player for advanced operations
+    click: () => {},
+    mouseenter: () => {},
+    mouseleave: () => {},
+    keydown: () => {},
+    blur: () => {},
+    focus: () => {},
+    destroy: (player) => {}, // Pass an instance of the player for advanced operations
 });
 player.init();
 ```
@@ -51,7 +55,7 @@ One of the most attractive parts of OpenPlayerJS is the ability to adapt other p
 
 In order to do that, the object must have the following template:
 
-```javascript
+````javascript
 /**
  * @param element The HTML5 media tag (video/audio)
  * @param media An object that contains { src: URL, type: MIME TYPE } to match structures
@@ -102,28 +106,28 @@ if (OpenPlayerJS) {
         CustomPlayer
     );
 }
-```
+````
 
 Once the file is ready, we can do something like this (`[PLAYER ID]` is the name we assigned for the custom player):
 
 ```html
 <!DOCTYPE html>
 <html lang="en">
-<body>
-    <video class="op-player__media" id="video" controls playsinline>
-        <source src="https://example-url" type="video/x-[PLAYER ID]">
-    </video>
-    <script src="https://cdn.jsdelivr.net/npm/openplayerjs@latest/dist/openplayer.min.js"></script>
-    <script src="/path/to/custom-player.js"></script>
-    <script>
-        var player = new OpenPlayer('video', {
-            [PLAYER ID]: {
-                // config
-            }
-        });
-        player.init();
-    </script>
-</body>
+    <body>
+        <video class="op-player__media" id="video" controls playsinline>
+            <source src="https://example-url" type="video/x-[PLAYER ID]" />
+        </video>
+        <script src="https://cdn.jsdelivr.net/npm/openplayerjs@latest/dist/openplayer.min.js"></script>
+        <script src="/path/to/custom-player.js"></script>
+        <script>
+            var player = new OpenPlayer('video', {
+                [PLAYER ID]: {
+                    // config
+                }
+            });
+            player.init();
+        </script>
+    </body>
 </html>
 ```