screenkit 0.0.10 → 0.0.12

data/lib/screenkit/exporter/intro.rb

@@ -3,8 +3,11 @@
 module ScreenKit
   module Exporter
     class Intro
+      using CoreExt
+
       include Shell
       include Utils
+      include ImageMagick
       extend SchemaValidator
 
       def self.schema_path
@@ -14,19 +17,15 @@ module ScreenKit
       # The intro scene configuration.
       attr_reader :config
 
-      # The title text.
-      attr_reader :text
-
       # The source path lookup instance.
       attr_reader :source
 
       # The log path.
       attr_reader :log_path
 
-      def initialize(config:, text:, source:, log_path: nil)
+      def initialize(config:, source:, log_path: nil)
         self.class.validate!(config)
         @config = config
-        @text = text
         @source = source
         @log_path = log_path
       end
@@ -75,8 +74,89 @@ module ScreenKit
         @font_path ||= source.search(title_config[:font_path])
       end
 
+      def render_elements(overlay_path)
+        padding = Spacing.new(hi_res(config.fetch(:padding, 100)))
+
+        hi_res(
+          image_width: 1920,
+          image_height: 1080,
+          content_width: 1920 - (padding.horizontal / 2)
+        ) => {
+          image_width:,
+          image_height:,
+          content_width:,
+        }
+
+        logo = hi_res({width: 350, x: 0, y: 0}.deep_merge(config[:logo]))
+        title = hi_res({size: 144, x: 0, y: 0}.deep_merge(config[:title]))
+        url = hi_res({size: 42, x: 0, y: 0}.deep_merge(config[:url]))
+        url_height = 0
+
+        logo_intermediary_path = overlay_path.sub_ext("_logo.png")
+        title_intermediary_path = overlay_path.sub_ext("_title.png")
+        url_intermediary_path = overlay_path.sub_ext("_url.png")
+
+        MiniMagick.convert do |image|
+          image << logo_path
+          image << "-resize"
+          image << "#{logo[:width]}x"
+          image << "PNG:#{logo_intermediary_path}"
+        end
+
+        title_style = TextStyle.new(source:, **title)
+        url_style = TextStyle.new(source:, **url)
+
+        _, _, title_height =
+          *render_text_image(path: title_intermediary_path,
+                             text: title[:text],
+                             style: title_style,
+                             width: content_width,
+                             type: "caption")
+
+        if url[:text]
+          _, _, url_height =
+            *render_text_image(path: url_intermediary_path,
+                               text: url[:text],
+                               style: url_style,
+                               width: content_width,
+                               type: "caption")
+        end
+
+        MiniMagick.convert do |image|
+          image << "-size"
+          image << "#{image_width}x#{image_height}"
+          image << "xc:none"
+
+          image << logo_intermediary_path
+          image << "-geometry"
+          image << "+#{padding.left}+#{padding.top}"
+          image << "-composite"
+
+          offset_y = (image_height - title_height) / 2
+
+          image << title_intermediary_path
+          image << "-geometry"
+          image << "+#{padding.left}+#{offset_y}"
+          image << "-composite"
+
+          offset_y = image_height - padding.bottom - url_height
+
+          if url[:text]
+            image << url_intermediary_path
+            image << "-geometry"
+            image << "+#{padding.left}+#{offset_y}"
+            image << "-composite"
+          end
+
+          image << "PNG:#{overlay_path}"
+        end
+      end
+
       def export(path)
-        ffmpeg_params => {inputs:, filters:, maps:}
+        overlay_path = path.sub_ext(".png")
+        render_elements(overlay_path)
+
+        ffmpeg_params(overlay_path) => {inputs:, filters:, maps:}
 
         cmd = [
           "ffmpeg",
@@ -95,11 +175,11 @@ module ScreenKit
         run_command(*cmd, log_path:)
       end
 
-      private def ffmpeg_params
+      private def ffmpeg_params(overlay_path)
         duration = Duration.parse(config[:duration])
         fade_in = Duration.parse(config.fetch(:fade_in, 0.0))
         fade_out = Duration.parse(config.fetch(:fade_out, 0.5))
-        fade_out_start = duration - fade_out - 0.1
+        fade_out_start = duration - fade_out - 0.2
 
         # Build filter chain
         inputs = []
@@ -155,61 +235,15 @@ module ScreenKit
 
         current_layer = "bg"
 
-        # Logo layer (if present)
-        if logo_path
-          logo_width = logo_config.fetch(:width, 350)
-          logo_x = logo_config.fetch(:x, "center")
-          logo_y = logo_config.fetch(:y, "center")
-          overlay_x = logo_x == "center" ? "(W-w)/2" : logo_x
-          overlay_y = logo_y == "center" ? "(H-h)/2" : logo_y
-
-          inputs += ["-loop", "1", "-i", logo_path]
-          filters << "[#{stream_index}:v]scale=#{logo_width}:" \
-                     "-1:flags=lanczos[logo]"
-          filters << "[#{current_layer}][logo]overlay=#{overlay_x}:" \
-                     "#{overlay_y}[with_logo]"
-          current_layer = "with_logo"
+        # Overlay layer (if present)
+        if overlay_path.file?
+          inputs += ["-loop", "1", "-i", overlay_path]
+          filters << "[#{stream_index}:v]scale=1920:1080[overlay]"
+          filters << "[#{current_layer}][overlay]overlay=0:0[with_overlay]"
+          current_layer = "with_overlay"
           stream_index += 1
         end
 
-        # Title layer (if present)
-        if title_config
-          title_x = title_config.fetch(:x, "center")
-          title_y = title_config.fetch(:y, "center")
-          title_size = title_config.fetch(:size, 72)
-          title_color = title_config.fetch(:color, "white")
-
-          # Calculate max width based on x offset
-          max_width = if title_x == "center"
-                        1720 # 1920 - (2 * 100)
-                      else
-                        1920 - (2 * title_x.to_i)
-                      end
-
-          # Rough estimate characters per line based on font size
-          avg_char_width = title_size * 0.7
-          max_chars_per_line = (max_width / avg_char_width).floor
-
-          # Auto-wrap text
-          wrapped_text = wrap_text(text, max_chars_per_line)
-
-          # Convert position to drawtext coordinates
-          drawtext_x = title_x == "center" ? "(w-text_w)/2" : title_x
-          drawtext_y = title_y == "center" ? "(h-text_h)/2" : title_y
-
-          # Center align text when x is centered
-          text_align = title_x == "center" ? ":text_align=center" : ""
-
-          # Escape special characters in text
-          wrapped_text = wrapped_text.gsub("'", "'\\\\\\''").gsub(":", "\\:")
-
-          filters << "[#{current_layer}]drawtext=text='#{wrapped_text}':" \
-                     "fontfile=#{font_path}:fontsize=#{title_size}:" \
-                     "fontcolor=#{title_color}:x=#{drawtext_x}:" \
-                     "y=#{drawtext_y}#{text_align}[with_title]"
-          current_layer = "with_title"
-        end
-
         # Apply fades to final video layer
         # Use black for fade color when background is an image file
         fade_color = background_path&.file? ? "black" : background

data/lib/screenkit/exporter/playwright.rb

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+module ScreenKit
+  module Exporter
+    class Playwright
+      include Shell
+
+      attr_reader :script_path, :log_path, :options
+
+      def initialize(script_path:, options: {}, log_path: nil)
+        @script_path = script_path
+        @log_path = log_path
+        @options = options
+      end
+
+      def export(output_path)
+        run_command "playwright-video",
+                    "export",
+                    script_path,
+                    options_to_args(options),
+                    "--output-path", output_path,
+                    log_path:,
+                    chdir: script_path.parent.parent
+      end
+
+      def options_to_args(options)
+        (options || {}).flat_map do |key, value|
+          [key.to_s.tr("_", "-").prepend("--"), value]
+        end
+      end
+    end
+  end
+end

data/lib/screenkit/exporter/segment.rb

@@ -64,7 +64,19 @@ module ScreenKit
 
         log_path = format(log_path.to_s, prefix:) if log_path
 
-        case content_path.extname.downcase.gsub(/^\./, "")
+        # Consider all extnames, after the first dot.
+        # E.g. "video.playwright.js" -> "playwright.js"
+        extname = content_path.basename.to_s.downcase.split(".")[1..].join(".")
+
+        case extname
+        when *ContentType.playwright
+          Exporter::Playwright
+            .new(
+              script_path: content_path,
+              options: episode.playwright_options,
+              log_path:,
+            )
+            .export(video_path)
         when *ContentType.video
           Exporter::Video
             .new(input_path: content_path, log_path:)

data/lib/screenkit/generators/episode/config.yml.erb

@@ -1,5 +1,5 @@
 ---
-# yaml-language-server: $schema=https://screenkit.dev/schemas/episode.json
+# yaml-language-server: $schema=https://screenkit.dev/schemas/config.json
 
 # The episode title (displayed in intro scene).
 # Line breaks are inferred based on approximate text width.
@@ -8,4 +8,4 @@ title: <%= options.title.to_yaml[4..] %>
 # Episode-specific overrides for global configuration.
 # Use an editor with JSON Schema support to see available options and
 # autocomplete.
-# Schema: https://screenkit.dev/schemas/episode.json
+# Schema: https://screenkit.dev/schemas/config.json

data/lib/screenkit/generators/project/screenkit.yml

@@ -1,8 +1,7 @@
 ---
-# yaml-language-server: $schema=../../schemas/project.json
-## yaml-language-server: $schema=https://screenkit.dev/schemas/project.json
+# yaml-language-server: $schema=https://screenkit.dev/schemas/config.json
 
-# ScreenKit project configuration file.
+# ScreenKit configuration version.
 schema: 1
 
 # The episodes directory is where the source files for each episode are stored.
@@ -155,10 +154,18 @@ scenes:
     # The background color/image of the intro scene.
     background: "#100f50"
 
+    # The padding around the intro.
+    padding: 100
+
+    # Show the url text in the intro scene.
+    url:
+      text: "https://screenkit.dev"
+      font_path: open-sans/OpenSans-SemiBold.ttf
+      size: 42
+      color: "#ffffff80"
+
     # The title text to be displayed in the intro scene.
     title:
-      x: 100
-      y: 300
       font_path: open-sans/OpenSans-ExtraBold.ttf
       size: 144
       color: "#ffffff"
@@ -168,8 +175,6 @@ scenes:
     # size it'll be displayed).
     logo:
       path: logo.png
-      x: 100
-      y: 200
       width: 300
 
     # The sound to be played along with the logo in the intro.

data/lib/screenkit/image_magick.rb

@@ -0,0 +1,106 @@
+# frozen_string_literal: true
+
+module ScreenKit
+  module ImageMagick
+    # Wrap text to fit within the specified maximum width.
+    # @param text [String] The text to wrap.
+    # @param max_width [Integer] The maximum width in pixels.
+    # @param font_size [Integer] The font size in points.
+    # @return [Array<String>] The wrapped lines of text.
+    def text_wrap(text, max_width:, font_size:)
+      words = text.to_s.split(/\s+/)
+      width_factor = 0.6
+
+      [].tap do |lines|
+        words.each do |word|
+          line = lines.pop.to_s
+          word_width = word.size * (font_size * width_factor)
+          line_width = line.size * (font_size * width_factor)
+
+          if line_width + word_width <= max_width
+            line = [(line unless line.empty?), word].compact.join(" ")
+            lines << line
+          else
+            lines << line
+            lines << word
+          end
+        end
+      end
+    end
+
+    # Escape text for use in ImageMagick caption.
+    def escape_text_for_image(text)
+      text.gsub("'", "\\\\'")
+    end
+
+    # Render text into an image using MiniMagick.
+    # @param text [String] The text to render.
+    # @param style [TextStyle] The text style to apply.
+    # @param width [Integer] The width of the text image.
+    # @param type [String] The ImageMagick text type (e.g., "caption").
+    # @param path [String, nil] The output path.
+    # @return [Array] The path to the generated text image, width, and
+    # height.
+    def render_text_image(text:, style:, width:, type:, path: nil)
+      return [nil, 0, 0] if text.to_s.empty?
+
+      image = MiniMagick::Image.open(
+        create_text_image(text:, style:, width:, type:, path:)
+      )
+
+      [image.path, image.width, image.height]
+    end
+
+    # Convert values to high resolution (2x).
+    # @param value [Object] The value to convert.
+    # @return [Object] The converted value.
+    def hi_res(value)
+      case value
+      when Array
+        value.map { hi_res(it) }
+      when Hash
+        value.transform_values { hi_res(it) }
+      when Numeric
+        value * 2
+      else
+        value
+      end
+    end
+
+    # Create a text image using MiniMagick.
+    # @param text [String] The text to render.
+    # @param style [TextStyle] The text style to apply.
+    # @param width [Integer] The width of the text image.
+    # @param type [String] The ImageMagick text type (e.g., "caption").
+    # @param path [String, nil] The output path.
+    # @return [Array] The path to the generated text image, and the actual
+    #                 `Tempfile` instance.
+    def create_text_image(text:, style:, width:, type:, path: nil)
+      path ||= File.join(Dir.tmpdir, "callout-text-#{SecureRandom.hex(10)}.png")
+      FileUtils.mkdir_p(File.dirname(path))
+
+      MiniMagick.convert do |image|
+        unless type == "label"
+          image << "-size"
+          image << "#{width}x"
+        end
+
+        image << "-background"
+        image << "none"
+        image << "-fill"
+        image << style.color
+        image << "-font"
+        image << style.font_path.to_s
+        image << "-pointsize"
+        image << style.size.to_s
+        image << "#{type}:#{escape_text_for_image(text)}"
+        image << "PNG:#{path}"
+      end
+
+      path
+    rescue MiniMagick::Error => error
+      retry if error.message.include?("No such file or directory")
+      raise
+    end
+  end
+end

data/lib/screenkit/schemas/{project.json → config.json}

@@ -3,8 +3,14 @@
   "$id": "https://screenkit.dev/schemas/project.json",
   "title": "ScreenKit Project Configuration (screenkit.yml)",
   "type": "object",
-  "required": ["schema", "resources_dir", "episode_dir", "output_dir"],
+  "required": ["schema"],
   "properties": {
+    "title": {
+      "type": "string",
+      "description": "The episode title",
+      "minLength": 1,
+      "pattern": "\\S"
+    },
     "resources_dir": { "$ref": "refs/directory.json" },
     "backtrack": { "$ref": "refs/sound.json" },
     "tts": { "$ref": "refs/tts.json" },
@@ -31,7 +37,8 @@
         "$ref": "refs/callout_style.json"
       }
     },
-    "demotape": { "$ref": "refs/demotape.json" }
+    "demotape": { "$ref": "refs/demotape.json" },
+    "playwright": { "$ref": "refs/playwright.json" }
   },
   "additionalProperties": false
 }

data/lib/screenkit/schemas/refs/intro.json

@@ -7,12 +7,16 @@
     "fade_in": { "$ref": "duration.json" },
     "fade_out": { "$ref": "duration.json" },
     "title": {
-      "type": "object",
       "description": "Title configuration",
-      "allOf": [{ "$ref": "text_style.json" }, { "$ref": "position.json" }]
+      "$ref": "text_style.json"
     },
     "background": { "$ref": "background.json" },
     "logo": { "$ref": "logo.json" },
-    "sound": { "$ref": "sound.json" }
+    "sound": { "$ref": "sound.json" },
+    "padding": { "$ref": "spacing.json" },
+    "url": {
+      "description": "URL configuration",
+      "$ref": "text_style.json"
+    }
   }
 }

data/lib/screenkit/schemas/refs/playwright.json

@@ -0,0 +1,13 @@
+{
+  "$schema": "http://json-schema.org/draft-04/schema#",
+  "$id": "https://screenkit.dev/schemas/refs/playwright.json",
+  "title": "playwright-video settings (https://github.com/fnando/playwright-video)",
+  "type": "object",
+  "properties": {
+    "color_scheme": {
+      "type": "string",
+      "description": "Color scheme to use when capturing the video.",
+      "enum": ["light", "dark"]
+    }
+  }
+}

data/lib/screenkit/text_style.rb

@@ -0,0 +1,42 @@
+# frozen_string_literal: true
+
+module ScreenKit
+  class TextStyle
+    attr_reader :color, :size, :font_path, :align
+
+    def initialize(source:, **kwargs)
+      @source = source
+
+      kwargs.each do |key, value|
+        value = case key.to_sym
+                when :font_path
+                  @source.search(value)
+                else
+                  value
+                end
+
+        instance_variable_set(:"@#{key}", value)
+      end
+    end
+
+    # Convert hex color (with optional alpha) to RGB + opacity
+    # #RRGGBB or #RRGGBBAA
+    def rgb_color
+      color.match(/#([0-9a-fA-F]{6})/) {|m| m[1] }
+    end
+
+    def opacity
+      if color.length == 9
+        color.match(/#[0-9a-fA-F]{6}([0-9a-fA-F]{2})/) do |m|
+          m[1].to_i(16) / 255.0
+        end
+      else
+        1.0
+      end
+    end
+
+    def as_json(*)
+      {color:, size:, font_path:, rgb_color:, opacity:, align:}
+    end
+  end
+end

data/lib/screenkit/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module ScreenKit
-  VERSION = "0.0.10"
+  VERSION = "0.0.12"
 end

data/lib/screenkit.rb

@@ -26,14 +26,13 @@ module ScreenKit
   require_relative "screenkit/spinner"
   require_relative "screenkit/shell"
   require_relative "screenkit/http"
+  require_relative "screenkit/image_magick"
   require_relative "screenkit/schema_validator"
   require_relative "screenkit/generators/project"
   require_relative "screenkit/generators/episode"
-  require_relative "screenkit/config/base"
-  require_relative "screenkit/config/project"
-  require_relative "screenkit/config/episode"
+  require_relative "screenkit/config"
   require_relative "screenkit/callout"
-  require_relative "screenkit/callout/text_style"
+  require_relative "screenkit/text_style"
   require_relative "screenkit/callout/styles/base"
   require_relative "screenkit/transition"
   require_relative "screenkit/parallel_processor"
@@ -54,9 +53,10 @@ module ScreenKit
   require_relative "screenkit/exporter/segment"
   require_relative "screenkit/exporter/image"
   require_relative "screenkit/exporter/video"
+  require_relative "screenkit/exporter/playwright"
 
   require_files = lambda do |pattern|
-    Gem.find_files_from_load_path(pattern).each do |path|
+    Gem.find_files(pattern).each do |path|
       next if path.include?("test")
 
       require(path)

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: screenkit
 version: !ruby/object:Gem::Version
-  version: 0.0.10
+  version: 0.0.12
 platform: ruby
 authors:
 - Nando Vieira
@@ -304,16 +304,14 @@ files:
 - lib/screenkit/callout/styles/inline_block.rb
 - lib/screenkit/callout/styles/shadow_block.rb
 - lib/screenkit/callout/styles/social.rb
-- lib/screenkit/callout/text_style.rb
 - lib/screenkit/cli.rb
 - lib/screenkit/cli/base.rb
 - lib/screenkit/cli/episode.rb
 - lib/screenkit/cli/root.rb
-- lib/screenkit/config/base.rb
-- lib/screenkit/config/episode.rb
-- lib/screenkit/config/project.rb
+- lib/screenkit/config.rb
 - lib/screenkit/content_type.rb
 - lib/screenkit/core_ext.rb
+- lib/screenkit/core_ext/hash.rb
 - lib/screenkit/core_ext/json.rb
 - lib/screenkit/core_ext/string.rb
 - lib/screenkit/duration.rb
@@ -322,6 +320,7 @@ files:
 - lib/screenkit/exporter/image.rb
 - lib/screenkit/exporter/intro.rb
 - lib/screenkit/exporter/outro.rb
+- lib/screenkit/exporter/playwright.rb
 - lib/screenkit/exporter/segment.rb
 - lib/screenkit/exporter/video.rb
 - lib/screenkit/generators/episode.rb
@@ -345,6 +344,7 @@ files:
 - lib/screenkit/generators/project/resources/sounds/whoosh.mp3
 - lib/screenkit/generators/project/screenkit.yml
 - lib/screenkit/http.rb
+- lib/screenkit/image_magick.rb
 - lib/screenkit/logfile.rb
 - lib/screenkit/parallel_processor.rb
 - lib/screenkit/path_lookup.rb
@@ -371,8 +371,7 @@ files:
 - lib/screenkit/schemas/callout_styles/social.json
 - lib/screenkit/schemas/callouts/inline_block.json
 - lib/screenkit/schemas/callouts/shadow_block.json
-- lib/screenkit/schemas/episode.json
-- lib/screenkit/schemas/project.json
+- lib/screenkit/schemas/config.json
 - lib/screenkit/schemas/refs/anchor.json
 - lib/screenkit/schemas/refs/animation.json
 - lib/screenkit/schemas/refs/background.json
@@ -385,6 +384,7 @@ files:
 - lib/screenkit/schemas/refs/intro.json
 - lib/screenkit/schemas/refs/logo.json
 - lib/screenkit/schemas/refs/outro.json
+- lib/screenkit/schemas/refs/playwright.json
 - lib/screenkit/schemas/refs/position.json
 - lib/screenkit/schemas/refs/scenes.json
 - lib/screenkit/schemas/refs/size.json
@@ -402,6 +402,7 @@ files:
 - lib/screenkit/sound.rb
 - lib/screenkit/spacing.rb
 - lib/screenkit/spinner.rb
+- lib/screenkit/text_style.rb
 - lib/screenkit/time_formatter.rb
 - lib/screenkit/transition.rb
 - lib/screenkit/tts/base.rb
@@ -419,10 +420,10 @@ metadata:
   rubygems_mfa_required: 'true'
   homepage_uri: https://github.com/fnando/screenkit
   bug_tracker_uri: https://github.com/fnando/screenkit/issues
-  source_code_uri: https://github.com/fnando/screenkit/tree/v0.0.10
-  changelog_uri: https://github.com/fnando/screenkit/tree/v0.0.10/CHANGELOG.md
-  documentation_uri: https://github.com/fnando/screenkit/tree/v0.0.10/README.md
-  license_uri: https://github.com/fnando/screenkit/tree/v0.0.10/LICENSE.md
+  source_code_uri: https://github.com/fnando/screenkit/tree/v0.0.12
+  changelog_uri: https://github.com/fnando/screenkit/tree/v0.0.12/CHANGELOG.md
+  documentation_uri: https://github.com/fnando/screenkit/tree/v0.0.12/README.md
+  license_uri: https://github.com/fnando/screenkit/tree/v0.0.12/LICENSE.md
 rdoc_options: []
 require_paths:
 - lib
@@ -437,7 +438,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.6.9
+rubygems_version: 4.0.0
 specification_version: 4
 summary: Terminal to screencast, simplified
 test_files: []