README.md

@@ -12,6 +12,11 @@
 
 In-House Player built by MinPluto
 
+<br />
+
+<a href="https://codeberg.org/MinPluto/Zorn/" target="_blank"><img src="https://md.sudovanilla.org/images/badges/sdvn-badges-codeberg.png"/></a>
+<a href="https://registry.sudovanilla.org/-/web/detail/@minpluto/zorn" target="_blank"><img src="https://md.sudovanilla.org/images/badges/sdvn-badges-npmjs.png"/></a>
+<a href="https://www.npmjs.com/package/@minpluto/zorn" target="_blank"><img src="https://md.sudovanilla.org/images/badges/sdvn-badges-packages.png"/></a>
 
 </div>
 
@@ -22,12 +27,7 @@ In-House Player built by MinPluto
 </div>
 
 ## About
-
-Zorn is a web video player built for the [Astro Web Framework](https://astro.build). Features are offered like ambient mode, custom settings and context menu, YouTube support with [Invidious](https://invidious.io/) API, m3u8 for live streams, and to allow a separated audio source. 
-
-Originally built for the YouTube frontend projected called MinPluto Frontend, which has been scrapped due to the war on adblockers from YouTube, which affected every YouTube frontend project heavily. Due to this war, I've lost and gave up on the this frontend project. I didn't want the custom player I was building to go waste, so it's now a dedicated project and MinPluto has been converted into a sub-organization of SudoVanilla. 
-
-Zorn is still under in it's beta stages, but stable enough to be used in production environments. Make sure to set it up correctly by following the [documentations](https://zorn.docs.sudovanilla.org/).
+Zorn is a web video player built for Astro. Originally built for a MinPluto frontend project, that was scrapped. The player offers features such as ambient mode, custom settings menu, YouTube with Invidious API, and the ability to add a separated audio source, along with viewing m3u8 streams are also possible, supporting live streams.
 
 ## Links
 
@@ -41,7 +41,7 @@ General:
  - [Codeberg](https://codeberg.org/MinPluto/Zorn/) (Mirror)
  - [Pub Solar](https://git.pub.solar/MinPluto/Zorn) (Mirror)
 
- > Any other mirrors of the repository that are not listed here are not official and not controlled by SudoVanilla or MinPluto. Report the unofficial mirror to SudoVanilla if you find one. 
+ > Any other mirrors of the repository that are not listed here are not official and not controlled by SudoVanilla or MinPluto.
 
 
  ## License

TODO.md

@@ -25,6 +25,7 @@
  - [ ] Cast Support
  - [ ] 360 Video Support
  - [ ] Compress JavaScript?
+ - [ ] Allow developer to use their own CSS
  - [ ] Add Themes
  - Components for use cases
    - [ ] More Videos (Left/Right Sidebar or Bottom Row, like YouTube during pause-state)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@minpluto/zorn",
-  "version": "0.5.1",
+  "version": "0.5.0",
   "author": "SudoVanilla",
   "displayName": "Zorn",
   "description": "In-House Player built by MinPluto",
@@ -29,6 +29,7 @@
     "playback"
   ],
   "scripts": {
+    "publish": "bun publish --registry https://js.registry.sudovanilla.org/",
     "test": "cd test/ && bun start"
   }
 }

src/Player.astro

@@ -100,6 +100,8 @@ import './Styles/Themes/Default.scss'
         :
         null
     }
+    <!-- Zorn: Big Play Button -->
+    {BigPlayButton ? <button class="big-present-button"><i class="iconoir-play-solid"></i></button> : null}
     <!-- Zorn: Seek -->
     <Seek PlayerName={PlayerName}/>
     <!-- Zorn: Subtitles -->

src/Styles/Themes/Default.scss

@@ -308,7 +308,7 @@
     justify-content: center;
     padding: 32px;
     cursor: pointer;
-    svg::before {
+    i::before {
         width: 64px;
         height: 64px;
     }

test/src/components/HeaderInfo.astro

@@ -1,69 +0,0 @@
----
-const {
-    Title,
-    OriginalSource,
-    DirectSource,
-    OSI,
-    DSI,
-    CreatedBy
-} = Astro.props
----
-
-<div class="header-info">
-    <div class="hi-start">
-        <h2>{Title}</h2>
-        <p>{CreatedBy}</p>
-    </div>
-    <div class="hi-end">
-        <a href={OriginalSource}><img src={OSI}/> Original Source</a>
-        <a href={DirectSource}><img src={DSI}/> Direct Source</a>
-    </div>
-</div>
-
-<style>
-.header-info {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 12px 0px;
-}
-.hi-start * {
-    color: white;
-    margin: 0px;
-}
-.hi-start {
-    display: flex;
-    flex-direction: column;
-    gap: 6px;
-}
-.hi-start p {
-    color: gray;
-}
-.hi-end {
-    display: flex;
-    gap: 12px;
-    align-items: center;
-}
-.hi-end a {
-    color: white;
-    background: #232323;
-    border-radius: 3rem;
-    text-align: left;
-    display: flex;
-    align-items: center;
-    font-size: 16px;
-    text-decoration: none;
-    gap: 12px;
-    padding: 6px 12px;
-    transition: 0.3s filter;
-}
-.hi-end a:hover {
-    filter: brightness(2);
-    transition: 0.3s filter;
-}
-.hi-end a img {
-    width: 32px;
-    height: 32px;
-    object-fit: contain;
-}
-</style>

test/src/components/Info.astro

@@ -1,4 +1,13 @@
+---
+const { Title, Description } = Astro.props
+---
+
 <div class="info">
+    <h2>{Title}</h2>
+    <p>{Description}</p>
+    <hr />
+    <slot />
+    <hr/>
     <center>
         <p style="display: flex; gap: 12px; justify-content: center; color: black;">
             <a href="https://ark.sudovanilla.org/MinPluto/Zorn#installation">Documentation</a>

test/src/layouts/Default.astro

@@ -1,4 +1,11 @@
 ---
+// Properites
+const {
+    Title,
+    Description,
+    Page
+} = Astro.props
+
 // Components
 import Header from '@components/Header.astro'
 import Info from '@components/Info.astro'
@@ -16,7 +23,7 @@ import Switcher from '@components/Switcher.astro'
         <br/>
         <br/>
         <slot/>
-        <Info>
+        <Info Title={Title} Description={Description}>
             <div class="info-section"><slot name="info"></slot></div>
             <div class="code-section"><slot name="code"></slot></div>
         </Info>

test/src/pages/multi.astro

@@ -18,7 +18,7 @@ import Info from '@components/Info.astro'
                 SeekColor="#f28438"
             />
             
-            <Info Title="Ennie and Yoyki: Non-Girly Games" CreatedBy="Created by Daniyar Yambushev">
+            <Info Title="Ennie and Yoyki: Non-Girly Games" Description="Created by Daniyar Yambushev">
                 <p>Source: <a href="https://www.youtube.com/watch?v=MuyJtxzyU3o">YouTube</a></p>
                 <p>This demo pulls from <a href="https://ocean.sudovanilla.org/media/videos/Ennie%20and%20Yoyki/Ennie%20and%20Yoyki%3A%20Non-Girly%20Games.mp4">SudoVanilla Ocean</a>.</p>
             </Info>
@@ -33,7 +33,7 @@ import Info from '@components/Info.astro'
                 AudioAttributes=""
                 PlayerName="TMOTW"
             />
-            <Info Title="The Mark On The Wall" CreatedBy="Created by Anderson Wright">
+            <Info Title="The Mark On The Wall" Description="Created by Anderson Wright">
                 <p>Source: <a href="https://vimeo.com/989082177">https://vimeo.com/989082177</a></p>
                 <p>This demo pulls from: <a href="https://ocean.sudovanilla.org/media/videos/The%20Mark%20On%20The%20Wall/1080.mp4">https://ocean.sudovanilla.org/media/videos/The%20Mark%20On%20The%20Wall/1080.mp4</a></p>
                 <p>This demo also pulls from: <a href="https://ocean.sudovanilla.org/media/videos/The%20Mark%20On%20The%20Wall/audio.mp4">https://ocean.sudovanilla.org/media/videos/The%20Mark%20On%20The%20Wall/audio.mp4</a></p>

test/src/pages/present.astro

@@ -6,7 +6,7 @@ import Default from 'src/layouts/Default.astro'
 import {Presentation} from '@minpluto/zorn'
 ---
 
-<Default Page="/" Title="Presentation" CreatedBy="">
+<Default Page="/" Title="Presentation" Description="">
     <!-- <Zorn
         PlayerName="Apple_imac_colors"
         Title=""