h5p/h5p-cli

Command Line Interface

h5p-cli's Issues

Editor not scrollable when expanding many sections

I have the issue that I need to test lots of options in the editor and found it hard to reach all sections, due to it's fixed position and the inner iframe not forcing a scroll on overflow.

However, it is possible using flexbox (see my PR #26). Is this the right way to go?

Output error h5p get <library>

The get command like h5p get h5p-summary, says that the cloning failed although repositories are there. And other commands like h5p new-branch my-new-branch h5p-summary seems to work fine.

$ h5p get h5p-summary                                               
Looking up dependencies... DONE                                                                     
Cloning into 'h5p-summary'... FAILED                                                                
Klone nach 'h5p-summary' ...                                                                        
Cloning into 'font-awesome'... FAILED                                                               
Klone nach 'font-awesome' ...                                                                       
Cloning into 'h5p-joubel-ui'... FAILED                                                              
Klone nach 'h5p-joubel-ui' ...                                                                      
Cloning into 'drop'... FAILED                                                                       
Klone nach 'drop' ...                                                                               
Cloning into 'tether'... FAILED                                                                     
Klone nach 'tether' ...                                                                             
Cloning into 'h5p-font-icons'... FAILED                                                             
Klone nach 'h5p-font-icons' ...                                                                     
Cloning into 'h5p-transition'... FAILED                                                             
Klone nach 'h5p-transition' ...                                                                     
Cloning into 'h5p-question'... FAILED                                                               
Klone nach 'h5p-question' ...                                                                       
Cloning into 'h5p-editor-summary-textual-editor'... FAILED                                          
Klone nach 'h5p-editor-summary-textual-editor' ...                                                  
$ h5p status -f                                                     
drop (master...origin/master)                                                                       
font-awesome (master...origin/master)                                                               
h5p-editor-summary-textual-editor (master...origin/master)                                          
h5p-font-icons (master...origin/master)                                                             
h5p-joubel-ui (master...origin/master)                                                              
h5p-question (master...origin/master)                                                               
h5p-summary (master...origin/master)                                                                
h5p-transition (master...origin/master)                                                             
tether (master...origin/master)  
$ h5p new-branch my-branch h5p-summary                              
Branching 'h5p-summary'... FAILED                                                                   
Branch 'my-branch' gewechselt
$ h5p status -f                                                     
drop (master...origin/master)                                                                       
font-awesome (master...origin/master)                                                               
h5p-editor-summary-textual-editor (master...origin/master)                                          
h5p-font-icons (master...origin/master)                                                             
h5p-joubel-ui (master...origin/master)                                                              
h5p-question (master...origin/master)                                                               
h5p-summary (my-branch)                                                                             
h5p-transition (master...origin/master)                                                             
tether (master...origin/master)    

(See the terminal recording for more detailed description of this issue.)

Versions

• npm: 6.5.0
• h5p-cli: 0.9.0

how to show h5p content in client

Hi,

I tried to show a h5p content in a client (browser) with the server (modified from h5p cli). But with Inonic mobile app it does not work. To find out the issue, I would like to clarify the steps of showing h5p client in the client. I would really appreciate if you could clarify the procedures for me.

I basically follow response of the function H5PServer.prototype.start = function (app) {} and create a html page:

1. add h5p core code in /asset (<script type="text/javascript" src="/assets/h5p-core/library/js/jquery.js"></script> ...)
2. add h5pIntegration and H5PDev according to specific content
3. add h5pContainer part.

My questions are:

1. My understanding is the h5p core script will replace h5pContainer according to h5pIntegration and H5PDev. Am I right?
2. In mobile app, the code usually stored in client side instead of downloading from the server. Is this possible with h5p? I mean if h5p libs and the content data are separated, I can put the script code in client slide and just modify the content data when navigating contents and this should not be difficult.

Please kindly clarify the issues I have. Thank you very much.

hosais

Bug: absolute paths do not work due to overrides

https://github.com/h5p/h5p-cli/blob/master/lib/assets/h5p-overrides.js#L17

So we can not use any URLs starting with a protocol or any other absolute path as the current http://localhost:8080 is always prepended.

Data reset message everytime after editing.

Hello,

I'm using Course Presentation Editor (1.16.0) & mod_hvp 1.4 (2017060600) & Moodle 3.3.1+ (Build: 20170727).

When I edit course presentation and add an image to it and press "save and display" I get an error message. Once this has happened it happens everytime I enter edit mode and "save changed and display" even if I don't change anything. The error message is;

"Data reset"

"This content has changed since you last used it.

You'll be starting over."

Error when running h5p create-language-file

I have:

1. Set up a Drupal instance
2. Enabled the Enable library development directory setting
3. Installed h5p-course-presentation to development/ directory
4. Installed the cli tool with npm -g install h5p

I go to the directory :

/var/www/drupal/h5p/sites/default/files/h5p/development/h5p-course-presentation/

I try to create language file with:

h5p create-language-file h5p-course-presentation fi

But I get the error:

fs.js:436
  return binding.open(pathModule._makeLong(path), stringToFlags(flags), mode);
                 ^
Error: ENOENT, no such file or directory 'h5p-course-presentation/language/fi.json'
    at Object.fs.openSync (fs.js:436:18)
    at Object.fs.writeFileSync (fs.js:975:15)
    at /usr/local/lib/node_modules/h5p/lib/h5p.js:1158:8
    at readSemantics (/usr/local/lib/node_modules/h5p/lib/h5p.js:734:5)
    at Object.h5p.createLanguageFile (/usr/local/lib/node_modules/h5p/lib/h5p.js:1156:3)
    at Object.commands.handler (/usr/local/lib/node_modules/h5p/bin/h5p-cli.js:556:11)
    at Object.<anonymous> (/usr/local/lib/node_modules/h5p/bin/h5p-cli.js:764:24)
    at Module._compile (module.js:456:26)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)

Any idea what might be causing this?

Loading semantics, please wait...

Fill the blanks is running just fine. I can modify settings and content in the .json and js files.
I can't get the editor working though. All I get is "Loading semantics, please wait..."
Am I missing something?

H5P CLI tool may cause confusion by ignoring library versions

When setting up libraries and fetching dependencies, the H5P CLI tool may cause confusion.

For instance, H5P.Column currently references H5P.Agamotto 1.5 as a soft dependency in semantics.json. The H5P CLI tool will fetch the master branch of H5P.Agamotto which already holds the 1.6 version, but it will neither notify the developer about that discrepancy (and suggest taking care of this by looking for the correct tag/commit) nor fail as a particular version of a library cannot be loaded like regular H5P integrations would. The H5P CLI tool will treat H5P.Agamotto 1.6 as if it was H5P.Agamotto 1.5.

That will work in many cases and one will not even notice anything, but it can cause confusion at least:

• There may be breaking changes between subcontent versions that one is not aware of, e.g. a conflicting semantics structure or even logic changes.
• The master branch commonly holds development versions which frequently contain bugs.
• If the H5P CLI tool supported upgrading existing content to test the procedure, this would likely fail.
• The content that's generated by the H5P CLI tool will be invalid and cannot be used on regular H5P integrations. Yes, that's not supposed to happen anyway, but people use this method to share their beta versions with testers, etc.

cannot read property "libraryDir" of defined

Hi,

i setup the environment h5p view. i try to run it through the command line. i am getting this error while running the script. please help me where to configure this and fix this problem.

Thanks
dhas

Init message containing unformatted object.

When running h5p init <lib-name> and following the questions with sane defaults I get finally the last question:

About to write to [object Object].

Is this ok? (yes)

Is suppose that [object Object] should be some informative representation of the object.

Feature request: nested directory structure in h5p-content

So far the CLI directly loads content.json from the direct child directories in h5p-content.

It would be helpful to structure these a bit more and nest them more.

iron route implementation

Hi,

My intention is building mobile web app (cordova/phonegate). According to my research, on the server side with cordova, it is usually with iron routes. There are three options for me currently:

1. Express <-> Cordova (not sure how to do it yet, I saw https://github.com/jxcore/jxcore but the project was closed)
2. Change h5p server to iron route for meteorjs development.
3. Change h5p server to iron route for Cordova development.

I may check this further: http://stackoverflow.com/questions/23045986/is-there-an-easy-way-to-convert-an-express-app-to-meteor. Would it be difficult to change to iron routes from your point of view?

On the other hand, I tried to import express in meteor (from 1.3, in theory, we can use npm package directly) but with many errors of "CKEDIT and jQuery not defined" in the Assets (h5p core and editor) Part. Maybe it is because the loading order (still not sure yet). I did not diving to the code of H5P libs (H5P-integration included), any other possiblity if you know? Thanks.

Any suggestion would be really appreciated.

Typo found: 'loose' should be 'lose'

https://github.com/h5p/h5p-cli/blob/master/lib/assets/h5p-core/editor/language/en.js#L23

Add missing dependencies to H5P registry

Hey,

Trying to develop / improve existing H5P modules using this CLI tool, but it is missing h5p-editor-show-when in the list of modules.

Getting messages inside drupal like:

"Missing dependency XXX required by YYY to registry"

Following the code here, I am guessing the API for the CLI tool, https://h5p.org/registry.json is not yet updated with the latest available H5P modules yet.

I followed these instructions: https://h5p.org/development-environment to setup with drupal 7 and the H5P cli tool. Installing the true false module with get h5p get h5p-true-false inside h5p's development folder. True false shows up in the hub as installed, but gives the missing dependency error.

As a fallback I tried to use plain git clone on the missing H5P module repo (h5p-editor-show-when) inside the development folder, but this did not help.

Upon adding h5p true false content I receive this error in the console, thrown by h5peditor:

VM2395 h5peditor.js:422 Uncaught TypeError: Cannot read property 'name' of undefined
    at Object.ns.processSemanticsChunk (VM2395 h5peditor.js:422)
    at new MetadataForm (VM2429 h5peditor-metadata.js:293)
    at ns.Form.processSemantics (VM2407 h5peditor-form.js:422)
    at VM2405 h5peditor-library-selector.js:269
    at VM2395 h5peditor.js:224
    at VM2395 h5peditor.js:142
    at HTMLScriptElement.script.onload (VM2395 h5peditor.js:78)

Let me know if any more info is required to debug.

Missing dependencies so far:

• h5p-editor-show-when required for: h5p-true-false, multiChoice, ...
• h5p-editor-rangelist required for at least: h5p-summary, ...

Unable to rebuild library using get command

I want "rebuild" the course-presentation using the h5p-cli, but it seems that there're some libraries missing. To rebuild the package, I run the following commands:

/h5p # h5p get --https h5p-course-presentation
Looking up dependencies... DONE
cloning https://github.com/h5p/h5p-course-presentation.git
Cloning into 'h5p-course-presentation'... OK
cloning https://github.com/h5p/font-awesome.git
Cloning into 'font-awesome'... OK
cloning https://github.com/h5p/h5p-font-icons.git
Cloning into 'h5p-font-icons'... OK
cloning https://github.com/h5p/h5p-joubel-ui.git
Cloning into 'h5p-joubel-ui'... OK
cloning https://github.com/h5p/drop.git
Cloning into 'drop'... OK
cloning https://github.com/h5p/tether.git
Cloning into 'tether'... OK
cloning https://github.com/h5p/h5p-transition.git
Cloning into 'h5p-transition'... OK
cloning https://github.com/h5p/h5p-editor-course-presentation.git
Cloning into 'h5p-editor-course-presentation'... OK
cloning https://github.com/h5p/h5p-advanced-text.git
Cloning into 'h5p-advanced-text'... OK
cloning https://github.com/h5p/h5p-audio.git
Cloning into 'h5p-audio'... OK
cloning https://github.com/h5p/h5p-blanks.git
Cloning into 'h5p-blanks'... OK
cloning https://github.com/h5p/h5p-question.git
Cloning into 'h5p-question'... OK
cloning https://github.com/h5p/h5p-continuous-text.git
Cloning into 'h5p-continuous-text'... OK
cloning https://github.com/h5p/h5p-dialogcards.git
Cloning into 'h5p-dialogcards'... OK
cloning https://github.com/h5p/h5p-editor-vertical-tabs.git
Cloning into 'h5p-editor-vertical-tabs'... OK
cloning https://github.com/h5p/h5p-drag-n-bar.git
Cloning into 'h5p-drag-n-bar'... OK
cloning https://github.com/h5p/h5p-drag-n-drop.git
Cloning into 'h5p-drag-n-drop'... OK
cloning https://github.com/h5p/h5p-drag-n-resize.git
Cloning into 'h5p-drag-n-resize'... OK
cloning https://github.com/h5p/h5p-drag-question.git
Cloning into 'h5p-drag-question'... OK
cloning https://github.com/h5p/h5p-editor-drag-question.git
Cloning into 'h5p-editor-drag-question'... OK
cloning https://github.com/h5p/h5p-image.git
Cloning into 'h5p-image'... OK
cloning https://github.com/h5p/h5p-editor-wizard.git
Cloning into 'h5p-editor-wizard'... OK
cloning https://github.com/h5p/jquery-ui.git
Cloning into 'jquery-ui'... OK
cloning https://github.com/h5p/h5p-drag-text.git
Cloning into 'h5p-drag-text'... OK
cloning https://github.com/h5p/h5p-exportable-text-area.git
Cloning into 'h5p-exportable-text-area'... OK
cloning https://github.com/h5p/downloadify.git
Cloning into 'downloadify'... OK
cloning https://github.com/h5p/swfobject.git
Cloning into 'swfobject'... OK
cloning https://github.com/h5p/filesaver.git
Cloning into 'filesaver'... OK
cloning https://github.com/h5p/blob.git
Cloning into 'blob'... OK
cloning https://github.com/h5p/h5p-interactive-video.git
Cloning into 'h5p-interactive-video'... OK
cloning https://github.com/h5p/h5p-video.git
Cloning into 'h5p-video'... OK
cloning https://github.com/h5p/h5p-editor-interactive-video.git
Cloning into 'h5p-editor-interactive-video'... OK
cloning https://github.com/h5p/h5p-go-to-question.git
Cloning into 'h5p-go-to-question'... OK
cloning https://github.com/h5p/h5p-editor-timecode.git
Cloning into 'h5p-editor-timecode'... OK
cloning https://github.com/h5p/h5p-guided-tour.git
Cloning into 'h5p-guided-tour'... OK
cloning https://github.com/h5p/shepherd.git
Cloning into 'shepherd'... OK
cloning https://github.com/h5p/h5p-link.git
Cloning into 'h5p-link'... OK
cloning https://github.com/h5p/h5p-editor-url-field.git
Cloning into 'h5p-editor-url-field'... OK
cloning https://github.com/h5p/h5p-mark-the-words.git
Cloning into 'h5p-mark-the-words'... OK
cloning https://github.com/h5p/h5p-multi-choice.git
Cloning into 'h5p-multi-choice'... OK
cloning https://github.com/h5p/embeddedjs.git
Cloning into 'embeddedjs'... OK
cloning https://github.com/h5p/h5p-nil.git
Cloning into 'h5p-nil'... OK
cloning https://github.com/h5p/h5p-questionnaire.git
Cloning into 'h5p-questionnaire'... OK
cloning https://github.com/h5p/h5p-open-ended-question.git
Cloning into 'h5p-open-ended-question'... OK
cloning https://github.com/h5p/h5p-simple-multiple-choice.git
Cloning into 'h5p-simple-multiple-choice'... OK
cloning https://github.com/h5p/h5p-single-choice-set.git
Cloning into 'h5p-single-choice-set'... OK
cloning https://github.com/h5p/h5p-soundjs.git
Cloning into 'h5p-soundjs'... OK
cloning https://github.com/h5p/h5p-summary.git
Cloning into 'h5p-summary'... OK
cloning https://github.com/h5p/h5p-editor-summary-textual-editor.git
Cloning into 'h5p-editor-summary-textual-editor'... OK
cloning https://github.com/h5p/h5p-table.git
Cloning into 'h5p-table'... OK
cloning https://github.com/h5p/h5p-text.git
Cloning into 'h5p-text'... OK
cloning https://github.com/h5p/h5p-true-false.git
Cloning into 'h5p-true-false'... OK
cloning https://github.com/h5p/h5p-editor-radio-group.git
Cloning into 'h5p-editor-radio-group'... OK
cloning https://github.com/h5p/h5p-editor-color-selector.git
Cloning into 'h5p-editor-color-selector'... OK
cloning https://github.com/h5p/h5p-editor-duration.git
Cloning into 'h5p-editor-duration'... OK
cloning https://github.com/GriffWith/h5p-twitter-user-feed.git
Cloning into 'h5p-twitter-user-feed'... OK
cloning https://github.com/h5p/h5p-editor-radio-selector.git
Cloning into 'h5p-editor-radio-selector'... OK
/tmp # h5p pack -r h5p-course-presentation/
Packing 1 library to file...
Adding 56 dependencies to file...
h5p-course-presentation OK 1.24.1
font-awesome OK 4.5.4
h5p-joubel-ui OK 1.3.12
tether OK 1.0.2
h5p-font-icons OK 1.0.6
drop OK 1.0.2
h5p-transition OK 1.0.4
h5p-editor-course-presentation OK 1.24.2
h5p-drag-n-bar OK 1.5.15
h5p-drag-n-drop OK 1.1.5
h5p-drag-n-resize OK 1.2.6
h5p-image OK 1.1.13
h5p-advanced-text OK 1.1.12
h5p-editor-url-field OK 1.2.2
h5p-continuous-text OK 1.2.14
h5p-link OK 1.3.15
h5p-table OK 1.1.16
h5p-audio OK 1.5.0
h5p-blanks OK 1.14.0
h5p-video OK 1.6.5
h5p-single-choice-set OK 1.11.18
h5p-question OK 1.5.1
h5p-soundjs OK 1.0.2
h5p-editor-vertical-tabs OK 1.3.9
h5p-multi-choice OK 1.16.2
h5p-true-false OK 1.8.0
embeddedjs OK 1.0.4
h5p-drag-question OK 1.14.5
h5p-editor-radio-group OK 1.1.4
jquery-ui OK 1.10.22
h5p-editor-drag-question OK 1.10.19
h5p-summary OK 1.10.13
h5p-editor-wizard OK 1.2.15
h5p-editor-summary-textual-editor OK 1.1.10
filesaver OK 1.0.6
h5p-exportable-text-area OK 1.3.11
blob OK 1.0.6
downloadify OK 1.0.3
swfobject OK 1.0.2
h5p-interactive-video OK 1.24.1
h5p-editor-interactive-video OK 1.24.0
h5p-text OK 1.1.15
h5p-editor-duration OK 1.1.12
h5p-editor-color-selector OK 1.3.1
h5p-drag-text OK 1.10.1
h5p-mark-the-words OK 1.11.0
h5p-guided-tour OK 1.0.6
h5p-editor-timecode OK 1.2.12
shepherd OK 1.0.3
h5p-questionnaire OK 1.3.5
h5p-go-to-question OK 1.3.13
h5p-open-ended-question OK 1.0.21
h5p-simple-multiple-choice OK 1.1.16
h5p-dialogcards OK 1.9.2
h5p-editor-radio-selector OK 1.2.2
h5p-twitter-user-feed OK 1.0.1
h5p-nil OK 1.0.14

This gives me a "libraries.h5p" which includes 57 directories and 1 file. When I try to install the package (in my case in Moodle), it tells me that the package is invalid. Now, I compared the "original" H5P course presentation from https://api.h5p.org/v1/content-types/H5P.CoursePresentation which contains 70 directories and when I try to install it, everything is fine.

I compared both h5p files and the following folders/files are missing:

1. content: Not sure how to "generate" this folder?!
2. H5P.AudioRecorder-1.0
3. H5P.CKEditor-1.0
4. H5P.FreeTextQuestion-1.0
5. H5P.IVHotspot-1.2
6. H5P.Shape-1.0
7. H5P.TextUtilities-1.3
8. H5PEditor.RangeList-1.0
9. H5PEditor.SelectToggleFields-1.1
10. H5PEditor.Shape-1.0
11. H5PEditor.ShowWhen-1.0
12. H5PEditor.SingleChoiceSetTextualEditor-1.0
13. H5PEditor.TableList-1.0
14. h5p.json: Not sure how to "generate" this file?!

Any idea why these files/folder are missing and also not fetched by h5p get command?

missing library issue

Hi,
I run a h5p server with main content "h5p-course-presentation". I can see my content from the server I run without problems. But I got following message on the server console:
Missing library: Drop
Missing library: H5P.TwitterUserFeed

There are different ways to have lib list.
The way I have h5p-libs:
-- "h5p get h5p-course-presentation" to clone all related h5p libs.
Code path: h5p-cli.js -> h5p.get = function (libraries, next) { ..}
-> get lib list from "https://h5p.org/registry.json"
Run server:
-- h5p server
Code path: h5p-server.js -> h5p-library-list.js, H5PLibraryList.fromDirectory
-> get lib list starting from main content

Which would be the right way?

Using folder name for content id breaks going to fullscreen (and potentially more)

Currently, the H5P-CLI tool rewrite is using the unsanitized content's folder name for the content id. Cmp.

h5p-cli/assets/templates/view.html

Line 16 in 97b9574

"cid-{folder}": {

I suggest to not do that.

For instance, the content id will be used to find the H5P iframe which is requested to be sent to full screen. A query selector is used and that query selector composition uses the content id. Cmp. https://github.com/h5p/h5p-php-library/blob/master/js/h5p.js#L540

If the content id contains characters reserved for query selecting, e.g. a blank or a dot, that will throw off the query selection, no iframe will be found and the request to go to full screen will not be granted - in fact you'll find an error message in the console.

I am not sure where else using a "random" content id might cause trouble in H5P core ...

To reproduce:

1. Create an Interactive Video content or some other content type that is capable of going to full screen.
2. Name it "foo bar" or "foo.bar" or give it some other name that contains characters reserved in query selectors. Result: The folder name will contain a blank, a dot, etc.
3. View the content and try to send it to full screen.

Suggestion
A natural choice would be to simply use a UUID for the folder name, as then both the subcontent id and the content id would use the same scheme. That would also prevent the "folder already exists" exception and a developer could call as many contents "test" as he/she wants to :-)

If the folder name should give the developer some insight into what content it contains by using the content's title for the folder name, then it should be sanitized to not contain any characters that could throw off the query selecting.

Incomplete example / docs for starters

An example of the complete directory structure is found below:

Well, and how does a content.json look like and how does it work with more libraries? In the example you show blanks and question but how do contentDir and mainLibraryDir also make the others accessible?

And what are the needed steps after this?

The docs could be a bit more detailed.

Potentially forward from `http://localhost:8080` to `http://localhost:8080/dashboard`

It feels a little unintuitive to be required to point your browser towards a specific endpoint if you just wanted to launch the environment. Unless http://localhost:8080 is reserved for something else in the future, it might be worth forwarding to http://localhost:8080/dashboard by default or just add another route to the express configuration.

h5p-cli/readme.md

Lines 28 to 29 in d7391db

	Once the dev server is started you can use your browser to view, edit, delete, import, export and create new content types. To view the dashboard point your browser to
	http://localhost:8080/dashboard

h5p-cli/commands.md

Lines 76 to 77 in d7391db

	Once the dev server is started you can use your browser to view, edit, delete, import, export and create new content types. To view the dashboard point your browser to
	http://localhost:8080/dashboard

h5p get does not work properly in anonymous docker builds

We have noticed that "h5p get" exclusivly uses ssh-based github urls. This is somewhat challenging when automating h5p builds and deployment using the h5p cli tool. The pull request at: #38 includes a suggestion on alleviating this.

Feature request: load multiple libraries

It would make sense to have multiple contents to test and also load multiple libraries.

So far only one can be used as mainLibraryDir.