Merge branch 'release/1.2.0' into v1

Author: khalwat

CHANGELOG.md

@@ -1,5 +1,14 @@
 # Transcoder Changelog
 
+## 1.2.0 - 2018.08.22
+### Added
+* Added the ability to encode to animated `.gif` files
+* Added multiple output paths and URLs for different media types
+
+### Changed
+* Moved to a modern webpack build config for the AdminCP
+* Added install confetti
+
 ## 1.1.3 - 2018.03.02
 ### Changed
 * Fixed deprecation errors from Craft CMS 3 RC13

README.md

@@ -8,11 +8,11 @@ Transcode video & audio files to various formats, and provide video thumbnails
 
 Related: [Transcoder for Craft 2.x](https://github.com/nystudio107/transcoder)
 
-**Note**: _This plugin will cost $59.00 once Craft 3 GA is released._
+**Note**: _This plugin costs $59.00 and is available in the Craft CMS 3 plugin store._
 
 ## Requirements
 
-This plugin requires Craft CMS 3.0.0-RC1 or later.
+This plugin requires Craft CMS 3.0.0 or later.
 
 ## Installation
 
@@ -36,7 +36,7 @@ If you have managed hosting, contact your sysadmin to get `ffmpeg` installed.
 
 ## Transcoder Overview
 
-The Transcoder plugin allows you to take any video (local or remote), and transcode it into any size, bitrate, framerate, and save it out as a web-ready video in a variety of file formats.
+The Transcoder plugin allows you to transcode any video or animated gif (local or remote) to any size, bitrate, framerate, and save it out as a web-ready video in a variety of file formats.
 
 It can also transcode audio files to any bitrate & sample rate, to a variety of file formats. It can even extract audio tracks from video files.
 
@@ -181,6 +181,83 @@ The above example would cause it to not change the audio of the source audio fil
 
 The file format setting `audioEncoder` is preset to what you'll need to generate `mp3` audio files, but it can also generate `aac`, `ogg`, or any other format that `ffmpeg` supports. See the `config.php` file for details
 
+### Generating a Transcoded Video
+
+To generate a transcoded video, do the following:
+
+    {% set transVideoUrl = craft.transcoder.getVideoUrl('/home/vagrant/sites/nystudio107/public/oceans.mp4', {
+        "videoFrameRate": 20,
+        "videoBitRate": "500k",
+        "width": 720,
+        "height": 480
+    }) %}
+
+You can also pass in an URL:
+
+    {% set transVideoUrl = craft.transcoder.getVideoUrl('http://vjs.zencdn.net/v/oceans.mp4', {
+        "videoFrameRate": 20,
+        "videoBitRate": "500k",
+        "width": 720,
+        "height": 480
+    }) %}
+
+You can also pass in an `Asset`:
+
+    {% set myAsset = entry.someAsset.first() %}
+    {% set transVideoUrl = craft.transcoder.getVideoUrl(myAsset, {
+        "videoFrameRate": 20,
+        "videoBitRate": "500k",
+        "width": 720,
+        "height": 480
+    }) %}
+
+It will return to you a URL to the transcoded video if it already exists, or if it doesn't exist, it will return `""` and kick off the transcoding process (which can be quite lengthy for long videos).
+
+In the array you pass in, the default values are used if the key/value pair does not exist:
+
+    {
+        "videoEncoder" => "h264",
+        "videoBitRate" => "800k",
+        "videoFrameRate" => 15,
+        "aspectRatio" => "letterbox",
+        "sharpen" => true,
+    }
+
+These default values come from the `config.php` file.
+
+If you want to have the Transcoder not change a parameter, pass in an empty value in the key/value pair, e.g.:
+
+    {% set transVideoUrl = craft.transcoder.getVideoUrl('/home/vagrant/sites/nystudio107/public/oceans.mp4', {
+        "frameRate": "",
+        "bitRate": ""
+    }) %}
+
+The above example would cause it to not change the frameRate or bitRate of the source video (not recommended for client-proofing purposes).
+
+The `aspectRatio` parameter lets you control how the video aspect ratio is maintained when it is scaled:
+
+`none` results in the aspect ratio of the original video not being maintained, and the video scaled to the dimensions passed in:
+
+![Screenshot](resources/screenshots/oceans_20s_300w_200h_none.jpg)
+
+`crop` scales the video up to maintain the original aspect ratio, and then crops it so that it's full-frame:
+
+![Screenshot](resources/screenshots/oceans_20s_300w_200h_crop.jpg)
+
+`letterbox` scales the video to fit the new frame, putting a letterboxed or pillarboxed border to pad it:
+
+![Screenshot](resources/screenshots/oceans_20s_300w_200h_letterbox.jpg)
+
+You can control the color of the letterboxed area (it's `black` by default) via the `letterboxColor` option. It can be either a semantic color name, or a hexcode color, e.g.: `0xC0C0C0`
+
+The `sharpen` option determines whether an unsharp mask filter should be applied to the scaled video.
+
+The file format setting `videoEncoder` is preset to what you'll need to generate `h264` videos, but it can also generate `webm` videos, or any other format that `ffmpeg` supports. See the `config.php` file for details
+
+![Screenshot](resources/screenshots/admin-cp-video-thumbnails.png)
+
+Transcoder will also automatically add video thumbnails in the AdminCP Asset index.
+
 ### Getting Transcoding Progress
 
 Transcoding of video/audio files can take quite a bit of time, so Transcoder provides you with a way to get the status of any currently running transcoding operation via `craft.transcoder.getVideoProgressUrl()` or `craft.transcoder.getAudioProgressUrl()`. For example:

composer.json

@@ -2,13 +2,19 @@
     "name": "nystudio107/craft-transcoder",
     "description": "Transcode video & audio files to various formats, and provide video thumbnails",
     "type": "craft-plugin",
-    "version": "1.1.3",
+    "version": "1.2.0",
     "keywords": [
         "craft",
         "cms",
         "craftcms",
         "craft-plugin",
-        "transcoder"
+        "transcoder",
+        "transcode",
+        "video",
+        "audio",
+        "gif",
+        "convert",
+        "format"
     ],
     "support": {
         "docs": "https://github.com/nystudio107/craft-transcoder/blob/v1/README.md",
@@ -22,7 +28,7 @@
         }
     ],
     "require": {
-        "craftcms/cms": "^3.0.0-RC9",
+        "craftcms/cms": "^3.0.0",
         "mikehaertl/php-shellcommand": "~1.2"
     },
     "autoload": {

package.json

@@ -0,0 +1,143 @@
+{
+    "name": "transcoder",
+    "version": "1.0.0",
+    "description": "Transcode video & audio files to various formats, and provide video thumbnails",
+    "copyright": "nystudio107",
+    "main": "index.js",
+    "scripts": {
+        "dev": "webpack --config webpack.dev.js --progress --hide-modules",
+        "watch": "webpack --config webpack.dev.js --progress --watch --hide-modules",
+        "build": "webpack --config webpack.prod.js"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/nystudio107/craft-transcoder.git"
+    },
+    "author": "andrew@nystudio107.com",
+    "license": "proprietary",
+    "bugs": {
+        "url": "https://github.com/nystudio107/craft-transcoder/issues"
+    },
+    "homepage": "https://github.com/nystudio107/craft-transcoder",
+    "paths": {
+        "src": {
+            "base": "./src/assetbundles/transcoder/src/",
+            "js": "./src/assetbundles/transcoder/src/js/",
+            "css": "./src/assetbundles/transcoder/src/css/"
+        },
+        "dist": {
+            "base": "./src/assetbundles/transcoder/dist/",
+            "public": "/cpresources/transcoder/",
+            "clean": [
+                "./js",
+                "./css"
+            ]
+        },
+        "copyFiles": [
+        ],
+        "manifest": {
+            "basePath": "",
+            "template": {
+                "twigCss": "./src/templates/_src/include-css-module.twig",
+                "twigModern": "./src/templates/_src/include-modern-module.twig",
+                "twigLegacy": "./src/templates/_src/include-legacy-module.twig"
+            },
+            "filename": {
+                "twigCss": "./src/templates/_includes/include-css-module.twig",
+                "twigModern": "./src/templates/_includes/include-modern-module.twig",
+                "twigLegacy": "./src/templates/_includes/include-legacy-module.twig"
+            }
+        },
+        "templates": "./src/templates/"
+    },
+    "entries": {
+        "transcoder": "Transcoder.js",
+        "welcome": "Welcome.js"
+    },
+    "babelConfig": {
+        "legacyBrowsers": [
+            "> 1%",
+            "last 2 versions",
+            "Firefox ESR"
+        ],
+        "modernBrowsers": [
+            "last 2 Chrome versions",
+            "not Chrome < 60",
+            "last 2 Safari versions",
+            "not Safari < 10.1",
+            "last 2 iOS versions",
+            "not iOS < 10.3",
+            "last 2 Firefox versions",
+            "not Firefox < 54",
+            "last 2 Edge versions",
+            "not Edge < 15"
+        ]
+    },
+    "purgeCss": {
+        "paths": [
+            "./src/templates/**/*.{twig,html}"
+        ],
+        "whitelist": [
+            "../css/components.pcss"
+        ],
+        "whitelistPatterns": [],
+        "extensions": [
+            "html",
+            "js",
+            "twig",
+            "vue"
+        ]
+    },
+    "urls": {},
+    "vars": {
+        "cssName": "transcoder.css",
+        "jsName": "transcoder.js"
+    },
+    "devDependencies": {
+        "autoprefixer": "^8.1.0",
+        "babel-core": "^6.26.0",
+        "babel-loader": "^7.1.4",
+        "babel-plugin-syntax-dynamic-import": "^6.18.0",
+        "babel-plugin-transform-runtime": "^6.23.0",
+        "babel-polyfill": "^6.26.0",
+        "babel-preset-env": "^1.7.0",
+        "clean-webpack-plugin": "^0.1.19",
+        "copy-webpack-plugin": "^4.5.1",
+        "css-loader": "^0.28.10",
+        "cssnano": "^3.10.0",
+        "extract-text-webpack-plugin": "^4.0.0-beta.0",
+        "file-loader": "^1.1.11",
+        "git-rev-sync": "^1.10.0",
+        "glob-all": "^3.1.0",
+        "html-webpack-plugin": "^3.2.0",
+        "ignore-loader": "^0.1.2",
+        "mini-css-extract-plugin": "^0.4.0",
+        "moment": "^2.21.0",
+        "optimize-css-assets-webpack-plugin": "^4.0.3",
+        "postcss": "^6.0.19",
+        "postcss-extend": "^1.0.5",
+        "postcss-hexrgba": "^1.0.0",
+        "postcss-import": "^11.1.0",
+        "postcss-loader": "^2.1.1",
+        "postcss-nested": "^3.0.0",
+        "postcss-nested-ancestors": "^1.0.0",
+        "postcss-simple-vars": "^4.1.0",
+        "purgecss-webpack-plugin": "^1.2.0",
+        "purgecss-whitelister": "^2.1.0",
+        "resolve-url-loader": "^2.3.0",
+        "tailwindcss": "^0.6.4",
+        "uglifyjs-webpack-plugin": "^1.2.7",
+        "vue-loader": "^15.3.0",
+        "vue-style-loader": "^4.1.2",
+        "vue-template-compiler": "^2.5.17",
+        "webpack": "^4.1.1",
+        "webpack-bundle-analyzer": "^2.13.1",
+        "webpack-cli": "^2.0.11",
+        "webpack-manifest-plugin": "^2.0.3",
+        "webpack-merge": "^4.1.2"
+    },
+    "dependencies": {
+        "vue": "^2.5.17",
+        "vue-confetti": "^0.4.1"
+    }
+}

postcss.config.js

@@ -0,0 +1,12 @@
+module.exports = {
+    plugins: [
+    	require('postcss-import'),
+    	require('postcss-extend'),
+    	require('postcss-simple-vars'),
+    	require('postcss-nested-ancestors'),
+    	require('postcss-nested'),
+    	require('postcss-hexrgba'),
+    	require('autoprefixer'),
+        require('tailwindcss')('./tailwind.config.js')
+    ]
+}