fenetre 0.1.0

data/app/assets/stylesheets/fenetre/video_chat.css

@@ -0,0 +1,225 @@
+/* Fenetre Video Chat Styles - Dark and Light Themes */
+.fenetre-video-chat-container {
+  border-radius: 12px;
+  box-shadow: 0 2px 16px rgba(0,0,0,0.18);
+  padding: 1.5rem;
+  max-width: 700px;
+  margin: 2rem auto;
+  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
+  transition: background 0.2s, color 0.2s;
+}
+
+.fenetre-theme-dark {
+  background: #181c20;
+  color: #f3f6fa;
+}
+.fenetre-theme-dark h3 {
+  color: #e0e6ef;
+}
+.fenetre-theme-dark ul#fenetre-participant-list,
+.fenetre-theme-dark #fenetre-chat-box {
+  background: #23272e;
+  color: #f3f6fa;
+}
+.fenetre-theme-dark ul#fenetre-participant-list li {
+  border-bottom: 1px solid #23272e;
+}
+.fenetre-theme-dark video {
+  border: 2px solid #23272e;
+  background: #101214;
+}
+
+.fenetre-theme-light {
+  background: #f7fafd;
+  color: #23272e;
+}
+.fenetre-theme-light h3 {
+  color: #23272e;
+}
+.fenetre-theme-light ul#fenetre-participant-list,
+.fenetre-theme-light #fenetre-chat-box {
+  background: #e9eef3;
+  color: #23272e;
+}
+.fenetre-theme-light ul#fenetre-participant-list li {
+  border-bottom: 1px solid #e9eef3;
+}
+.fenetre-theme-light video {
+  border: 2px solid #e9eef3;
+  background: #fff;
+}
+
+.fenetre-video-chat-container h3 {
+  margin-top: 1.2em;
+  margin-bottom: 0.5em;
+  font-weight: 600;
+  letter-spacing: 0.01em;
+}
+.fenetre-video-chat-container ul#fenetre-participant-list {
+  border-radius: 8px;
+  padding: 0.5em 1em;
+  margin-bottom: 1em;
+  list-style: none;
+  min-height: 2em;
+}
+.fenetre-video-chat-container ul#fenetre-participant-list li {
+  padding: 0.2em 0;
+}
+.fenetre-video-chat-container .fenetre-video-section {
+  display: flex;
+  gap: 2em;
+  flex-wrap: wrap;
+}
+.fenetre-video-chat-container video {
+  border-radius: 8px;
+}
+.fenetre-video-chat-container #fenetre-chat-box {
+  border-radius: 8px;
+  padding: 0.5em 1em;
+  min-height: 2em;
+  margin-top: 1em;
+  font-size: 1em;
+  max-height: 180px;
+  overflow-y: auto;
+}
+.fenetre-video-chat-container #fenetre-chat-box div {
+  margin-bottom: 0.3em;
+}
+
+/* Connection status styles */
+.fenetre-connection-status {
+  display: inline-block;
+  padding: 4px 8px;
+  border-radius: 12px;
+  font-size: 0.8rem;
+  font-weight: 500;
+  margin-bottom: 1rem;
+}
+
+.fenetre-status-connecting {
+  background-color: #ffeeba;
+  color: #856404;
+}
+
+.fenetre-status-connected {
+  background-color: #d4edda;
+  color: #155724;
+}
+
+.fenetre-status-disconnected {
+  background-color: #f8d7da;
+  color: #721c24;
+}
+
+.fenetre-status-reconnecting {
+  background-color: #e2e3e5;
+  color: #383d41;
+  animation: pulse 1.5s infinite;
+}
+
+.fenetre-status-error {
+  background-color: #f8d7da;
+  color: #721c24;
+  font-weight: 600;
+}
+
+/* Peer connection status indicators */
+.fenetre-peer-status {
+  position: absolute;
+  top: 5px;
+  right: 5px;
+  border-radius: 8px;
+  padding: 2px 6px;
+  font-size: 0.7rem;
+  background: rgba(0, 0, 0, 0.5);
+  color: white;
+}
+
+.fenetre-peer-connecting {
+  background-color: rgba(255, 193, 7, 0.8);
+  color: #212529;
+}
+
+.fenetre-peer-connected {
+  background-color: rgba(40, 167, 69, 0.8);
+  color: white;
+}
+
+.fenetre-peer-disconnected, .fenetre-peer-failed {
+  background-color: rgba(220, 53, 69, 0.8);
+  color: white;
+}
+
+/* Remote video container styling */
+.fenetre-remote-video-container {
+  position: relative;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+/* Screen sharing button styles */
+.fenetre-control-button.screen-sharing {
+  background-color: #17a2b8;
+  color: white;
+}
+
+.fenetre-theme-dark .fenetre-control-button.screen-sharing {
+  background-color: #138496;
+}
+
+.fenetre-theme-light .fenetre-control-button.screen-sharing {
+  background-color: #17a2b8;
+}
+
+/* Animation for reconnecting status */
+@keyframes pulse {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+/* Control buttons styles */
+.fenetre-controls {
+  display: flex;
+  gap: 10px;
+  margin-top: 1rem;
+  flex-wrap: wrap;
+}
+
+.fenetre-control-button {
+  padding: 8px 12px;
+  border-radius: 20px;
+  border: none;
+  font-size: 0.9rem;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s;
+}
+
+.fenetre-theme-dark .fenetre-control-button {
+  background-color: #343a40;
+  color: #f8f9fa;
+}
+
+.fenetre-theme-light .fenetre-control-button {
+  background-color: #e9ecef;
+  color: #212529;
+}
+
+.fenetre-control-button:hover {
+  opacity: 0.9;
+}
+
+.fenetre-control-button.video-off,
+.fenetre-control-button.audio-off {
+  background-color: #dc3545;
+  color: white;
+}

data/app/channels/fenetre/video_chat_channel.rb

@@ -0,0 +1,164 @@
+# frozen_string_literal: true
+
+module Fenetre
+  class VideoChatChannel < ActionCable::Channel::Base
+    # Handles signaling messages for WebRTC
+    @@participants = Hash.new { |h, k| h[k] = [] }
+
+    def subscribed
+      return reject unless current_user
+
+      @room_id = params[:room_id]
+      return reject if @room_id.blank?
+
+      init_participants(@room_id)
+      return reject if params[:room_locked] && user_role != :host
+      return reject if params[:max_participants] && participants(@room_id).size >= params[:max_participants].to_i
+
+      stream_from room_stream(@room_id)
+    end
+
+    def unsubscribed
+      return unless @room_id
+
+      remove_participant(@room_id, current_user.id)
+      broadcast_leave(@room_id, current_user.id)
+      log_analytics(:leave, current_user.id, @room_id)
+    end
+
+    def signal(data)
+      return unless @room_id
+
+      init_participants(@room_id)
+      type = data['type'] || data[:type]
+      payload = data['payload'] || data[:payload]
+      return if type == 'screen_share' && !params[:enable_screen_sharing]
+
+      broadcast_signal(@room_id, type, current_user.id, payload)
+    end
+
+    def join_room(_data)
+      return unless @room_id
+
+      add_participant(@room_id, current_user.id)
+      message = {
+        'type' => 'join',
+        'from' => current_user.id,
+        'participants' => participants(@room_id).dup
+      }
+      message['topic'] = params[:room_topic] if params[:room_topic]
+      message['max_participants'] = params[:max_participants] if params[:max_participants]
+      message['turbo_stream'] = '<turbo-stream action="append">...</turbo-stream>'
+      ActionCable.server.broadcast(room_stream(@room_id), message)
+      log_analytics(:join, current_user.id, @room_id)
+    end
+
+    def kick(data)
+      return unless user_role == :host
+
+      user_id = data['user_id'] || data[:user_id]
+      ActionCable.server.broadcast(room_stream(@room_id),
+                                   { 'type' => 'kick', 'from' => current_user.id,
+                                     'payload' => { 'user_id' => user_id } })
+    end
+
+    def mute(data)
+      return unless user_role == :host
+
+      user_id = data['user_id'] || data[:user_id]
+      ActionCable.server.broadcast(room_stream(@room_id),
+                                   { 'type' => 'mute', 'from' => current_user.id,
+                                     'payload' => { 'user_id' => user_id } })
+    end
+
+    def unmute(data)
+      return unless user_role == :host
+
+      user_id = data['user_id'] || data[:user_id]
+      ActionCable.server.broadcast(room_stream(@room_id),
+                                   { 'type' => 'unmute', 'from' => current_user.id,
+                                     'payload' => { 'user_id' => user_id } })
+    end
+
+    def chat(data)
+      return unless @room_id
+
+      init_participants(@room_id)
+      return if (data['to'] || data[:to]) && !params[:enable_private_chat]
+
+      message = data['message'] || data[:message]
+      to = data['to'] || data[:to]
+      ActionCable.server.broadcast(room_stream(@room_id),
+                                   { 'type' => 'chat', 'from' => current_user.id,
+                                     'payload' => { 'message' => message, 'to' => to } })
+    end
+
+    def perform(action, data = {})
+      raise NoMethodError, "undefined action '#{action}' for #{self.class}" unless respond_to?(action)
+
+      public_send(action, data)
+    end
+
+    def reject
+      @_rejected = true
+      super if defined?(super)
+    end
+
+    def rejected?
+      !!@_rejected
+    end
+
+    def confirmed?
+      !rejected?
+    end
+
+    private
+
+    def user_role
+      connection.respond_to?(:user_role) ? connection.user_role : nil
+    end
+
+    def room_stream(room_id)
+      "fenetre_video_chat_#{room_id}"
+    end
+
+    def init_participants(room_id)
+      @@participants[room_id] ||= []
+    end
+
+    def participants(room_id)
+      @@participants[room_id] ||= []
+    end
+
+    def add_participant(room_id, user_id)
+      @@participants[room_id] << user_id unless @@participants[room_id].include?(user_id)
+    end
+
+    def remove_participant(room_id, user_id)
+      @@participants[room_id]&.delete(user_id)
+    end
+
+    def broadcast_leave(room_id, user_id)
+      ActionCable.server.broadcast(room_stream(room_id),
+                                   { 'type' => 'leave', 'from' => user_id,
+                                     'participants' => participants(room_id).dup })
+    end
+
+    def broadcast_signal(room_id, type, from, payload)
+      ActionCable.server.broadcast(room_stream(room_id), { 'type' => type, 'from' => from, 'payload' => payload })
+    end
+
+    def log_analytics(event, user_id, room_id)
+      $fenetre_analytics ||= []
+      $fenetre_analytics << [event, user_id, room_id]
+    end
+
+    def stringify_keys(hash)
+      hash.transform_keys(&:to_s)
+    end
+
+    def broadcast_to_room(message)
+      ActionCable.server.broadcast(room_stream(@room_id), stringify_keys(message))
+    end
+  end
+end

data/app/helpers/fenetre/video_chat_helper.rb

@@ -0,0 +1,97 @@
+# frozen_string_literal: true
+
+module Fenetre
+  module VideoChatHelper
+    # Helper method to render the video chat container with proper data attributes
+    def fenetre_video_chat_container(room_id, user_id, theme: 'dark')
+      content = stylesheet_link_tag('fenetre/video_chat', media: 'all')
+      js = javascript_include_tag('fenetre.js', type: 'module')
+      content + js + video_chat_main_container(room_id, user_id, theme)
+    end
+
+    private
+
+    def video_chat_main_container(room_id, user_id, theme)
+      content_tag(:div, class: "fenetre-video-chat-container fenetre-theme-#{theme}", data: {
+                    controller: 'fenetre--video-chat',
+                    fenetre_video_chat_user_id_value: user_id.to_s,
+                    fenetre_theme: theme
+                  }) do
+        hidden_room_id_input(room_id) +
+          connection_status_indicator +
+          section_heading('Participants') +
+          participants_list +
+          section_heading('My Video') +
+          local_video_section +
+          media_control_section +
+          section_heading('Remote Videos') +
+          remote_videos_section +
+          section_heading('Chat') +
+          chat_section
+      end
+    end
+
+    # Add connection status indicator
+    def connection_status_indicator
+      content_tag(:div, 'Connecting...',
+                  class: 'fenetre-connection-status',
+                  data: { fenetre_video_chat_target: 'connectionStatus' })
+    end
+
+    def hidden_room_id_input(room_id)
+      content_tag(:input, nil, type: 'hidden', value: room_id, data: { fenetre_video_chat_target: 'roomId' })
+    end
+
+    def section_heading(text)
+      content_tag(:h3, text)
+    end
+
+    def participants_list
+      content_tag(:ul, '', id: 'fenetre-participant-list')
+    end
+
+    def local_video_section
+      content_tag(:div, class: 'fenetre-video-section') do
+        content_tag(:video, '', data: { fenetre_video_chat_target: 'localVideo' }, autoplay: true, playsinline: true,
+                                muted: true, style: 'width: 200px; height: 150px;')
+      end
+    end
+
+    def media_control_section
+      content_tag(:div, class: 'fenetre-controls') do
+        toggle_button('Toggle Video', 'toggleVideo') +
+          toggle_button('Toggle Audio', 'toggleAudio') +
+          toggle_button('Share Screen', 'toggleScreenShare')
+      end
+    end
+
+    def toggle_button(label, action)
+      content_tag(:button, label, data: { action: "fenetre--video-chat##{action}" }, class: 'fenetre-control-button')
+    end
+
+    def remote_videos_section
+      content_tag(:div, class: 'fenetre-video-section') do
+        content_tag(:div, '', data: { fenetre_video_chat_target: 'remoteVideos' })
+      end
+    end
+
+    def chat_section
+      content_tag(:div, class: 'fenetre-chat-container') do
+        chat_messages + chat_input_container
+      end
+    end
+
+    def chat_messages
+      content_tag(:div, '', data: { fenetre_video_chat_target: 'chatMessages' }, class: 'fenetre-chat-messages')
+    end
+
+    def chat_input_container
+      content_tag(:div, class: 'fenetre-chat-input-container') do
+        content_tag(:input, nil, type: 'text', placeholder: 'Type your message...',
+                                 data: { fenetre_video_chat_target: 'chatInput' }) +
+          content_tag(:button, 'Send', data: { action: 'fenetre--video-chat#sendChat' },
+                                       class: 'fenetre-chat-send-button')
+      end
+    end
+  end
+end