diff --git a/.zenflow b/.zenflow deleted file mode 100644 index 8b2409c723..0000000000 --- a/.zenflow +++ /dev/null @@ -1,10 +0,0 @@ ---- -confirm_review: true -backup_remote: false -release_branch: stable -project: videojs -qa_branch: false -staging_branch: false -development_branch: master -remote: origin -confirm_staging: false diff --git a/CHANGELOG.md b/CHANGELOG.md index 11ca59fab7..45f1924ce6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,7 +2,12 @@ CHANGELOG ========= ## Unreleased (HEAD) -_(none)_ +* Added LESS as a CSS preprocessor for the default skin ([view](https://github.com/videojs/video.js/pull/644)) +* Exported MenuButtons for use in the API ([view](https://github.com/videojs/video.js/pull/648)) +* Fixed ability to remove listeners added with one() ([view](https://github.com/videojs/video.js/pull/659)) +* Updated buffered() to account for multiple loaded ranges ([view](https://github.com/videojs/video.js/pull/643)) +* Exported createItems() for custom menus ([view](https://github.com/videojs/video.js/pull/654)) +* Preventing media events from bubbling up the DOM ([view](https://github.com/videojs/video.js/pull/630)) -------------------- diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 1254425e3d..9496105e7e 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,155 +1,244 @@ -So you're telling me you want to spend some of your precious time giving back to this humble project? You're crazy. But since you're here...there are some ways you can help make Video.js a faster, easier, more compatible, and more fully-featured video player. +CONTRIBUTING +============ +So you want to help out? Great! There's a number of ways you can get involved. - * Bug reports and fixes - * Features and changes (pull requests) - * [Answer questions](http://stackoverflow.com/questions/tagged/video.js) on Stack Overflow - * Other Video.js projects + * [File and discuss issues](#filing-issues) + * [Contribute code](#contributing-code) + * [Build and share plugins](docs/plugins.md) + * [Answer questions on Stack Overflow](http://stackoverflow.com/questions/tagged/video.js) -Don't miss the [code style guide](#code-style). +There's also other Video.js projects where you can help. (check the [video.js org](https://github.com/videojs) for an up-to-date list of projects) -# Getting started + * [Videojs.com](https://github.com/videojs/videojs.com) + * [Video.js flash player](https://github.com/videojs/video-js-swf) + * [Player skin designer](https://github.com/videojs/designer) + * [Contribflow](https://github.com/zencoder/contribflow) -1. [Download and install Node.js](http://nodejs.org/download/). Video.js uses Node for build and test automation. - There is a known issue between Node.js version 0.10.x and phantomjs. This will manifest itself during the node module installation (see step 4 below). For the time being, please install Node.js version 0.8.22 or earlier. You can find earlier versions of Node.js [here](http://nodejs.org/dist/). +Filing issues +------------- +[GitHub Issues](https://github.com/videojs/video.js/issues) are used for all discussions around the codebase, including **bugs**, **features**, and other **enhancements**. -2. [Fork](http://help.github.com/fork-a-repo/) and clone the video.js git repository. +### Reporting a Bug - ```bash - # Clones your fork of the repo into the current directory in terminal - git clone https://github.com//video-js.git - # Navigate to the newly cloned directory - cd video-js - # Assigns the original repo to a remote called "upstream" - git remote add upstream https://github.com/zencoder/video-js.git - ``` +**A bug is a demonstrable problem** that is caused by the code in the repository. Good bug reports are extremely helpful. Thank You! - In the future, if you want to pull in updates to video.js that happened after you cloned the main repo, you can run: +Guidelines for bug reports: + +1. Use the [GitHub issue search](https://github.com/videojs/video.js/issues) — check if the issue has already been reported. + +2. Check if the issue has already been fixed — try to reproduce it using the latest `master` branch in the repository. + +3. Isolate the problem — **create a [reduced test case](http://css-tricks.com/6263-reduced-test-cases/)** with a live example. You can possibly use [this JSBin example](http://jsbin.com/axedog/7/edit) as a starting point. + +A good bug report should be as detailed as possible, so that others won't have to follow up for the essential details. + +Here's an example: + +> Short yet concise Bug Summary +> +> Description: +> Happens on Windows 7 and OSX. Seen with IE9, Firefox 19 OSX, Chrome 21, Flash 11.6 and 11.2 +> +> 1. This is the first step +> 2. This is the second step +> 3. Further steps, etc. +> +> Expected: +> (describe the expected outcome of the steps above) +> +> Actual: +> (describe what actually happens) +> +> `` (a link to the reduced test case, if it exists) +> +> Any other information you want to share that is relevant to the issue being +> reported. This might include the lines of code that you have identified as +> causing the bug, and potential solutions (and your opinions on their +> merits). - ```bash - git checkout master - git pull upstream master - ``` +**[File a bug report](https://github.com/videojs/video.js/issues/new)** -3. Install the grunt-cli package so that you will have the correct version of grunt available from any project that needs it. This should be done as a global install: +### Requesting a Feature - ```bash - npm install -g grunt-cli - ``` +1. [Check the plugin list](https://github.com/videojs/video.js/wiki/Plugins) for any plugins that may already support the feature. -4. Install required node.js modules using node package manager. +2. [Search the issues](https://github.com/videojs/video.js/issues) for any previous requests for the same feature, and give a thumbs up or +1 on existing requests. - ```bash - npm install - ``` +2. If no previous requests exist, create a new issue. Please be as clear as possible about why the feautre is needed and the intended use case. -5. Build a local copy. Video.js uses [grunt](http://gruntjs.com), a node-based task automation tool for building and tesing. The following will compile a local copy in the dist/ directory and run tests. It will also create a sourcelist.js file that can be used to load the video.js source scripts in a page. +**[Request a feature](https://github.com/videojs/video.js/issues/new)** - ```bash - grunt - ``` +Contributing code +----------------- -6. When you're ready to add a feature, make a change, or fix a bug, first create a new branch for it. Prefix the branch with the correspoding [issue number](https://github.com/zencoder/video-js/issues). If there isn't one, submit a new issue. Anything more complicated than simple docs changes should have an issue. +To contibute code you'll need to be able to build a copy of Video.js and run tests locally. There are a few requirements before getting started. - ```bash - git checkout -b <####-branch-name> - ``` +- Node.js -- Video.js uses Node for build and test automation. Node is available for Windows, Mac OS X, Linux, and SunOS, as well as source code if that doesn't scare you. [Download and install Node.js](http://nodejs.org/download/) -Be sure to reference your issue in any commit message. Github allows you to do this though the [fixes or closes](https://github.com/blog/831-issues-2-0-the-next-generation) keywords. +- grunt-cli -- Install grunt-cli globally so that you will have the correct version of grunt available for any project that needs it. - ```bash - My commit message. fixes #123 - ``` + On Unix-based systems, you'll have to do this as a superuser: -# Bugs +```bash +sudo npm install -g grunt-cli +``` + On Windows, you can just run: -A bug is a _demonstrable problem_ that is caused by the code in the -repository. Good bug reports are extremely helpful - thank you! +```bash +npm install -g grunt-cli +``` -Guidelines for bug reports: +- Contribflow -- A homegrown git workflow tool for managing feature/hotfix branches and submitting pull requests. If you have your own preferred git workflow, contribflow isn't required, but the following instructions will assume you're using it. -1. **Use the [GitHub issue search](https://github.com/zencoder/video-js/issues)** — check if the issue has already been reported. + On Unix-based systems, you'll have to do this as a superuser: -2. **Check if the issue has been fixed** — try to reproduce it using the latest `master` branch in the repository. +```bash +sudo npm install -g contribflow +``` -3. **Isolate the problem** — ideally create a [reduced test - case](http://css-tricks.com/6263-reduced-test-cases/) and a live example. + On Windows, you can just run: -A good bug report shouldn't leave others needing to chase you up for more information. Please try to be as detailed as possible in your report. What is your environment? What steps will reproduce the issue? What browser(s), OS, and devices experience the problem? What would you expect to be the outcome? All these -details will help people to fix any potential bugs. +```bash +npm install -g contribflow +``` -Example: +### Building your own copy of Video.js -> Short and descriptive example bug report title -> -> A summary of the issue and the browser/OS environment in which it occurs. If -> suitable, include the steps required to reproduce the bug. +First, [fork](http://help.github.com/fork-a-repo/) the video.js git repository. At the top of every github page, there is a Fork button. Click it, and the forking process will copy Video.js into your own GitHub account. + +Clone your fork of the repo into your code directory + +```bash +git clone https://github.com//video.js.git +``` + +Navigate to the newly cloned directory + +```bash +cd video.js +``` + +Assign the original repo to a remote called "upstream" + +``` +git remote add upstream https://github.com/videojs/video.js.git +``` + +>In the future, if you want to pull in updates to video.js that happened after you cloned the main repo, you can run: > -> 1. This is the first step -> 2. This is the second step -> 3. Further steps, etc. +> ```bash +> git checkout master +> git pull upstream master +> ``` + +Install the required node.js modules using node package manager + +```bash +npm install +``` + +> A note to Windows developers: If you run npm commands, and you find that your command prompt colors have suddenly reversed, you can configure npm to set color to false to prevent this from happening. +> `npm config set color false` +> Note that this change takes effect when a new command prompt window is opened; the current window will not be affected. + +Build a local copy of video.js and run tests + +```bash +grunt +grunt test +``` + +At this point you should have a built copy of video.js in a directory named `dist`, and all tests should be passing. + +### Making Changes + +Whether you're adding something new, making something better, or fixing a bug, you'll first want to search the [GitHub issues](https://github.com/videojs/video.js/issues) and [plugins list](https://github.com/videojs/video.js/wiki/Plugins) to make sure you're aware of any previous discussion or work. If an unclaimed issue exists, claim it via a comment. If no issue exists for your change, submit one, follwing the [issue filing guidelines](#filing-issues). + +There are two categories of changes in video.js land, features and hotfixes (Video.js follows a branching model similar to [gitflow](http://nvie.com/posts/a-successful-git-branching-model/)). Hotfixes are for urgent fixes that need to be released immediately as a patch. Features are for everything else (including non-urgent fixes). If you think you have a hotfix scenario, verify that (via comment) before starting the work. We'll focus on features here, but you can swap `hotfix` for `feature` in any command. + +Start a new development branch + +```bash +contrib feature start +``` + +You'll be prompted to name the branch. After that, contrib will create the branch locally, and use git to push it up to your origin, and track it. You're now ready to start building your feature or fixing that bug! Be sure to read the [Code Style Guide](#code-style-guide). + +While you're developing, you can ensure your changes are working by writing tests (in the `test` directory) and running `grunt test`. + +There's also a sandbox directory where you can add any file and it won't get tracked as a change. To start you can copy the example index file and see a working version of a player (using the local source code) by loading it in a browser. + +```bash +cp sandbox/index.html.example sandbox/index.html +open sandbox/index.html +``` + +> #### NOTE: Testing Flash Locally in Chrome +> Chrome 21+ (as of 2013/01/01) doens't run Flash files that are local and loaded into a locally accessed page (file:///). +> To get around this you can do either of the following: > -> `` (a link to the reduced test case) +> 1. Do your development and testing using a local HTTP server. > -> Any other information you want to share that is relevant to the issue being -> reported. This might include the lines of code that you have identified as -> causing the bug, and potential solutions (and your opinions on their -> merits). - -**[File a bug report](https://github.com/h5bp/html5-boilerplate/issues/)** +> 2. [Disable the version of Flash included with Chrome](http://helpx.adobe.com/flash-player/kb/flash-player-google-chrome.html#How_can_I_run_debugger_or_alternate_versions_of_Flash_Player_in_Google_Chrome) and enable a system-wide version of Flash instead. -### NOTE: Testing Flash Locally in Chrome -Chrome 21+ (as of 2013/01/01) doens't run Flash files that are local and loaded into a locally accessed page (file:///). To get around this you need to [disable the version of Flash](http://helpx.adobe.com/flash-player/kb/flash-player-google-chrome.html#How_can_I_run_debugger_or_alternate_versions_of_Flash_Player_in_Google_Chrome) included with Chrome and enable a system-wide version of Flash. +Commit and push changes as you go (using git directly). Write thorough descriptions of your changes in your commit messages. -## Pull requests +```bash +git add . +git commit -av +git push +``` -Good pull requests - patches, improvements, new features - are a fantastic help. They should remain focused in scope and avoid containing unrelated commits. If your contribution involves a significant amount of work or substantial changes to any part of the project, please open an issue to discuss it first. +> GitHub allows you to close an issue through your commit message using the [fixes](https://github.com/blog/831-issues-2-0-the-next-generation) keyword. +> +> ```bash +> My commit message. fixes #123 +> Testing: (briefly describe any testing here, for example, 'unit tests and cross-browser manual tests around playback and network interruption') +> ``` -Make sure to adhere to the coding conventions used throughout a project (indentation, accurate comments, etc.). Please update any documentation that is relevant to the change you're making. +### Submitting your changes -Please follow this process; it's the best way to get your work included in the project: +First, thoroughly test your feature or fix, including writing tests to make sure your change doesn't get regressed in a future update. If you're fixing a bug, we recommend in addition to testing the fix itself, to do some testing around the areas that your fix has touched. For example, a brief smoketest of the player never hurts. -1. [Fork](http://help.github.com/fork-a-repo/) the project, clone your fork, and configure the remotes: +Make sure your changes are pushed to origin - ```bash - # Clones your fork of the repo into the current directory in terminal - git clone https://github.com//html5-boilerplate.git - # Navigate to the newly cloned directory - cd html5-boilerplate - # Assigns the original repo to a remote called "upstream" - git remote add upstream https://github.com/h5bp/html5-boilerplate.git - ``` +```bash +git push +``` -2. If you cloned a while ago, get the latest changes from upstream: +Use contrib to submit a a pull request (make sure you're in your feature branch) - ```bash - git checkout master - git pull upstream master - ``` +```bash +contrib feature submit +``` -3. Create a new topic branch to contain your feature, change, or fix: +You'll be prompted for title and description for the Pull Request. After that, contrib will use Git to submit your pull request to video.js. - ```bash - git checkout -b - ``` +You're Done! (except for cleanup.) To clean up your feature or hotfix branch: -4. Commit your changes in logical chunks. Please adhere to these [git commit message guidelines](http://tbaggery.com/2008/04/19/a-note-about-git-commit-messages.html) or your pull request is unlikely be merged into the main project. Use git's [interactive rebase](https://help.github.com/articles/interactive-rebase) feature to tidy up your commits before making them public. +First, checkout your feature or issue branch: -5. Locally merge (or rebase) the upstream development branch into your topic branch: +```bash +git checkout (branchname) +``` - ```bash - git pull [--rebase] upstream master - ``` +Run this command to clean up your feature: -6. Push your topic branch up to your fork: +```bash +contrib feature delete +``` - ```bash - git push origin - ``` +Run this command to clean up your bug fix: -10. [Open a Pull Request](http://help.github.com/send-pull-requests/) with a clear title and description. +```bash +contrib hotfix delete +``` +> PLEASE NOTE: THIS WILL DELETE YOUR LOCAL AND REMOTE COPIES OF THE FEATURE. +> This is meant to clean up your local and remote branches, so make sure any changes you don't want to lose have been pulled into the parent project or another branch first. -# Code Style +Code Style Guide +---------------- Please follow [Google's JavaScript Style Guide](http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml) to the letter. If your editor supports [.editorconfig](http://editorconfig.org/#download) it will make it easier to manage differences from your own coding style. ### Style examples include: @@ -162,11 +251,6 @@ Please follow [Google's JavaScript Style Guide](http://google-styleguide.googlec If you happen to find something in the codebase that does not follow the style guide, that's a good opportunity to make your first contribution! -# Other Video.js Pojects -* [Video.js SWF](https://github.com/zencoder/video-js-swf) - The light-weight flash video player that makes flash work like HTML5 video. This allows player skins, plugins, and other features to work with both HTML5 and Flash. - -* [Videojs.com](http://videojs.com) - The public site with helpful tools and information about Video.js. - --- ### Doc Credit This doc was inspired by some great contribution guide examples including [contribute.md template](https://github.com/contribute-md/contribute-md-template), diff --git a/Gruntfile.js b/Gruntfile.js index bdc70c6764..dc93d3541a 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -61,7 +61,7 @@ module.exports = function(grunt) { minified_api: ['test/minified-api.html'] }, watch: { - files: [ 'src/**/*.js', 'test/unit/*.js' ], + files: [ 'src/**/*', 'test/unit/*.js', 'Gruntfile.js' ], tasks: 'dev' }, copy: { @@ -111,6 +111,13 @@ module.exports = function(grunt) { dest: 'build/files/', ext: '.min.css' } + }, + less: { + dev: { + files: { + 'build/files/video-js.css': 'src/css/video-js.less' + } + } } }); @@ -120,14 +127,15 @@ module.exports = function(grunt) { grunt.loadNpmTasks('grunt-contrib-clean'); grunt.loadNpmTasks('grunt-contrib-copy'); grunt.loadNpmTasks('grunt-contrib-cssmin'); + grunt.loadNpmTasks('grunt-contrib-less'); grunt.loadNpmTasks('grunt-s3'); grunt.loadNpmTasks('contribflow'); // Default task. - grunt.registerTask('default', ['jshint', 'build', 'minify', 'dist']); + grunt.registerTask('default', ['jshint', 'less', 'build', 'minify', 'dist']); // Development watch task - grunt.registerTask('dev', ['jshint', 'build', 'qunit:source']); - grunt.registerTask('test', ['jshint', 'build', 'minify', 'qunit']); + grunt.registerTask('dev', ['jshint', 'less', 'build', 'qunit:source']); + grunt.registerTask('test', ['jshint', 'less', 'build', 'minify', 'qunit']); var fs = require('fs'), gzip = require('zlib').gzip; @@ -157,8 +165,7 @@ module.exports = function(grunt) { grunt.file.write('build/files/combined.video.js', combined); // Copy over other files - grunt.file.copy('src/css/video-js.css', 'build/files/video-js.css'); - grunt.file.copy('src/css/video-js.png', 'build/files/video-js.png'); + // grunt.file.copy('src/css/video-js.png', 'build/files/video-js.png'); grunt.file.copy('src/swf/video-js.swf', 'build/files/video-js.swf'); // Inject version number into css file diff --git a/README.md b/README.md index 0d502ef544..10b327b7a5 100644 --- a/README.md +++ b/README.md @@ -1,50 +1,18 @@ -# [Video.js - HTML5 and Flash Video Player](http://videojs.com) [![Build Status](https://travis-ci.org/zencoder/video-js.png?branch=master)](https://travis-ci.org/zencoder/video-js) +# [Video.js - HTML5 Video Player](http://videojs.com) [![Build Status](https://travis-ci.org/zencoder/video-js.png?branch=master)](https://travis-ci.org/zencoder/video-js) -Visit the main site at [videojs.com](http://videojs.com) for download options and instructions. +> Video.js is a web video player built from the ground up for an HTML5 world. It supports HTML5 and Flash video, as well as YouTube and Vimeo (through [plugins](https://github.com/videojs/video.js/wiki/Plugins)). It supports video playback on desktops and mobile devices. This project was started mid 2010, and the player is now used on over 50,000 websites. -### PLEASE EXCUSE OUR DUST - -We're finishing up a big overhaul of the libary which includes - -* Closure compiler advanced mode support for drastically better minification over previous versions -* Flashy new automated builds and test using node.js and grunt - -Check out our [contributing guide](https://github.com/zencoder/video-js/blob/master/CONTRIBUTING.md) for info on building a local version. - -## About - -Video.js was built to provide a fast and easy way to embed and work with video in a web page. -It was built from the ground up with the assumption that HTML5 is the future of web video, however it supports Flash equally well for older browsers and for advanced features not yet supported in HTML5. - -Some of the focuses of Video.js are: - -- Universal browser and device support -- Fast player loading -- Easily skinned (themed/chromed) using just CSS -- A JavaScript API for controlling the video that works consistently across video platforms (HTML5, Flash, and soon other players like youtube) as well as devices - -## Getting Started - -Check out our [getting started guide](http://videojs.com/#section5). +Visit [videojs.com](http://videojs.com) for an overview, download options, and instructions on how to use the player on your site. ## Contributing +Video.js is a free and open source library, and we appreciate any help you're willing to give. Check out the [contributing guide](CONTRIBUTING.md). -Check out our [contributing guide](https://github.com/zencoder/video-js/blob/master/CONTRIBUTING.md). +## Building your own Video.js from source +To build your own custom version read the section on [contributing code](CONTRIBUTING.md#contributing-code) and ["Building your own copy"](CONTRIBUTING.md#building-your-own-copy-of-videojs) in the contributing guide. ## License -Copyright 2013 Brightcove, Inc. - - Licensed under the Apache License, Version 2.0 (the "License"); - you may not use this file except in compliance with the License. - You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - - Unless required by applicable law or agreed to in writing, software - distributed under the License is distributed on an "AS IS" BASIS, - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - See the License for the specific language governing permissions and - limitations under the License. +Video.js is licensed under the Apache License, Version 2.0. [View the license file](LICENSE) +Copyright 2013 Brightcove, Inc. diff --git a/VERSION.yml b/VERSION.yml deleted file mode 100644 index 7a7c5ae96b..0000000000 --- a/VERSION.yml +++ /dev/null @@ -1,5 +0,0 @@ ---- -major: 3 -minor: 2 -patch: 3 -pre: diff --git a/docs/api.md b/docs/api.md index 56b460845a..dc4bec0823 100644 --- a/docs/api.md +++ b/docs/api.md @@ -186,6 +186,14 @@ myPlayer.cancelFullScreen(); ``` +### dispose() ### +Destroys the video player and does any necessary cleanup. This is especially helpful if you are dynamically adding and removing videos to/from the DOM. Use after removing videos from the DOM. +```js +myPlayer.dispose(); +``` + + + Events ------ You can attach event listeners to the player similarly to how you would for a video element. diff --git a/docs/index.md b/docs/index.md index 2704fc06c3..c3d52335a3 100644 --- a/docs/index.md +++ b/docs/index.md @@ -2,7 +2,7 @@

Video.js Documentation

-The Video.js documentation is here to help you setup and use the player. These docs can be found and contributed to in the [Video.js library repository](https://github.com/zencoder/video-js/tree/master/docs). +The Video.js documentation is here to help you setup and use the player. These docs can be found and contributed to in the [Video.js library repository](https://github.com/videojs/video.js/tree/master/docs). ## Getting Started @@ -24,4 +24,4 @@ The Video.js documentation is here to help you setup and use the player. These d ## Resources -* [Glossary](glossary.md) - Some helpful definitions. \ No newline at end of file +* [Glossary](glossary.md) - Some helpful definitions. diff --git a/docs/setup.md b/docs/setup.md index a365decaff..0c6190150a 100644 --- a/docs/setup.md +++ b/docs/setup.md @@ -12,8 +12,8 @@ You can download the Video.js source and host it on your own servers, or use the ### CDN Version ### ```html - - + + ``` ### Self Hosted. ### diff --git a/docs/skins.md b/docs/skins.md index a6155af8bf..c64fcfbea4 100644 --- a/docs/skins.md +++ b/docs/skins.md @@ -1,21 +1,23 @@ Skins ===== -The default Video.js skin is made using HTML and CSS, so there's no need to learn a complicated skinning language to update colors or even create an entirely new skin. New in version 3.0 is the use of a sprites image file (video-js.png). The image allows for a little bit more classy design, as well as compatibility with older versions of IE now that the HTML skin also shows when Flash is used for those browsers. +The default Video.js skin is made using HTML and CSS, so there's no need to learn a complicated skinning language to update colors or even create an entirely new skin. -You can view the uncompressed CSS for the default skin by downloading the latest version of Video.js or viewing [the source version](https://github.com/videojs/video.js/blob/master/src/css/video-js.css) on Github. +New in version 4.0 is the use of font icons. All of the icons (play, pause, etc.) use the new custom font, which allows the icons to be scaled and colored just like any other text font. -You can either override styles in the default skin: +The easiest way to try this out is by using the [player skin designer](http://designer.videojs.com/). + +When you create a new skin, you can either override styles in the default skin: ```css .vjs-default-skin .vjs-play-progress { background: #900; } ``` -Or remove the 'vjs-default-skin' class from the video tag and create your own skin. +Or remove the 'vjs-default-skin' class from the video tag and create a new skin from scratch. ```html