Giter VIP home page Giter VIP logo

common-cartridge-viewer's Introduction

Common Cartridge Viewer

View Common Cartridges in the browser. Methods:

  • Load a CORS-enabled remote .imscc or .zip cartridge
  • Load a CORS-enabled exracted cartridge by pointing to its imsmanifest.xml
  • Drop and drop a cartridge into the viewer

Demo

https://common-cartridge-viewer.netlify.com

Quick start

git clone https://github.com/instructure/common-cartridge-viewer.git
cd common-cartridge-viewer
export NODE_OPTIONS=--openssl-legacy-provider
npm ci
npm run build # populates locale data
npm start

Quick start with docker compose

docker compose build && docker compose up -d

Usage examples

Load an extracted cartridge

<iframe
  sandbox="allow-scripts allow-same-origin"
  src="https://common-cartridge-viewer.netlify.com/?manifest=https://common-cartridge-viewer.netlify.com/test-cartridges/course-1/imsmanifest.xml"
></iframe>

Load a compressed cartridge

<iframe
  sandbox="allow-scripts allow-same-origin"
  src="https://common-cartridge-viewer.netlify.com/?cartridge=https://s3.amazonaws.com/public-imscc/facc0607309246638c298c6a1b01abcf.imscc"
></iframe>

common-cartridge-viewer's People

Contributors

aaronshaf avatar adammate96 avatar akozma89 avatar cguanzon avatar dependabot[bot] avatar dnehring avatar eschiebel avatar fmarcso avatar jor3l avatar jozomby avatar judikdavid avatar mauriciozaffari avatar mmagyar avatar petertircsi avatar pjata avatar ptircsiinst avatar rodohanna avatar subpardaemon avatar woodie avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

common-cartridge-viewer's Issues

CM-556 Hyperlinks to other course content and course files in RCE descriptions do not work as expected

video:
https://monosnap.com/file/ZbMkXLOuNCPRZuceu9i437dwAJHHOP

to see issue:

https://common-cartridge-viewer-tmp.netlify.com/?src=https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fcartridges-for-commons-preview%2Fcaleblorcruxcourse-export.imscc#/resources/i938a4003ac8cf675610a8a815b495025
click on the Resume hyper link. it feels like it will not lead to the assignment (another bug does not show assignment preview but this looks like a different bug because the URL id is on the rce link is different from its link from the module list - see video ) (BAD)
click on Resume-help.ppt
it sends you to home page of app instead of previewing the file (BAD)

CM-549 Regular assignments are not recognized by the viewer

video: https://monosnap.com/file/97ENm30vyzF3ahEABQ702tl5IhmdJ3

to see the issue:

https://common-cartridge-viewer-tmp.netlify.com/?src=https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fcartridges-for-commons-preview%2Fcaleblorcruxcourse-export.imscc#/
notice all the ones that say "(unidentified)" those are assignments (BAD)
click on an assignment, notice it does not preview
EXPECTED:

regular assignments should have its own left nav item "Assignments"
assignments should be identifiable
assignments should be previewable

Unable to build after yarn command

The command yarn run build gave unexpected behavior on both Mac OSX Ventura, and Linux PopOs 22.04 LTS.

Creating an optimized production build...
Failed to compile.

./src/index.js
Cannot find module: 'babel-polyfill'. Make sure this package is installed.

You can install this package by running: yarn add babel-polyfill.

Next action: execute yarn add babel-polyfill
success

Next action, run again "yarn run build" but faced another error

npm run compile && react-scripts build

> [email protected] compile
> lingui compile

Compiling message catalogs…
Done!
Creating an optimized production build...
Failed to compile.

./src/index.js
  Line 38:  Expected an assignment or function call and instead saw an expression  no-unused-expressions

Search for the keywords to learn more about each error.


error Command failed with exit code 1.  

Any ideas how to get past these issues? Thanks.

Support already-extracted cartridges

... with a reference to the manifest, i.e. manifest-foo.xml

This is necessary for supporting sending files to third-party preview/rendering services.

Upgrade to Node / React?

I've been trying to upgrade some of the dependencies, but they require using React v17 or later. Given v18 is the current version, upgrading react would unblock these other dependencies.

As a related note, it seems there's an issue when trying to build the project using node version 18 or above.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.