mirax-player - npm Package Compare versions

Comparing version 6.1.1 to 6.1.2

dist/MiraxPlayer.js

@@ -6,3 +6,4 @@ import './miraxplayerUI.js';
 
-    // Check if the control elements have already been created
+  
+      // Check if the control elements have already been created
 
@@ -2181,3 +2182,3 @@ const existingControls = videoClip.parentNode.querySelector('.mirax-theme');
 
-  min-width:350px;
+  min-width:300px;
 
@@ -2222,3 +2223,3 @@ max-width: ${dynamicWidth + 400}px;
   max-width: 95%;
-  min-width: 350px;
+  min-width: 300px;
   height: 30px;
@@ -2739,80 +2740,55 @@ background-color: rgba(0, 0, 0, 0.1);
       }
-  
-    /* # Mirax Player core license
-  
-    
-  
-    Mirax Player is released under the MIT license:
-  
-    
-  
-    MIT License
-  
-    
-  
-    Copyright (c) [2023-present] [Demjhon Silver]
-  
-    
-  
-    Permission is hereby granted, free of charge, to any person obtaining a copy
-  
-    of this software and associated documentation files (the "Software"), to deal
-  
-    in the Software without restriction, including without limitation the rights
-  
-    to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-  
-    copies of the Software, and to permit persons to whom the Software is
-  
-    furnished to do so, subject to the following conditions:
-  
-    
-  
-    The above copyright notice and this permission notice shall be included in all
-  
-    copies or substantial portions of the Software.
-  
-    
-  
-    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-  
-    IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-  
-    FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-  
-    AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-  
-    LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-  
-    OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-  
-    SOFTWARE. */
-  
 
+
+
   /* # Mirax Player core license
+
   
+
   Mirax Player is released under the MIT license:
+
   
+
   MIT License
+
   
+
   Copyright (c) [2023-present] [Demjhon Silver]
+
   
+
   Permission is hereby granted, free of charge, to any person obtaining a copy
+
   of this software and associated documentation files (the "Software"), to deal
+
   in the Software without restriction, including without limitation the rights
+
   to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+
   copies of the Software, and to permit persons to whom the Software is
+
   furnished to do so, subject to the following conditions:
+
   
+
   The above copyright notice and this permission notice shall be included in all
+
   copies or substantial portions of the Software.
+
   
+
   THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+
   IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+
   FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+
   AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+
   LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+
   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+
   SOFTWARE. */
 
   export default miraxPlayer;

dist/miraxplayerUI.js

@@ -369,3 +369,3 @@
 const mediaQuery = `
-  @media (max-width: 740px) {
+  @media (max-width: 840px) {
 
@@ -381,3 +381,3 @@
       max-width: 95%;
-      min-width: 350px;
+      min-width: 300px;
       height: 30px;
@@ -399,6 +399,19 @@ background-color: rgba(0, 0, 0, 0.7);
     
+    .player-selector {
+      margin: auto 0 !important;
+      margin-top:20px !important;
+      width:auto;
+      max-width: 95.90% !important;
+      margin-left:10px !important;
 
 
+     }
 
+     .mirax-player {
+      margin-right:-10px !important;
 
+
+     }
+
+
   }
@@ -416,3 +429,3 @@ `;
 const mediaQuery2 = `
-  @media (max-width: 540px) {
+  @media (max-width: 690px) {
 
@@ -429,5 +442,60 @@
 
+    /* Hide the control div by default */
+    .mirax-theme {
+      opacity: 0; /* Start with 0 opacity */
+      transition: opacity 0.3s; /* Use opacity for a smooth transition */
+      position: absolute;
+      bottom: 20px;
+      width: 100%;
+      max-width: 95%;
+      min-width: 300px;
+      height: 30px;
+      background-color: rgba(0, 0, 0, 0.7);
+      color: #fff;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      left: 50%; /* Center horizontally */
+      transform: translateX(-50%); /* Adjust to perfectly center */
+    }
+    
+    /* Show the control div when hovering over the video or itself */
+    .mirax-player:hover + .mirax-theme,
+    .mirax-theme:hover {
+      opacity: 1; /* Change opacity to 1 on hover to make it visible */
+    }
+    
+    .player-selector {
+      margin: auto 0 !important;
+      margin-top:15px !important;
+      width:auto;
+      max-width: 94.90% !important;
+      margin-left:10px !important;
 
+     }
+
+     .mirax-player {
+      
+      margin-right:-10px !important;
+
+     }
+
+     .play-button {
+
+      margin-left:0px;
+
+    }
     
+  
+    .backward-button {
+      left:40%;
 
+    }
+
+    .forward-button {
+      left: 59%;
+
+    }
+
+
   }
@@ -437,1 +505,129 @@ `;
 miraxStyleMediaQuery2.appendChild(document.createTextNode(mediaQuery2));
+
+
+
+const  miraxStyleMediaQuery3 = document.createElement('style');
+document.head.appendChild(miraxStyleMediaQuery3);
+
+// Define the media query and its associated CSS rules
+const mediaQuery3 = `
+  @media (max-width: 500px) {
+
+
+    .video-text, .input-text {
+      background-size: 50px 50px;
+      width:100%;
+      max-width:240px;
+      min-height:110px;
+      height: auto;
+      max-height:100px;
+    }
+
+    /* Hide the control div by default */
+    .mirax-theme {
+      opacity: 0; /* Start with 0 opacity */
+      transition: opacity 0.3s; /* Use opacity for a smooth transition */
+      position: absolute;
+      bottom: 20px;
+      width: 90%;
+      max-width: 90%;
+      min-width: 250px;
+      height: 30px;
+      background-color: rgba(0, 0, 0, 0.7);
+      color: #fff;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      left: 50%; /* Center horizontally */
+      transform: translateX(-50%); /* Adjust to perfectly center */
+    }
+    
+    /* Show the control div when hovering over the video or itself */
+    .mirax-player:hover + .mirax-theme,
+    .mirax-theme:hover {
+      opacity: 1; /* Change opacity to 1 on hover to make it visible */
+    }
+    
+    .player-selector {
+      margin: auto 0 !important;
+      margin-top:10px !important;
+      width:auto;
+      max-width: 94.90% !important;
+      margin-left:10px !important;
+
+     }
+
+     .mirax-player {
+      
+      margin-right: 5px !important;
+
+     }
+   
+
+     .play-button {
+
+      margin-left:0px;
+
+    }
+    
+  
+    .backward-button {
+      left:40%;
+
+    }
+
+    .forward-button {
+      left: 59%;
+
+    }
+
+
+
+  }
+`;
+
+miraxStyleMediaQuery3.appendChild(document.createTextNode(mediaQuery3));
+
+
+
+
+const  miraxStyleMediaQuery4 = document.createElement('style');
+document.head.appendChild(miraxStyleMediaQuery4);
+
+// Define the media query and its associated CSS rules
+const mediaQuery4 = `
+  @media (max-width: 360px) {
+
+    /* Hide the control div by default */
+    .mirax-theme {
+      opacity: 0; /* Start with 0 opacity */
+      transition: opacity 0.3s; /* Use opacity for a smooth transition */
+      position: absolute;
+      bottom: 20px;
+      width: 90%;
+      max-width: 90%;
+      min-width: 250px;
+      height: 30px;
+      background-color: rgba(0, 0, 0, 0.7);
+      color: #fff;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      left: 50%; /* Center horizontally */
+      transform: translateX(-50%); /* Adjust to perfectly center */
+    }
+    
+    /* Show the control div when hovering over the video or itself */
+    .mirax-player:hover + .mirax-theme,
+    .mirax-theme:hover {
+      opacity: 1; /* Change opacity to 1 on hover to make it visible */
+    }
+
+
+
+
+  }
+`;
+
+miraxStyleMediaQuery4.appendChild(document.createTextNode(mediaQuery4));
+

package.json

 {
   "name": "mirax-player",
-  "version": "6.1.1",
+  "version": "6.1.2",
   "description": "Mirax Player is a free video player for React, Vue, Angular, and Svelte that can embed videos from platforms like Facebook, TikTok, YouTube/Shorts, Twitter, Vimeo and Dailymotion.",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -62,3 +62,3 @@ <p align="center">
 ## Release-notes
-Version 6.1.1
+Version 6.1.2
 
@@ -79,2 +79,6 @@ Major Changes:
 
+ v6.1.2
+
+- Margin added to the Mirax video player for responsive dimensions.
+
  v6.1.1
@@ -81,0 +85,0 @@

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

114333

increased by2.93%

Lines of code

1724

increased by7.62%

Number of lines in readme file

531

increased by0.76%

No dependency changes