fixing build issues

package.json

@@ -6,15 +6,13 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "preview": "vite preview"
+    "preview": "vite preview --port 8080"
   },
   "dependencies": {
     "@lit-labs/task": "^3.0.2",
     "@thepassle/app-tools": "^0.9.8",
-    "@web/rollup-plugin-polyfills-loader": "^2.0.1",
     "lit": "^2.7.6",
-    "urlpattern-polyfill": "^9.0.0",
-    "wavesurfer.js": "^7.3.2"
+    "urlpattern-polyfill": "^9.0.0"
   },
   "devDependencies": {
     "eslint": "^8.49.0",

src/views/audio.js

@@ -1,6 +1,8 @@
-import { LitElement, css, html } from 'lit'
+import { LitElement, css, html, unsafeCSS } from 'lit'
 import { Task } from '@lit-labs/task'
 
+import MainCSS from '../assets/styles/main.scss?inline'
+
 // components
 import '../components/Header.js'
 import '../components/Footer.js'
@@ -12,14 +14,12 @@ import Router from '../api/Router.js'
 
 class AudioView extends LitElement {
   static properties = {
-    path: { type: String },
     tracks: { type: Array },
     selected: { state: true }
   }
 
   constructor() {
     super()
-    this.path = ''
     this.tracks = []
     this.selected = null
   }
@@ -49,7 +49,7 @@ class AudioView extends LitElement {
       const idx = 1
       this.selected = { ...this.tracks[idx], idx, media: `${Router.route.path}/${this.tracks[idx].media}` }
     },
-    () => [ this.path ]
+    () => []
   )
 
   _skipTrack(direction) {
@@ -85,7 +85,7 @@ class AudioView extends LitElement {
     `
   }
 
-  static styles = css`
+  static styles = [ css`${unsafeCSS(MainCSS)}`, css`
     :host {
       display: flex;
       flex-direction: column;
@@ -138,7 +138,7 @@ class AudioView extends LitElement {
     mm-footer {
       z-index: 1;
     }
-  `
+  ` ]
 }
 
 

src/views/videos.js

@@ -12,10 +12,10 @@ import '../components/HorizontalScroller.js'
 
 import Router from '../api/Router.js'
 
-class VideoPage extends LitElement {
+class VideoView extends LitElement {
   static properties = {
     data: { type: Array },
-    fims: { type: Array, state: true },
+    films: { type: Array, state: true },
     selected: { state: true }
   }
 
@@ -89,6 +89,10 @@ class VideoPage extends LitElement {
       gap: 0.5em;
     }
 
+    mm-hscroller {
+      min-height: 15.625rem;
+    }
+
     aside {
       font-size: 1.5em;
       padding-inline-start: 0.5em;
@@ -105,4 +109,4 @@ class VideoPage extends LitElement {
   ` ]
 }
 
-customElements.define('mm-videos', VideoPage)
+customElements.define('mm-videos', VideoView)