Clock as custom component.

f079c844 · David Trattnig · 10920b11 · f079c844 · f079c844 · f079c844
Commit f079c844 authored 5 years ago by David Trattnig
--- a/contrib/aura-clock/public/index.html
+++ b/contrib/aura-clock/public/index.html
@@ -8,11 +8,16 @@

 	<link rel='icon' type='image/png' href='/favicon.png'>
 	<link rel='stylesheet' href='/global.css'>
-	<link rel='stylesheet' href='/build/bundle.css'>
+	<link rel='stylesheet' href='/build/aura-clock-bundle.css'>

-	<script defer src='/build/bundle.js'></script>
+	<script defer src='/build/aura-clock-bundle.js'></script>
 </head>

 <body style="background-color: black;">
+	<aura-clock 
+		name="Studio Clock" 
+		logo="https://o94.at/themes/custom/radio_orange/logo1.png" 
+		logosize="180px" 
+		api="http://localhost:3333/api/v1/" />
 </body>
 </html>
--- a/contrib/aura-clock/rollup.config.js
+++ b/contrib/aura-clock/rollup.config.js
@@ -22,7 +22,8 @@ export default {
 			// a separate file - better for performance
 			css: css => {
 				css.write('public/build/aura-clock-bundle.css');
-			}
+			},
+			customElement: true
 		}),

 		// If you have external dependencies installed from

--- a/contrib/aura-clock/src/main.js
+++ b/contrib/aura-clock/src/main.js
 import StudioClock from './StudioClock.svelte';
-
-const clock = new StudioClock({
-	target: document.body,
-	props: {
-		stationName: "Radio Orange",
-		stationLogo: "https://o94.at/themes/custom/radio_orange/logo1.png",
-		stationLogoSize: "180px",
-		apiUrl: 'http://localhost:3333/api/v1/'
-	}
-});
-
-export default clock;
\ No newline at end of file
--- a/web/clock.html
+++ b/web/clock.html
@@ -14,5 +14,10 @@
 </head>

 <body style="background-color: black;">
+	<aura-clock 
+		name="Studio Clock" 
+		logo="https://o94.at/themes/custom/radio_orange/logo1.png" 
+		logosize="180px" 
+		api="http://localhost:3333/api/v1/" />
 </body>
 </html>