Permalink
Browse files

Sepia, Blur, and other effects (v4.0.14)

  • Loading branch information...
1 parent 788ca61 commit 07c8570c97c48f5cb563170ef62027bab33763e9 Doug Anarino committed May 15, 2016
Showing 627 changed files with 35,686 additions and 118,336 deletions.
View
@@ -8,8 +8,8 @@ root = true
[*]
# Change these settings to your own preference
-indent_style = tab
-indent_size = 1
+indent_style = space
+indent_size = 2
# We recommend you to keep these unchanged
end_of_line = lf
View
@@ -7,4 +7,5 @@ bower_components/jquery*
app/user/
tmp
.DS_Store
-.idea
+.idea
+log
View
@@ -26,32 +26,3 @@ COPY config/index.html /var/www/html/
# install entire project at root
COPY . /var/www/html/angular-moviemasher/
-
-# EVERYTHING BELOW CAN BE UNCOMMENTED TO PRODUCE DEV IMAGE
-## # install node
-## RUN apt-get update && apt-get install -y wget build-essential python
-##
-## # install Node.js
-## RUN \
-## cd /tmp && \
-## wget http://nodejs.org/dist/node-latest.tar.gz && \
-## tar xvzf node-latest.tar.gz && \
-## rm -f node-latest.tar.gz && \
-## cd node-v* && \
-## ./configure && \
-## CXX="g++ -Wno-unused-local-typedefs" make && \
-## CXX="g++ -Wno-unused-local-typedefs" make install && \
-## cd /tmp && \
-## rm -rf /tmp/node-v*
-##
-## # install bower and grunt
-## RUN \
-## npm update -g npm && \
-## npm install -g bower grunt-cli
-##
-## # install utilities needed by composer
-## RUN apt-get update && apt-get install -y git
-## RUN apt-get update && apt-get install -y zlib1g-dev && docker-php-ext-install zip
-##
-## # install composer PHP dependency manager globally
-## RUN curl -sS https://getcomposer.org/installer | php -- --install-dir=/usr/local/bin --filename=composer
View
@@ -40,7 +40,10 @@ module.exports = function(grunt) {
src: 'Gruntfile.js'
},
moviemasher: {
- src: '<%= concat.moviemasher.dest %>'
+ src: 'src/**/*.js'
+ },
+ modules: {
+ src: 'app/module/**/*.json'
}
},
uglify: {
@@ -54,5 +57,5 @@ module.exports = function(grunt) {
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-uglify');
- grunt.registerTask('default', ['concat', 'jshint', 'uglify']);
+ grunt.registerTask('default', ['jshint', 'concat', 'uglify']);
};
View
@@ -2,7 +2,7 @@
**[moviemasher.js](https://github.com/moviemasher/moviemasher.js "stands below angular-moviemasher, providing audiovisual playback handling and edit support in a web browser") | angular-moviemasher | [moviemasher.rb](https://github.com/moviemasher/moviemasher.rb "sits behind angular-moviemasher, providing processor intensive video transcoding services through a simple API")**
*Example deployment of moviemasher.js and moviemasher.rb utilizing AngularJS, Bootstrap and PHP*
-#angular-moviemasher
+# angular-moviemasher
Use angular-moviemasher to integrate audio/video editing features into your existing web site or as a starting point for further development. It builds upon both the moviemasher.js and moviemasher.rb projects, as well as the popular PHP middleware layer and AngularJS+Bootstrap for the UI (only Bootstrap's CSS is used, so no reliance on jQuery).
@@ -29,19 +29,17 @@ Additionally, the Movie Masher AMI is available in Marketplace and includes all
### Docker Usage
The [`moviemasher/angular-moviemasher`](https://registry.hub.docker.com/u/moviemasher/angular-moviemasher/) image on [docker.com](https://docker.com) is based off the official [`php:apache`](https://registry.hub.docker.com/_/php/) image, adding some configuration and copying this project into web root. The Dockerfile contains a **VOLUME** instruction for each directory it works with.
-- To make the web site available at your docker IP on port 8080:
+To make Movie Masher available at your docker IP on port 8080:
- `docker run -d -p 8080:80 --name=angular moviemasher/angular-moviemasher`
+`docker-compose --file config/docker/development/docker-compose.yml up -d`
- You'll need to subsequently execute `docker stop angular` and `docker rm angular` to stop serving the web site and remove the container created.
+This also runs the [`moviemasher/moviemasher.rb`](https://registry.hub.docker.com/u/moviemasher/moviemasher.rb/) image from [docker.com](https://docker.com), preconfigured to share volumes so uploading and rendering work as expected.
-All functions should be available at this juncture, except uploading and rendering which will trigger the saving of a job description file into **queue_directory**. Because there is a **VOLUME** instruction for this directory, it can be mounted by other containers - we'll attach it to one run from the [`moviemasher/moviemasher.rb`](https://registry.hub.docker.com/u/moviemasher/moviemasher.rb/) image which will handle the actual transcoding operation.
+To stop and remove the container:
-- To process queued jobs using shared volumes:
+`docker-compose --file config/docker/development/docker-compose.yml kill`
- `docker run -d -t --volumes-from=angular --name=moviemasher moviemasher/moviemasher.rb process_loop`
-
- Note the `t` switch - it's required for Ecasound to function properly. You'll need to subsequently execute `docker stop moviemasher` and `docker rm moviemasher` to stop queue processing and remove the container created. See the [moviemasher.rb](https://github.com/moviemasher/moviemasher.rb) project for other ways to run its image.
+`docker-compose --file config/docker/development/docker-compose.yml rm -fv`
### How to Install on Your Web Host
@@ -66,7 +64,9 @@ It's important to remember this project is just an *example* deployment and not
### Porting from PHP to Other Languages
Each of the PHP endpoints requested by the JavaScript is configurable within the index.html file, so it can be overriden to point to scripts in other languages. The __default_config variable declaration near the top of the angular-moviemasher.js script file contains the PHP endpoints - note the nesting paths for the ones you want to change. These paths can be dash delimited and used as attributes within the main amm-ui tag to override values. For instance, the following will cause just the media metadata to be loaded from a Coldfusion endpoint:
-`<div class='amm-ui' amm-rest-media-search-url='cfm/media.cfm?group=:group'></div>`
+```html
+<div class='amm-ui' amm-rest-media-search-url='cfm/media.cfm?group=:group'></div>
+```
### Included Requirements
- angular
@@ -86,22 +86,24 @@ Please join in the shareable economy by gifting your efforts towards improving t
### Developer Setup
Various components of angular-moviemasher can be updated or rebuilt after installing git, npm, bower, grunt and composer. Once applications are installed `cd` to project directory and execute:
+- Applications: npm, bower, grunt, composer
+- Project: [moviemasher.js](https://github.com/moviemasher/moviemasher.js)
+
1. npm install
-2. bower install
-3. grunt
-4. cd app/php/service/aws
-5. composer install
+1. bower install --production
+1. grunt
+1. cd app/php/service/aws
+1. composer install
-Or if docker is being used, a helpful development version of the image can be built by uncommenting the last section in Dockerfile. These commands add the components.
-- To build and run a development image, `cd` to project directory and execute:
+Or if docker is being used...
- `sed -i '' 's/^## //' Dockerfile`
+`docker-compose --file config/docker/grunt/docker-compose.yml run --rm angularmoviemasher bower install --production`
- `docker build --tag="moviemasher/angular-moviemaser:dev" .`
+`docker-compose --file config/docker/grunt/docker-compose.yml run --rm angularmoviemasher grunt`
- `docker run -d -v $(pwd):/var/www/html/angular-moviemasher --name=angular moviemasher/angular-moviemaser:dev`
+`docker-compose --file config/docker/composer/docker-compose.yml run --rm angularmoviemasher composer install`
##### Known issues in this version
- timeline allows clips to be positioned atop one another
@@ -120,4 +122,3 @@ Or if docker is being used, a helpful development version of the image can be bu
- The `export_audio_frequency` key in moviemasher.ini has been renamed `export_audio_rate`.
- The new `mash` key in mash inputs should be used for embedded mashes
- The `source` key in mash inputs should only contain a source object
-
View
@@ -67,7 +67,7 @@
}
.amm-browser-media-label {
background-color: rgba(255,255,255,0.5);
- color: #333333;
+ color: #333333;
padding: 5px;
position:absolute;
right:0px;
@@ -218,7 +218,7 @@ amm-timeline-rule-back {
background-color: #000;
background-image: -webkit-linear-gradient(bottom, #000 0%, #3a3a3a 50%);
background-image: linear-gradient(bottom, #000 0%, #3a3a3a 50%);
-}
+}
amm-timeline-rule-icon {
color:aqua;
font-size: 20px;
@@ -274,7 +274,7 @@ amm-timeline-rule-line {
}
.amm-timeline-clip-label {
background-color: rgba(255,255,255,0.5);
- color: #333333;
+ color: #333333;
padding: 5px;
position:absolute;
right:0px;
@@ -286,7 +286,7 @@ amm-timeline-rule-line {
overflow-x:hidden;
white-space: nowrap;
text-overflow: ellipsis;
-}
+}
.amm-container{
position:relative;
height:100%;
@@ -300,7 +300,7 @@ amm-timeline-rule-line {
white-space: nowrap;
text-overflow: ellipsis;
overflow-x:hidden;
-
+
position: absolute;
height:34px;
line-height: 30px;
@@ -360,16 +360,12 @@ amm-timeline-rule-line {
.amm-colorpicker-background {
display:inline-block;
background-color: #eee;
- background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black),
+ background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black),
linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
background-size:10px 10px;
background-position:0 0, 5px 5px;
background-repeat: repeat;
}
-/* fix for alpha sizing issue */
-.colorpicker.alpha {
- min-width: 148px;
-}
.pixelated {
image-rendering: -moz-crisp-edges;
@@ -385,7 +381,7 @@ amm-timeline-rule-line {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
-}
+}
/* clear: left;
text-align: right;
*/
@@ -421,15 +417,15 @@ amm-timeline-rule-line {
border: solid black 1px;
margin: 10px 100% 0px 10px;
background-color: darkgray;
- background-image: linear-gradient(45deg, gray 25%, transparent 25%, transparent 75%, gray 50%, gray 75%),
+ background-image: linear-gradient(45deg, gray 25%, transparent 25%, transparent 75%, gray 50%, gray 75%),
linear-gradient(45deg, gray 25%, transparent 25%, transparent 75%, gray 50%, gray 75%);
background-size:10px 10px;
background-position:0 0, 5px 5px;
background-repeat: repeat;
}
.amm-canvas-container > span > canvas {
margin-bottom:-2px;
-
+
}
.amm-canvas-container > span:after {
content: attr(alt);
@@ -443,7 +439,7 @@ amm-timeline-rule-line {
.amm-inspector-row {
margin-bottom: 6px;
- clear: right;
+ clear: right;
}
.amm-inspector-row > input,
.amm-inspector-row > textarea {
View
@@ -8,7 +8,7 @@
<title>AngularJS Example :: Movie Masher</title>
<script src="../bower_components/angular/angular.min.js"></script>
<script src="../bower_components/angular-resource/angular-resource.min.js"></script>
- <script src="../bower_components/angular-file-upload/angular-file-upload.min.js"></script>
+ <script src="../bower_components/angular-file-upload/dist/angular-file-upload.min.js"></script>
<script src="../bower_components/angular-bootstrap-colorpicker/js/bootstrap-colorpicker-module.js"></script>
<script src="../bower_components/opentype.js/dist/opentype.min.js"></script>
<script src="../bower_components/script.js/dist/script.min.js"></script>
View
@@ -8,7 +8,7 @@
<title>Source :: AngularJS Example :: Movie Masher</title>
<script src="../bower_components/angular/angular.js"></script>
<script src="../bower_components/angular-resource/angular-resource.js"></script>
- <script src="../bower_components/angular-file-upload/angular-file-upload.js"></script>
+ <script src="../bower_components/angular-file-upload/dist/angular-file-upload.js"></script>
<script src="../bower_components/angular-bootstrap-colorpicker/js/bootstrap-colorpicker-module.js"></script>
<script src="../bower_components/opentype.js/dist/opentype.js"></script>
<script src="../bower_components/script.js/dist/script.js"></script>
@@ -3,6 +3,6 @@
<div class='amm-inspector-row'>
<label>Color:</label>
<div class="amm-colorpicker">
- <button colorpicker="rgb" ng-style="{'background-color':$amm.player.selectedClip.color}" type="button" colorpicker-parent="true" ng-change="$amm.player.change('color')" ng-model="$amm.player.selectedClip.color"></button>
+ <button colorpicker="rgb" ng-style="{'background-color':$amm.player.selectedClip.color}" type="button" ng-change="$amm.player.change('color')" ng-model="$amm.player.selectedClip.color"></button>
</div>
</div>
@@ -0,0 +1,77 @@
+{
+ "label": "Grayscale",
+ "type": "effect",
+ "id": "com.moviemasher.effect.grayscale",
+ "properties": {},
+ "filters": [
+ {
+ "id": "colorchannelmixer",
+ "parameters":[
+ {
+ "name": "rr",
+ "value": 0.3
+ },
+ {
+ "name": "rg",
+ "value": 0.4
+ },
+ {
+ "name": "rb",
+ "value": 0.3
+ },
+ {
+ "name": "ra",
+ "value": 0
+ },
+ {
+ "name": "gr",
+ "value": 0.3
+ },
+ {
+ "name": "gg",
+ "value": 0.4
+ },
+ {
+ "name": "gb",
+ "value": 0.3
+ },
+ {
+ "name": "ga",
+ "value": 0
+ },
+ {
+ "name": "br",
+ "value": 0.3
+ },
+ {
+ "name": "bg",
+ "value": 0.4
+ },
+ {
+ "name": "bb",
+ "value": 0.3
+ },
+ {
+ "name": "ba",
+ "value": 0
+ },
+ {
+ "name": "ar",
+ "value": 0
+ },
+ {
+ "name": "ag",
+ "value": 0
+ },
+ {
+ "name": "ab",
+ "value": 0
+ },
+ {
+ "name": "aa",
+ "value": 1
+ }
+ ]
+ }
+ ]
+}
Oops, something went wrong.

0 comments on commit 07c8570

Please sign in to comment.