taleem-player 1.0.1 → 1.0.2

package/dist/css/taleem.css

@@ -344,4 +344,67 @@
 .slide.table thead tr:has(th:empty) {
   display: none;
 }
+  
+
+/* -------------------------------
+   Corner Words Slide (4 Quadrants)
+   ------------------------------- */
+
+   .slide.cornerWordsSlide {
+    position: relative;
+    width: 100%;
+    height: 100vh;
+    padding: 0;
+  }
+  
+  /* base card */
+  .cornerWordsSlide .corner-card {
+    position: absolute;
+    width: 45%;
+    height: 45%;
+  
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 16px;
+  
+    font-size: 4.2rem;
+    font-weight: 700;
+    letter-spacing: 0.02em;
+    text-align: center;
+  }
+  
+  /* emoji / icon */
+  .cornerWordsSlide .corner-card .icon {
+    font-size: 5.2rem;
+    line-height: 1;
+  }
+  
+  /* label text */
+  .cornerWordsSlide .corner-card .label {
+    font-size: 3.6rem;
+    font-weight: 600;
+  }
+  
+  /* quadrants */
+  .cornerWordsSlide .corner-1 {
+    top: 0;
+    left: 0;
+  }
+  
+  .cornerWordsSlide .corner-2 {
+    top: 0;
+    right: 0;
+  }
+  
+  .cornerWordsSlide .corner-3 {
+    bottom: 0;
+    left: 0;
+  }
+  
+  .cornerWordsSlide .corner-4 {
+    bottom: 0;
+    right: 0;
+  }
   

package/dist/taleem-player.esm.js

@@ -591,7 +591,7 @@ function getSlideTemplate(type) {
 }
 
 // src/engines/player/stage.js
-function createStage(mount) {
+function createStage(mount, background = {}) {
   if (!mount) throw new Error("taleem-player: mount is required");
   const root = typeof mount === "string" ? document.querySelector(mount) : mount;
   if (!root) throw new Error("taleem-player: mount element not found");
@@ -601,15 +601,41 @@ function createStage(mount) {
   stage.style.position = "relative";
   stage.style.width = "100%";
   stage.style.height = "100%";
+  stage.style.overflow = "hidden";
+  const bgLayer = document.createElement("div");
+  bgLayer.className = "taleem-player-bg";
+  bgLayer.style.position = "absolute";
+  bgLayer.style.inset = "0";
+  bgLayer.style.zIndex = "0";
+  bgLayer.style.backgroundRepeat = "no-repeat";
+  bgLayer.style.backgroundSize = "cover";
+  bgLayer.style.backgroundPosition = "center";
+  if (background.backgroundColor) {
+    bgLayer.style.backgroundColor = background.backgroundColor;
+  }
+  if (background.backgroundImage) {
+    bgLayer.style.backgroundImage = `url("${background.backgroundImage}")`;
+  }
+  if (typeof background.backgroundImageOpacity === "number" && background.backgroundImageOpacity < 1) {
+    bgLayer.style.opacity = String(background.backgroundImageOpacity);
+  }
+  const slideLayer = document.createElement("div");
+  slideLayer.className = "taleem-player-slides";
+  slideLayer.style.position = "relative";
+  slideLayer.style.zIndex = "1";
+  slideLayer.style.width = "100%";
+  slideLayer.style.height = "100%";
+  stage.appendChild(bgLayer);
+  stage.appendChild(slideLayer);
   root.appendChild(stage);
   function clear() {
-    stage.innerHTML = "";
+    slideLayer.innerHTML = "";
   }
   function destroy() {
     root.innerHTML = "";
   }
   return {
-    el: stage,
+    el: slideLayer,
     clear,
     destroy
   };
@@ -617,7 +643,7 @@ function createStage(mount) {
 
 // src/engines/player/player.js
 function createTaleemPlayer({ mount, deck }) {
-  const stage = createStage(mount);
+  const stage = createStage(mount, deck.background);
   let lastSlide = null;
   let lastRenderedKey = null;
   function getSlideAtTime(deck2, time) {

package/dist/taleem-player.umd.js

@@ -621,7 +621,7 @@ var TaleemPlayer = (() => {
   }
 
   // src/engines/player/stage.js
-  function createStage(mount) {
+  function createStage(mount, background = {}) {
     if (!mount) throw new Error("taleem-player: mount is required");
     const root = typeof mount === "string" ? document.querySelector(mount) : mount;
     if (!root) throw new Error("taleem-player: mount element not found");
@@ -631,15 +631,41 @@ var TaleemPlayer = (() => {
     stage.style.position = "relative";
     stage.style.width = "100%";
     stage.style.height = "100%";
+    stage.style.overflow = "hidden";
+    const bgLayer = document.createElement("div");
+    bgLayer.className = "taleem-player-bg";
+    bgLayer.style.position = "absolute";
+    bgLayer.style.inset = "0";
+    bgLayer.style.zIndex = "0";
+    bgLayer.style.backgroundRepeat = "no-repeat";
+    bgLayer.style.backgroundSize = "cover";
+    bgLayer.style.backgroundPosition = "center";
+    if (background.backgroundColor) {
+      bgLayer.style.backgroundColor = background.backgroundColor;
+    }
+    if (background.backgroundImage) {
+      bgLayer.style.backgroundImage = `url("${background.backgroundImage}")`;
+    }
+    if (typeof background.backgroundImageOpacity === "number" && background.backgroundImageOpacity < 1) {
+      bgLayer.style.opacity = String(background.backgroundImageOpacity);
+    }
+    const slideLayer = document.createElement("div");
+    slideLayer.className = "taleem-player-slides";
+    slideLayer.style.position = "relative";
+    slideLayer.style.zIndex = "1";
+    slideLayer.style.width = "100%";
+    slideLayer.style.height = "100%";
+    stage.appendChild(bgLayer);
+    stage.appendChild(slideLayer);
     root.appendChild(stage);
     function clear() {
-      stage.innerHTML = "";
+      slideLayer.innerHTML = "";
     }
     function destroy() {
       root.innerHTML = "";
     }
     return {
-      el: stage,
+      el: slideLayer,
       clear,
       destroy
     };
@@ -647,7 +673,7 @@ var TaleemPlayer = (() => {
 
   // src/engines/player/player.js
   function createTaleemPlayer({ mount, deck }) {
-    const stage = createStage(mount);
+    const stage = createStage(mount, deck.background);
     let lastSlide = null;
     let lastRenderedKey = null;
     function getSlideAtTime(deck2, time) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "taleem-player",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "type": "module",
   "main": "./dist/taleem-player.umd.js",
   "module": "./dist/taleem-player.esm.js",
@@ -29,7 +29,7 @@
   },
   "dependencies": {
     "taleem-core": "^1.4.3",
-    "taleem-slides": "^0.6.2-rc.6"
+    "taleem-slides": "file:../taleem-slides"
   },
   "devDependencies": {
     "esbuild": "^0.27.2",