pageflow-embedded-video 0.1.0

data/app/assets/stylesheets/pageflow/embedded_video.css.scss

@@ -0,0 +1,269 @@
+@include pageflow-page-type(embedded_video);
+
+.embedded_video_page {
+  .contentText {
+    margin-top: 40px;
+  }
+
+  .page_header h2 .title {
+    max-width: 500px;
+  }
+
+  .widescreened .contentText {
+    margin-top: 0;
+  }
+
+  .iframe_overlay {
+    .has_mobile_platform & {
+      background-repeat: no-repeat;
+      background-size: cover;
+      background-position: center;
+      overflow: hidden;
+
+      &:before {
+        position: absolute;
+        top: 0;
+        width: 101%;
+        height: 101%;
+        content: "";
+        background-color: black;
+        opacity: 0.5;
+      }
+
+      &:after {
+        font-family: 'FontAwesome';
+        color: white;
+        font-size: 70px;
+        position: absolute;
+        display: block;
+        width: 100%;
+        text-align: center;
+        top: 50%;
+        margin-top: -35px;
+      }
+
+      &.youtube:after {
+        content: "\f167";
+      }
+
+      &.vimeo:after {
+        content: "\f194";
+      }
+
+      pointer-events: all;
+      height: initial;
+      padding-top: 56.25%;
+      position: relative;
+
+      @include phone {
+        height: auto;
+        padding-top: 62.5%;
+      }
+
+      iframe {
+        position: absolute;
+        top: 0;
+        left: 0;
+      }
+
+      &.active {
+        iframe {
+          visibility: visible;
+          opacity: 1;
+        }
+      }
+    }
+  }
+
+  .iframe_wrapper {
+    pointer-events: all;
+    height: initial;
+    padding-top: 56.25%;
+    position: relative;
+
+    iframe {
+      position: absolute;
+      top: 0;
+      left: 0;
+    }
+
+    &.widescreened {
+      position: absolute;
+      width: 45%;
+      max-height: 600px;
+      right: 10%;
+      margin-top: 0;
+      top: 50%;
+      @include transform(translate(0,-50%));
+      margin-bottom: 0;
+      z-index: 1;
+      padding-top: 33%;
+    }
+
+    &:before {
+      padding: 10px;
+      background-color: #191919;
+      background-color: rgba(25,25,25, 0.9);
+      box-shadow: rgba(0,0,0,0.5) 0 0 3px 0px;
+      content: "";
+      position: absolute;
+      top: -10px;
+      left: -10px;
+      width: 100%;
+      z-index: -1;
+      height: 100%;
+    }
+
+    .text_position_right &.widescreened {
+      right: auto;
+      left: 8%;
+      width: 42%;
+    }
+
+    .bigScreen & {
+      position: absolute;
+      width: 86% !important;
+      height: 87%;
+      top: 10%;
+      left: 5% !important;
+      z-index: 201;
+      margin-top: 0 !important;
+      max-height: none !important;
+    }
+
+    &.active {
+      iframe {
+        visibility: visible;
+        opacity: 1;
+      }
+    }
+  }
+
+  .iframe_container {
+    .close_button {
+      display: none;
+    }
+
+    .has_mobile_platform & {
+      pointer-events: none;
+      height: 0;
+      padding-top: 0;
+      position: relative;
+      overflow: hidden;
+      opacity: 0;
+      @include transition(opacity 0.5s);
+      z-index: 1;
+
+      &:before {
+        content: "";
+        display: block;
+        top: 0;
+        left: 0;
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        background-color: black;
+        opacity: 0.9;
+      }
+
+      &.show {
+        width: 100%;
+        height: 100%;
+        pointer-events: all;
+        overflow: hidden;
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        opacity: 1;
+
+        .close_button {
+          display: block;
+        }
+      }
+
+      .iframe_wrapper {
+        @include transform(translate(0, -50%));
+        width: initial;
+        top: 50%;
+        margin-right: 85px;
+
+        @media screen and (orientation: landscape) {
+          top: 60px;
+          padding-top: 0;
+          bottom: 60px;
+          position: absolute;
+          left: 0;
+          right: 0;
+          margin-bottom: 0;
+          @include transform(none);
+        }
+
+        @include mobile {
+          margin-right: 0;
+        }
+
+        &:before {
+          content: initial;
+        }
+      }
+    }
+  }
+
+  .video_caption {
+    color: white;
+    margin-top: 20px;
+    z-index: 0;
+    position: relative;
+    display: block;
+    margin-bottom: 40px;
+
+    &:before {
+      content: "";
+      display: block;
+      position: absolute;
+      padding: 10px;
+      background-color: black;
+      background-color: rgba(0,0,0,0.9);
+      top: -10px;
+      left: -10px;
+      width: 100%;
+      z-index: -1;
+      height: 100%;
+    }
+
+    .inverted & {
+      color: black;
+      background-color: white;
+    }
+
+    .has_mobile_platform & {
+      padding: 15px;
+      margin-top: 0;
+
+      &:before {
+        display: none;
+      }
+    }
+  }
+
+  .widescreened .video_caption {
+    position: absolute;
+    top: 100%;
+    width: 100%;
+    margin-bottom: 0;
+  }
+}
+
+.overview .ov_page {
+  &.embedded_video .pictogram {
+    background-image: image-url('pageflow/ov-embedded_video.png');
+  }
+}
+
+.navigation_mobile {
+  .embedded_video:after {
+    background-image: image-url('pageflow/embedded_video_sprite.png');
+  }
+}

data/app/views/pageflow/embedded_video/page.html.erb

@@ -0,0 +1,35 @@
+<div class="blackLayer"></div>
+<div class="content_and_background embedded_video_page">
+
+  <div class="backgroundArea">
+    <%= background_image_div(configuration, 'background_image') %>
+    <%= shadow_div :opacity => configuration['gradient_opacity'] %>
+  </div>
+
+  <div class="content">
+    <div class="scroller">
+      <div>
+        <div class="contentWrapper">
+          <div class="page_header">
+            <h2>
+              <span class="tagline"><%= configuration['tagline'] %></span>
+              <span class="title"><%= configuration['title'] %></span>
+              <span class="subtitle"><%= configuration['subtitle'] %></span>
+            </h2>
+            <%= background_image_tag(configuration['background_image_id'], {class: "print_image"}) %>
+          </div>
+          <div class="contentText">
+            <p><%= raw configuration['text'] %></p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="iframe_container">
+      <div class="close_button" tabindex="4" title="<%= t('.close_title') %>"><%= t('.close') %></div>
+      <div class="iframe_wrapper"></div>
+      <% if configuration['video_caption'].present? %>
+        <div class="video_caption"><%= configuration['video_caption'] %></div>
+      <% end %>
+    </div>
+  </div>
+</div>

data/app/views/pageflow/embedded_video/page_type.json.jbuilder

@@ -0,0 +1,2 @@
+json.key_format! camelize: :lower
+json.supported_hosts Pageflow::EmbeddedVideo.config.supported_hosts

data/bin/rails

@@ -0,0 +1,8 @@
+#!/usr/bin/env ruby
+# This command will automatically be run when you run "rails" with Rails 4 gems installed from the root of your application.
+
+ENGINE_ROOT = File.expand_path('../..', __FILE__)
+ENGINE_PATH = File.expand_path('../../lib/pageflow/embedded_video/engine', __FILE__)
+
+require 'rails/all'
+require 'rails/engine/commands'

data/config/locales/de.yml

@@ -0,0 +1,45 @@
+de:
+  activerecord:
+    attributes:
+      pageflow/page:
+        embedded_video_id: Video URL
+        full_width: Gesamte Breite nutzen
+        video_caption: Bildunterschrift
+  pageflow:
+    embedded_video:
+      help_entries:
+        page_type:
+          menu_item: Embedded Video
+          text: ! '# Embedded Video
+
+
+            Bettet ein externes Video von YouTube oder Vimeo ein
+
+
+            Falls Du neben eigenem Filmmaterial auch externe Videos verwenden möchtest, kannst
+
+            Du diese über eine Video-URL integrieren und zudem mit einer Bildunterschrift versehen.
+
+            Aus technischen Gründen wird das Bild in einem Rahmen in die Seite
+
+            eingebunden, der sich der Größe des Bildschirms und dem Textfluss automatisch anpasst, ihn aber nie komplett ausfüllt.
+
+            Deshalb besteht bei diesem Seitentyp die Möglichkeit, ein zusätzliches Hintergrundbild
+
+            einzufügen, beispielsweise um einen visuellen Rahmen zu schaffen.
+
+
+            Es können Videos der beiden Plattformen YouTube und Vimeo verwendet werden.
+
+
+            Typische Anwendungsbeispiele: Einbinden von Playlists, Trailern, Kurzfilmen'
+      page:
+        close: Schließen
+        close_title: Embedded Video verlassen
+      page_type_category_name: Video
+      page_type_description: Bettet ein externes Video von YouTube oder Vimeo ein
+      page_type_name: Embedded Video
+    ui:
+      configuration_editor:
+        tabs:
+          topic: Inhalt

data/config/locales/en.yml

@@ -0,0 +1,34 @@
+en:
+  activerecord:
+    attributes:
+      pageflow/page:
+        embedded_video_id: Video URL
+        full_width: Full width
+        video_caption: Caption
+  pageflow:
+    embedded_video:
+      help_entries:
+        page_type:
+          menu_item: Embedded Video
+          text: ! '# Embedded Video
+
+
+            Embeds an external video from Youtube or Vimeo
+
+
+            If you want to use external videos beside your own material, you can embed the video-URL and give it a caption. For technical reasons the video is embedded in a frame, that is fitting only parts of the  screen. You can therefore add a background-image, which creates a visual frame. You can use videos from Youtube and Vimeo.
+
+
+            Examples of application: integration of playlists, trailer or short movies
+
+'
+      page:
+        close: Close
+        close_title: Leave embedded video
+      page_type_category_name: Video
+      page_type_description: Embed YouTube or Vimeo videos
+      page_type_name: Embedded Video
+    ui:
+      configuration_editor:
+        tabs:
+          topic: Contents

data/lib/pageflow/embedded_video/configuration.rb

@@ -0,0 +1,15 @@
+module Pageflow
+  module EmbeddedVideo
+    class Configuration
+
+      # White list of URL prefixes (including protocol) of embedded videos.
+      # @return [Array<String>]
+      attr_reader :supported_hosts
+
+      def initialize
+        @supported_hosts = %w(https://www.youtube.com http://www.youtube.com http://vimeo.com)
+      end
+
+    end
+  end
+end

data/lib/pageflow/embedded_video/engine.rb

@@ -0,0 +1,9 @@
+module Pageflow
+  module EmbeddedVideo
+    class Engine < Rails::Engine
+      isolate_namespace Pageflow::EmbeddedVideo
+
+      config.autoload_paths << File.join(config.root, 'lib')
+    end
+  end
+end

data/lib/pageflow/embedded_video/page_type.rb

@@ -0,0 +1,12 @@
+module Pageflow
+  module EmbeddedVideo
+    class PageType < Pageflow::PageType
+      name 'embedded_video'
+
+      def json_seed_template
+        'pageflow/embedded_video/page_type.json.jbuilder'
+      end
+
+    end
+  end
+end

data/lib/pageflow-embedded-video.rb

@@ -0,0 +1,17 @@
+require 'pageflow/embedded_video/engine'
+
+module Pageflow
+  module EmbeddedVideo
+    def self.config
+      @config ||= EmbeddedVideo::Configuration.new
+    end
+
+    def self.configure(&block)
+      block.call(config)
+    end
+
+    def self.page_type
+      EmbeddedVideo::PageType.new
+    end
+  end
+end

data/pageflow-embedded-video.gemspec

@@ -0,0 +1,23 @@
+# coding: utf-8
+
+Gem::Specification.new do |spec|
+  spec.name          = "pageflow-embedded-video"
+  spec.version       = "0.1.0"
+  spec.authors       = ["Stefan Schöttelndreyer"]
+  spec.email         = ["sschoettelndreyer@codevise.de"]
+  spec.summary       = "Pagetype for embedded youtube/vimeo videos"
+  spec.homepage      = ""
+  spec.license       = "MIT"
+
+  spec.files         = `git ls-files`.split($/)
+  spec.executables   = spec.files.grep(%r{^bin/}) { |f| File.basename(f) }
+  spec.test_files    = spec.files.grep(%r{^(test|spec|features)/})
+  spec.require_paths = ["lib"]
+
+  spec.add_runtime_dependency "pageflow", "~> 0.7"
+  spec.add_runtime_dependency 'i18n-js'
+
+  spec.add_development_dependency "bundler"
+  spec.add_development_dependency "rake"
+  spec.add_development_dependency "webmock"
+end

metadata

@@ -0,0 +1,152 @@
+--- !ruby/object:Gem::Specification
+name: pageflow-embedded-video
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+platform: ruby
+authors:
+- Stefan Schöttelndreyer
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2015-02-03 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: pageflow
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ~>
+      - !ruby/object:Gem::Version
+        version: '0.7'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ~>
+      - !ruby/object:Gem::Version
+        version: '0.7'
+- !ruby/object:Gem::Dependency
+  name: i18n-js
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: bundler
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: rake
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: webmock
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0'
+description: 
+email:
+- sschoettelndreyer@codevise.de
+executables:
+- rails
+extensions: []
+extra_rdoc_files: []
+files:
+- .gitignore
+- .jshintignore
+- .jshintrc
+- CHANGELOG.md
+- Gemfile
+- README.md
+- Rakefile
+- app/assets/images/pageflow/embedded_video_pictogram.png
+- app/assets/images/pageflow/embedded_video_pictogram_small.png
+- app/assets/images/pageflow/embedded_video_sprite.png
+- app/assets/images/pageflow/mobile_overlay.png
+- app/assets/images/pageflow/ov-embedded_video.png
+- app/assets/javascript/pageflow/URI.js
+- app/assets/javascript/pageflow/embedded_video.js
+- app/assets/javascript/pageflow/embedded_video/editor.js
+- app/assets/javascript/pageflow/embedded_video/editor/collections/embedded_videos_collection.js
+- app/assets/javascript/pageflow/embedded_video/editor/initializers/setup_collections.js
+- app/assets/javascript/pageflow/embedded_video/editor/models/embedded_video.js
+- app/assets/javascript/pageflow/embedded_video/editor/templates/embedded_video_status.jst.ejs
+- app/assets/javascript/pageflow/embedded_video/editor/templates/url_input.jst.ejs
+- app/assets/javascript/pageflow/embedded_video/editor/views/configuration_editor.js
+- app/assets/javascript/pageflow/embedded_video/editor/views/inputs/video_url_input_view.js
+- app/assets/javascript/pageflow/embedded_video/page_type.js
+- app/assets/javascript/pageflow/froogaloop.js
+- app/assets/stylesheets/pageflow/embedded_video.css.scss
+- app/assets/stylesheets/pageflow/embedded_video/custom.css.scss
+- app/assets/stylesheets/pageflow/embedded_video/editor.css.scss
+- app/views/pageflow/embedded_video/page.html.erb
+- app/views/pageflow/embedded_video/page_type.json.jbuilder
+- bin/rails
+- config/locales/de.yml
+- config/locales/en.yml
+- lib/pageflow-embedded-video.rb
+- lib/pageflow/embedded_video/configuration.rb
+- lib/pageflow/embedded_video/engine.rb
+- lib/pageflow/embedded_video/page_type.rb
+- pageflow-embedded-video.gemspec
+homepage: ''
+licenses:
+- MIT
+metadata: {}
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ! '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ! '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubyforge_project: 
+rubygems_version: 2.4.2
+signing_key: 
+specification_version: 4
+summary: Pagetype for embedded youtube/vimeo videos
+test_files: []