Import Common Cartridge and SCORM packages

composer.json

@@ -25,6 +25,7 @@
     "require-dev": {
         "filament/upgrade": "^4.0",
         "larastan/larastan": "^3.0||^2.9",
+        "laravel/pao": "^1.0",
         "laravel/pint": "^1.14",
         "nunomaduro/collision": "^8.1.1||^7.10.0",
         "orchestra/testbench": "^11.0.0||^10.0.0",

config/filament-lms.php

@@ -154,4 +154,29 @@
     |
     */
     'resources' => [],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Common Cartridge / SCORM import
+    |--------------------------------------------------------------------------
+    */
+    /*
+    |--------------------------------------------------------------------------
+    | Embedded player completion guards
+    |--------------------------------------------------------------------------
+    */
+    'embedded_player_min_session_seconds' => 90,
+    'embedded_player_min_session_seconds_html5' => 300,
+
+    'common_cartridge_import' => [
+        'delete_after_success' => true,
+        'storage_disk' => 'local',
+        'storage_directory' => 'filament-lms/cartridge-imports',
+        'default_import_path' => null,
+        'retain_extracted_packages' => true,
+        'packages_directory' => 'lms-scorm-packages',
+    ],
+
+    // Optional path to Node binary for Articulate slide JSON extraction
+    'node_binary' => null,
 ];

database/migrations/add_embedded_player_to_lms_courses_table.php.stub

@@ -0,0 +1,23 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    public function up(): void
+    {
+        Schema::table('lms_courses', function (Blueprint $table): void {
+            $table->boolean('embedded_player')->default(false)->after('is_private');
+            $table->string('completion_mode', 32)->default('native')->after('embedded_player');
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::table('lms_courses', function (Blueprint $table): void {
+            $table->dropColumn(['embedded_player', 'completion_mode']);
+        });
+    }
+};

database/migrations/add_player_slide_id_to_lms_steps_table.php.stub

@@ -0,0 +1,22 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    public function up(): void
+    {
+        Schema::table('lms_steps', function (Blueprint $table): void {
+            $table->string('player_slide_id')->nullable()->after('text');
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::table('lms_steps', function (Blueprint $table): void {
+            $table->dropColumn('player_slide_id');
+        });
+    }
+};

database/migrations/add_scorm_package_columns_to_lms_documents_table.php.stub

@@ -0,0 +1,24 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    public function up(): void
+    {
+        Schema::table('lms_documents', function (Blueprint $table): void {
+            $table->string('package_disk')->nullable()->after('name');
+            $table->string('package_path')->nullable()->after('package_disk');
+            $table->string('package_launch_path')->nullable()->after('package_path');
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::table('lms_documents', function (Blueprint $table): void {
+            $table->dropColumn(['package_disk', 'package_path', 'package_launch_path']);
+        });
+    }
+};

dist/filament-lms.css

@@ -38,3 +38,134 @@
 .step-material-container iframe[src*=".pdf"] {
     min-height: 60vh;
 }
+
+/* SCORM / HTML5 interactive packages: use full content width */
+.step-material-container--interactive {
+    width: 100%;
+    max-width: 100%;
+    margin: 0;
+    height: clamp(28rem, 80vh, 64rem);
+    min-height: 28rem;
+}
+
+.step-material-container--interactive iframe {
+    display: block;
+    width: 100%;
+    height: 100%;
+    border: 0;
+}
+
+/* Embedded player: hide Filament sidebar and use full width */
+body.lms-embedded-player .fi-sidebar {
+    display: none !important;
+}
+
+body.lms-embedded-player .fi-main-ctn {
+    margin-inline-start: 0 !important;
+}
+
+body.lms-embedded-player .fi-main {
+    max-width: 100%;
+}
+
+/* Knowledge checks: card-style radio options (single-choice Select fields on LMS tests). */
+.lms-test-form-wrapper .lms-knowledge-check-radio-field .fi-fo-radio {
+    counter-reset: lms-mcq-option;
+    display: flex;
+    flex-direction: column;
+    gap: 0.625rem;
+    width: 100%;
+}
+
+.lms-test-form-wrapper .lms-knowledge-check-radio-field .fi-fo-radio-label {
+    counter-increment: lms-mcq-option;
+    position: relative;
+    display: flex;
+    align-items: stretch;
+    gap: 0.75rem;
+    width: 100%;
+    margin: 0;
+    padding: 0.75rem 1rem;
+    border-radius: 0.5rem;
+    border: 1px solid rgb(229 231 235);
+    background-color: rgb(249 250 251);
+    cursor: pointer;
+    transition:
+        background-color 0.15s ease,
+        border-color 0.15s ease,
+        box-shadow 0.15s ease;
+}
+
+.dark .lms-test-form-wrapper .lms-knowledge-check-radio-field .fi-fo-radio-label {
+    border-color: rgb(55 65 81);
+    background-color: rgb(31 41 55 / 0.45);
+}
+
+.lms-test-form-wrapper .lms-knowledge-check-radio-field .fi-fo-radio-label:has(.fi-radio-input:checked) {
+    border-color: rgb(251 146 60);
+    background-color: rgb(255 247 237);
+    box-shadow: 0 0 0 1px rgb(251 146 60 / 0.35);
+}
+
+.dark .lms-test-form-wrapper .lms-knowledge-check-radio-field .fi-fo-radio-label:has(.fi-radio-input:checked) {
+    border-color: rgb(251 146 60);
+    background-color: rgb(124 45 18 / 0.28);
+}
+
+.lms-test-form-wrapper .lms-knowledge-check-radio-field .fi-fo-radio-label:hover {
+    border-color: rgb(209 213 219);
+}
+
+.dark .lms-test-form-wrapper .lms-knowledge-check-radio-field .fi-fo-radio-label:hover {
+    border-color: rgb(75 85 99);
+}
+
+.lms-test-form-wrapper .lms-knowledge-check-radio-field .fi-fo-radio-label-text {
+    display: flex;
+    align-items: center;
+    flex: 1;
+    gap: 0.75rem;
+    min-width: 0;
+}
+
+.lms-test-form-wrapper .lms-knowledge-check-radio-field .fi-fo-radio-label-text::before {
+    content: counter(lms-mcq-option, upper-alpha);
+    flex-shrink: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 2rem;
+    height: 2rem;
+    border-radius: 0.375rem;
+    font-size: 0.875rem;
+    font-weight: 700;
+    background-color: rgb(209 213 219);
+    color: rgb(255 255 255);
+}
+
+.dark .lms-test-form-wrapper .lms-knowledge-check-radio-field .fi-fo-radio-label-text::before {
+    background-color: rgb(75 85 99);
+}
+
+.lms-test-form-wrapper .lms-knowledge-check-radio-field .fi-fo-radio-label:has(.fi-radio-input:checked) .fi-fo-radio-label-text::before {
+    background-color: rgb(249 115 22);
+    color: rgb(255 255 255);
+}
+
+.lms-test-form-wrapper .lms-knowledge-check-radio-field .fi-radio-input {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+}
+
+.lms-test-form-wrapper .lms-knowledge-check-radio-field .fi-fo-radio-label-text p {
+    margin: 0;
+    font-size: 0.9375rem;
+    line-height: 1.45;
+}

resources/css/plugin.css

@@ -38,3 +38,134 @@
 .step-material-container iframe[src*=".pdf"] {
     min-height: 60vh;
 }
+
+/* SCORM / HTML5 interactive packages: use full content width */
+.step-material-container--interactive {
+    width: 100%;
+    max-width: 100%;
+    margin: 0;
+    height: clamp(28rem, 80vh, 64rem);
+    min-height: 28rem;
+}
+
+.step-material-container--interactive iframe {
+    display: block;
+    width: 100%;
+    height: 100%;
+    border: 0;
+}
+
+/* Embedded player: hide Filament sidebar and use full width */
+body.lms-embedded-player .fi-sidebar {
+    display: none !important;
+}
+
+body.lms-embedded-player .fi-main-ctn {
+    margin-inline-start: 0 !important;
+}
+
+body.lms-embedded-player .fi-main {
+    max-width: 100%;
+}
+
+/* Knowledge checks: card-style radio options (single-choice Select fields on LMS tests). */
+.lms-test-form-wrapper .lms-knowledge-check-radio-field .fi-fo-radio {
+    counter-reset: lms-mcq-option;
+    display: flex;
+    flex-direction: column;
+    gap: 0.625rem;
+    width: 100%;
+}
+
+.lms-test-form-wrapper .lms-knowledge-check-radio-field .fi-fo-radio-label {
+    counter-increment: lms-mcq-option;
+    position: relative;
+    display: flex;
+    align-items: stretch;
+    gap: 0.75rem;
+    width: 100%;
+    margin: 0;
+    padding: 0.75rem 1rem;
+    border-radius: 0.5rem;
+    border: 1px solid rgb(229 231 235);
+    background-color: rgb(249 250 251);
+    cursor: pointer;
+    transition:
+        background-color 0.15s ease,
+        border-color 0.15s ease,
+        box-shadow 0.15s ease;
+}
+
+.dark .lms-test-form-wrapper .lms-knowledge-check-radio-field .fi-fo-radio-label {
+    border-color: rgb(55 65 81);
+    background-color: rgb(31 41 55 / 0.45);
+}
+
+.lms-test-form-wrapper .lms-knowledge-check-radio-field .fi-fo-radio-label:has(.fi-radio-input:checked) {
+    border-color: rgb(251 146 60);
+    background-color: rgb(255 247 237);
+    box-shadow: 0 0 0 1px rgb(251 146 60 / 0.35);
+}
+
+.dark .lms-test-form-wrapper .lms-knowledge-check-radio-field .fi-fo-radio-label:has(.fi-radio-input:checked) {
+    border-color: rgb(251 146 60);
+    background-color: rgb(124 45 18 / 0.28);
+}
+
+.lms-test-form-wrapper .lms-knowledge-check-radio-field .fi-fo-radio-label:hover {
+    border-color: rgb(209 213 219);
+}
+
+.dark .lms-test-form-wrapper .lms-knowledge-check-radio-field .fi-fo-radio-label:hover {
+    border-color: rgb(75 85 99);
+}
+
+.lms-test-form-wrapper .lms-knowledge-check-radio-field .fi-fo-radio-label-text {
+    display: flex;
+    align-items: center;
+    flex: 1;
+    gap: 0.75rem;
+    min-width: 0;
+}
+
+.lms-test-form-wrapper .lms-knowledge-check-radio-field .fi-fo-radio-label-text::before {
+    content: counter(lms-mcq-option, upper-alpha);
+    flex-shrink: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 2rem;
+    height: 2rem;
+    border-radius: 0.375rem;
+    font-size: 0.875rem;
+    font-weight: 700;
+    background-color: rgb(209 213 219);
+    color: rgb(255 255 255);
+}
+
+.dark .lms-test-form-wrapper .lms-knowledge-check-radio-field .fi-fo-radio-label-text::before {
+    background-color: rgb(75 85 99);
+}
+
+.lms-test-form-wrapper .lms-knowledge-check-radio-field .fi-fo-radio-label:has(.fi-radio-input:checked) .fi-fo-radio-label-text::before {
+    background-color: rgb(249 115 22);
+    color: rgb(255 255 255);
+}
+
+.lms-test-form-wrapper .lms-knowledge-check-radio-field .fi-radio-input {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+}
+
+.lms-test-form-wrapper .lms-knowledge-check-radio-field .fi-fo-radio-label-text p {
+    margin: 0;
+    font-size: 0.9375rem;
+    line-height: 1.45;
+}

resources/views/components/embedded-player-body-class.blade.php

@@ -0,0 +1,3 @@
+<script>
+    document.body.classList.add('lms-embedded-player');
+</script>