{"id":17053790,"url":"https://github.com/terrymooreii/mediacenterjs-plugin-template","last_synced_at":"2026-04-10T12:31:48.252Z","repository":{"id":11475529,"uuid":"13944368","full_name":"TerryMooreII/mediacenterjs-plugin-template","owner":"TerryMooreII","description":"A template repository for MediacenterJS plugins","archived":false,"fork":false,"pushed_at":"2014-12-02T13:27:24.000Z","size":255,"stargazers_count":1,"open_issues_count":1,"forks_count":4,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-10T08:06:24.361Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/TerryMooreII.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2013-10-29T02:15:33.000Z","updated_at":"2014-04-01T12:38:14.000Z","dependencies_parsed_at":"2022-09-23T22:10:22.372Z","dependency_job_id":null,"html_url":"https://github.com/TerryMooreII/mediacenterjs-plugin-template","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/TerryMooreII/mediacenterjs-plugin-template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TerryMooreII%2Fmediacenterjs-plugin-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TerryMooreII%2Fmediacenterjs-plugin-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TerryMooreII%2Fmediacenterjs-plugin-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TerryMooreII%2Fmediacenterjs-plugin-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TerryMooreII","download_url":"https://codeload.github.com/TerryMooreII/mediacenterjs-plugin-template/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TerryMooreII%2Fmediacenterjs-plugin-template/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31642718,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-10T07:40:12.752Z","status":"ssl_error","status_checked_at":"2026-04-10T07:40:11.664Z","response_time":98,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-14T10:13:14.459Z","updated_at":"2026-04-10T12:31:48.084Z","avatar_url":"https://github.com/TerryMooreII.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"#MediacenterJS Plugins template\n\n\nThe easist way create plugins for MediacenterJS is to use the mediacenterjs-plugin-generator. [View the documentation][5] for more information \n\n```\nnpm install mediacenterjs-template-generator\nnode template-generator.js\n```  \n\n\nThere are a few requirements that your plugins must adhere to.  It is required that your plugin have a `public` and `views` folder and an `index.js` file located in the root of the plugin folder.  \n\n###The public folder\n\nThe public folder will contain any front end static content such as any CSS, JavaScript, or image files.  You can structure this folder however you see fit.  The only requirement for this folder is that it contains a `tile.png` image in the root of the folder. This image will become the icon that users will click on to open your plugin.  The recommended image size is 160px by 169px.\n\n###The views folder\n\nThe `views` folder will contain your [Jade][1] template files.  Jade is a NodeJS Template Engine which aims to simplify and reduce the amount of HTML code needed to write in order to create HTML web pages.  Please view the [Jade website][2] to learn more.  \nTo get started with the `template.jade` file rename it to match your plugin's name.  As is, this file will contain the basic structure for a plain HTML document.  It is important to keep a reference to the core dependencies.  These dependencies will ensure that you have access core functionality and styling so that your plugin will give the user a consistent experience through the entire MediacenterJS application.\n\n**Required JavaScript and CSS:**\n```\nscript(src=\"/core/js/jquery-1.8.2.min.js\")       // jQuery library \n\nscript(src=\"/core/js/plugins/jquery.idle-timer.js\") // small jQuery plugin to get the screensaver to work\n\nscript(src=\"/core/js/jquery.mcjs.core.js\") // the jQuery core plugin for all basic features like keyboard support, screensaver etc\n\nlink(rel='stylesheet', href='/core/css/style.css')\n```\n\n**Optional JavaScript libraries and CSS files**\n```\nscript(src=\"/core/js/jquery-ui-1.10.3.min.js\")  // jQuery UI library (for modal popups/error messages)\n\nscript(src=\"/core/js/plugins/jquery.i18n.properties.-1.0.9.js\") // jQuery plugin for frontend translations\n\nscript(src=\"/core/js/plugins/jquery.prettyForm.js\") // jQuery plugin to use custom checkboxes\n\nscript(src=\"/core/js/plugins/jquery.keyboard.min.js\") // jQuery plugin for onscreen keyboard\n\nscript(src=\"/core/js/plugins/validation/jquery.validate.min.js\")  // jQuery validation plugin\n\nscript(src=\"/core/js/plugins/validation/jquery.validate.defaults.js\") // jQuery validation plugin\n\nscript(src=\"/core/js/plugins/validation/jquery.validate.rules.js\") // jQuery validation plugin\n\nlink(rel='stylesheet', href='/core/css/jquery-ui-1.10.3.custom.min.css')  // jQuery UI CSS\n\nlink(rel='stylesheet', href='/themes/'+selectedTheme)    // selected theme CSS\n```\n\nOther than the core dependencies feel free to add any references to your CSS, JavaScript, or image files that you have stored in the public folder.  You can get a reference to your plugins public folder by using `/mediacenterjs-\u003cyour-plugin-name\u003e/...'`.  Were the `...` is the same file and folder structure contained in your `public` folder. \n\n\n\n###index.js\nAt the root of your plugins folder you must have an index.js file. This file will contain most of your plugins logic. The file requires two exports.\n\nFirst the `exports.engine`.  Currently the only supported template engine is Jade so you can leave the default `exports.engine = 'jade';`\n\nThe second is `exports.index`.  This is what gets called when a user click on your plugin.  This is a JavaScript function that gets passed an ExpressJS `request`, `response`, and `next` parameter.  See the [ExpressJS][3] web site to learn more about these parameter.  \n\nWhen you are ready to push data to and render your plugin's Jade file then you will call the `response.render()` function passing it two parameters; 1) the name of your view and 2) the data object to render on the screen.  If your `.jade` file is at the root of the views folder then you will only need to pass the name of the jade file without the `.jade` extension as the first parameter.  \n\nExample\n```\nresponse.render('name-of-jade-file', {data: toPass} );\n```\n\n\n###Local Testing\nTesting your plugin is as easy as coping your plugin's folder to the `node_modules` folder of your MediacenterJS application. After starting (or restarting) the MediacenterJS application you will see a route being created at in the console for your plugin and no error messages. If you included a tile.png file then your plugin icon should show up on the home screen of MediacenterJS.  If something goes wrong you can check the terminal of MediacenterJS or your browser's console.  If you are stuck and need help then post a message to the mediacenterjs-plugin-templete [Github][4] page and the community will be more than happy to help.\n\n\n###Publishing.\nPublishing your plugin is as easy as updating the package.json file and publishing your application to the NPM repository.  \nMore info coming soom on this process......\n\n\n###VideoJS player\n\nJavaScript\n```\nscript(src=\"http://vjs.zencdn.net/4.0/video.js\")\n\n$('.link').click(function(e) {\n  e.preventDefault();\t\n\n  var link = $(this).attr('href')\n\n  videojs(\"player\").ready(function(){\n    var myPlayer = this;\n    $('#player').css('bottom','0');\n    myPlayer.src(link);\n    myPlayer.play();\n  });\n});\n\n```\nCSS\n```\nlink(href=\"http://vjs.zencdn.net/4.0/video-js.css\", rel=\"stylesheet\")\nstyle.\n  .vjs-play-progress, .vjs-volume-level { background-color: #d96800!important; }\n  .vjs-control-bar, .vjs-big-play-button { background: rgba(171,171,171,0.7)!important; }\n  .vjs-slider { background: rgba(171,171,171,0.2333333333333333)!important; }\n  .vjs-fade-out { opacity: 1 !important; visibility: visible !important; }\n  .vjs-fullscreen-control{visibility:hidden!important;}\n\n```\nHTML\n```\nvideo#player.video-js.vjs-default-skin(controls, preload=\"metadata\", width=\"100%\", height=\"33\", data-setup=\"{}\") %\n\t\t\t\tsource(src=\"\",type=\"audio/mp3\")\t\t\n```\n\n\n  [1]: http://jade-lang.com/tutorial/\n  [2]: http://jade-lang.com/tutorial/\n  [3]: http://express.com\n  [4]: http://github.com\n  [5]: https://github.com/TerryMooreII/mediacenterjs-plugin-generator","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fterrymooreii%2Fmediacenterjs-plugin-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fterrymooreii%2Fmediacenterjs-plugin-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fterrymooreii%2Fmediacenterjs-plugin-template/lists"}