RubyGems - spectator_sport - Versions diffs - 0.1.0 → 0.2.0 - Mend

spectator_sport 0.1.0 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (47) hide show

checksums.yaml CHANGED Viewed

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a0da6de1b75e1f786faff4bf46463607dbe7bb14f2ceb7bfc78019941e303406
-  data.tar.gz: 45ad646c162867c8ef55212beac6300f332f6661a05d6d0146bda83eefc98216
+  metadata.gz: 04ef1fe5b218478993467e2b24f8279ce6385978ae57800ecc27dd8a98afa9af
+  data.tar.gz: b3730a2d748d434c36264ae7018a3c40a217c16dca9ba12c2956143f01a535f7
 SHA512:
-  metadata.gz: ba00d3a19fe595a27617e7fa43aef0b826ebbda32bfae2505fd00dc036045f56ce3d107c8deb634c6ae6f40c72ca20cfa915e447ca60f7135c72f0a55470cc51
-  data.tar.gz: '030760899cef3bdb7fe743d09266147152a00090e436360a4b9cdf943a5b2b401f9334c42226425d995d6fd9c40df25ed06ba5517ba3b273e60e2fe31df41763'
+  metadata.gz: bdd63ac25ccfcf26e8e237ae925793ce186a3b1c13882fdb07f598d53f677661dca139e4f4085529b4214ea34547d812e0a80b531415c43c76d48752aad02cfb
+  data.tar.gz: b02788e838fc6d7d5190bfa0e47f70a02d78c919bf80f3166d7a332187f8e487a039380d3ebce8a07dd0fcccf5ff6eb0d31f0d6d7b6b4ffae9d78be4bb7fed88

data/README.md CHANGED Viewed

@@ -4,29 +4,155 @@ Record and replay browser sessions in a self-hosted Rails Engine.
 Spectator Sport uses the [`rrweb` library](https://www.rrweb.io/) to create recordings of your website's DOM as your users interact with it. These recordings are stored in your database for replay by developers and administrators to analyze user behavior, reproduce bugs, and make building for the web more fun.
-## Usage
+🚧 🚧 _This gem is very early in its development lifecycle and will undergo significant changes on its journey to v1.0. I would love your feedback and help in co-developing it, just fyi that it's going to be so much better than it is right now._
-TBD.
+🚧 🚧 **Future Roadmap:**
+- ✅ Proof of concept and technical demo
+- ✅ Running in production on Ben Sheldon's personal business websites
+- ✅ Publish [manifesto of principles and intent](https://github.com/bensheldon/spectator_sport/discussions/6)
+- ◻️ Reliable and efficient event stream transport
+- ✅ Player dashboard design using Bootstrap and Turbo ([#20](https://github.com/bensheldon/spectator_sport/pull/20))
+- ◻️ Automatic cleanup of old recordings to minimize database space
+- ◻️ Identity methods for linking application users to recordings
+- ◻️ Privacy controls with masked recording by default
+- ◻️ Automated installation process with Rails generators
+- ◻️ Fully documented installation process
+- 🏁 Release v1.0 🎉
+- ◻️ Live streaming replay of recordings
+- ◻️ Searching / filtering of recordings, including navigation and 404s/500s, button clicks, rage clicks, dead clicks, etc.
+- ◻️ Custom events
+- 💖 Your feedback and ideas. Please open an Issue or Discussion or even a PR modifying this Roadmap. I'd love to chat!
 ## Installation
-Add this line to your application's Gemfile:
+The Spectator Sport gem is conceptually two parts packaged together in this single gem and mounted in your application:
+1. The Recorder, including javascript that runs in the client browser and produces a stream of events, an API endpoint to receive those events, and database migrations and models to store the events as a cohesive recording.
+2. The Player Dashboard, an administrative dashboard to view and replay stored recordings
+To install Spectator Sport in your Rails application:
+1. Add `spectator_sport` to your application's Gemfile and install the gem:
+    ```bash
+    bundle add spectator_sport
+    ```
+2. Install Spectator Sport in your application. _🚧 This will change on the path to v1._ Explore the `/demo` app as live example:
+    - Create database migrations with `bin/rails g spectator_sport:install:migrations`. Apply migrations with `bin/rails db:prepare`
+    - Mount the recorder API in your application's routes with `mount SpectatorSport::Engine, at: "/spectator_sport, as: :spectator_sport"`
+    - Add the `spectator_sport_script_tags` helper to the bottom of the `<head>` of `layout/application.rb`. Example:
+        ```erb
+        <%# app/views/layouts/application.html.erb %>
+          <%# ... %>
+          <%= spectator_sport_script_tags %>
+        </head>
+        ```
+    - Add a `<script>` tag to `public/404.html`, `public/422.html`, and `public/500/html` error pages. Example:
+        ```erb
+        <!-- public/404.html -->
+          <!-- ... -->
+          <script defer src="/spectator_sport/events.js"></script>
+        </head>
+        ```
+  3. To view recordings, you will want to mount the Player Dashboard in your application and set up authorization to limit access. See the section on [Dashboard authorization](#dashboard-authorization) for instructions.
+## Tagging recordings
+You can associate a string tag (e.g. a user ID or account identifier) with the current recording by calling `spectator_sport_tag_recording` in any template:
+```erb
+<%= spectator_sport_tag_recording(current_user.id.to_s) %>
+```
+This renders a hidden `<meta>` element signed by the server. The recording client detects it and immediately sends it to the API, where the signature is verified before the tag is stored. Tags are displayed in the dashboard and can be used to look up all recordings associated with a given value.
+**Note:** this requires the `spectator_sport_session_window_tags` migration to be applied (`bin/rails spectator_sport:install:migrations && bin/rails db:migrate`). If the migration hasn't been run, the feature is silently disabled.
+## Dashboard authorization
+It is advisable to manually install and set up authorization for the **Player Dashboard** and refrain from making it public.
+If you are using Devise, the process of authorizing admins might resemble the following:
 ```ruby
-gem "spectator_sport"
+# config/routes.rb
+authenticate :user, ->(user) { user.admin? } do
+  mount SpectatorSport::Dashboard::Engine, at: 'spectator_sport_dashboard', as: :spectator_sport_dashboard
+end
 ```
-And then execute:
-```bash
-$ bundle
+Or set up Basic Auth:
+```ruby
+# config/initializers/spectator_sport.rb
+SpectatorSport::Dashboard::Engine.middleware.use(Rack::Auth::Basic) do |username, password|
+  ActiveSupport::SecurityUtils.secure_compare(Rails.application.credentials.spectator_sport_username, username) &
+  ActiveSupport::SecurityUtils.secure_compare(Rails.application.credentials.spectator_sport_password, password)
+end
 ```
-Or install it yourself as:
-```bash
-$ gem install spectator_sport
+If you are using an authentication method similar to the one used in ONCE products, you can utilize an auth constraint in your routes.
+```ruby
+# config/routes.rb
+class AuthRouteConstraint
+  def matches?(request)
+    return false unless request.session[:user_id]
+    user = User.find(request.session[:user_id])
+    if user && user.admin?
+      cookies = ActionDispatch::Cookies::CookieJar.build(request, request.cookies)
+      token = cookies.signed[:session_token]
+      return user.sessions.find_by(token: token)
+    end
+  end
+end
+Rails.application.routes.draw do
+  # ...
+  namespace :admin, constraints: AuthRouteConstraint.new do
+    mount SpectatorSport::Dashboard::Engine, at: 'spectator_sport_dashboard', as: :spectator_sport_dashboard
+  end
+end
+```
+Or extend the `SpectatorSport::Dashboard::ApplicationController` with your own authorization logic:
+```ruby
+# config/initializers/spectator_sport.rb
+ActiveSupport.on_load(:spectator_sport_dashboard_application_controller) do
+  # context here is SpectatorSport::Dashboard::ApplicationController
+  before_action do
+    raise ActionController::RoutingError.new('Not Found') unless current_user&.admin?
+  end
+  def current_user
+    # load current user from session, cookies, etc.
+  end
+end
 ```
 ## Contributing
-Contribution directions go here.
+💖 Please don't be shy about opening an issue or half-baked PR. Your ideas and suggestions are more important to discuss than a polished/complete code change.
+This repository is intended to be simple and easy to run locally with a fully-featured demo application for immediately seeing the results of your proposed changes:
+```bash
+# 1. Clone this repository via git
+# 2. Set it up locally
+bundle install
+# 3. Create database
+bin/rails db:setup
+# 4. Run the demo Rails application:
+bin/rails s
+# 5. Load the demo application in your browser
+open http://localhost:3000
+# 6. Make changes, see the result, commit and make a PR!
+```
 ## License
 The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).

data/app/controllers/spectator_sport/dashboard/application_controller.rb ADDED Viewed

@@ -0,0 +1,8 @@
+module SpectatorSport
+  module Dashboard
+    class ApplicationController < ActionController::Base
+    end
+  end
+end
+ActiveSupport.run_load_hooks(:spectator_sport_dashboard_application_controller, SpectatorSport::Dashboard::ApplicationController)

data/app/controllers/spectator_sport/dashboard/dashboards_controller.rb ADDED Viewed

@@ -0,0 +1,10 @@
+module SpectatorSport
+  module Dashboard
+    class DashboardsController < ApplicationController
+      def index
+        @session_windows = SessionWindow.order(:created_at).limit(50).reverse_order
+        @session_windows = @session_windows.includes(:session_window_tags) if SpectatorSport::SessionWindowTag.migrated?
+      end
+    end
+  end
+end

data/app/controllers/spectator_sport/dashboard/frontends_controller.rb ADDED Viewed

@@ -0,0 +1,59 @@
+# frozen_string_literal: true
+module SpectatorSport
+  module Dashboard
+    class FrontendsController < ActionController::Base # rubocop:disable Rails/ApplicationController
+      protect_from_forgery with: :exception
+      skip_after_action :verify_same_origin_request, raise: false
+      def self.asset_path(path)
+        Engine.root.join("app/frontend/spectator_sport/dashboard", path)
+      end
+      STATIC_ASSETS = {
+        css: {
+          bootstrap: asset_path("vendor/bootstrap/bootstrap.min.css"),
+          "rrweb-player": asset_path("vendor/rrweb-player/rrweb-player.min.css"),
+          style: asset_path("style.css")
+        },
+        js: {
+          bootstrap: asset_path("vendor/bootstrap/bootstrap.bundle.min.js"),
+          es_module_shims: asset_path("vendor/es_module_shims.js")
+        },
+        svg: {
+          icons: asset_path("icons.svg")
+        }
+      }.freeze
+      MODULE_OVERRIDES = {
+        application: asset_path("application.js"),
+        "rrweb-player": asset_path("vendor/rrweb-player/rrweb-player.min.js"),
+        stimulus: asset_path("vendor/stimulus.js"),
+        turbo: asset_path("vendor/turbo.js")
+      }.freeze
+      def self.js_modules
+        @_js_modules ||= asset_path("modules").children.select(&:file?).each_with_object({}) do |file, modules|
+          key = File.basename(file.basename.to_s, ".js").to_sym
+          modules[key] = file
+        end.merge(MODULE_OVERRIDES)
+      end
+      before_action do
+        expires_in 1.year, public: true
+      end
+      def static
+        file_path = STATIC_ASSETS.dig(params[:format]&.to_sym, params[:id]&.to_sym) || raise(ActionController::RoutingError, "Not Found")
+        send_file file_path, disposition: "inline"
+      end
+      def module
+        raise(ActionController::RoutingError, "Not Found") if params[:format] != "js"
+        file_path = self.class.js_modules[params[:id]&.to_sym] || raise(ActionController::RoutingError, "Not Found")
+        send_file file_path, disposition: "inline"
+      end
+    end
+  end
+end

data/app/controllers/spectator_sport/dashboard/session_windows_controller.rb ADDED Viewed

@@ -0,0 +1,34 @@
+module SpectatorSport
+  module Dashboard
+    class SessionWindowsController < ApplicationController
+      def show
+        @session_window = SessionWindow.find(params[:id])
+        @events = @session_window.events.page_after(nil)
+        @tags = SpectatorSport::SessionWindowTag.migrated? ? @session_window.session_window_tags.to_a : []
+      end
+      def events
+        response.content_type = "text/vnd.turbo-stream.html"
+        return head(:ok) if params[:after_event_id].blank?
+        session_window = SessionWindow.find(params[:id])
+        previous_event = session_window.events.find_by(id: params[:after_event_id])
+        @events = session_window.events.page_after(previous_event)
+        render layout: false
+      end
+      def details
+        @session_window = SessionWindow.find(params[:id])
+      end
+      def destroy
+        @session_window = SessionWindow.find(params[:id])
+        @session_window.events.delete_all
+        @session_window.delete
+        redirect_to root_path
+      end
+    end
+  end
+end

data/app/controllers/spectator_sport/dashboard/tags_controller.rb ADDED Viewed

@@ -0,0 +1,15 @@
+module SpectatorSport
+  module Dashboard
+    class TagsController < ApplicationController
+      def show
+        @tag = params[:name]
+        @session_windows = SpectatorSport::SessionWindowTag
+          .where(tag: @tag)
+          .includes(:session_window)
+          .order(created_at: :desc)
+          .limit(50)
+          .map(&:session_window)
+      end
+    end
+  end
+end

data/app/controllers/spectator_sport/events_controller.rb ADDED Viewed

@@ -0,0 +1,45 @@
+module SpectatorSport
+  class EventsController < ApplicationController
+    skip_before_action :verify_authenticity_token
+    def index
+    end
+    def create
+      data = if params.key?(:sessionId) && params.key?(:windowId) && params.key?(:events)
+        params.slice(:sessionId, :windowId, :events, :tags).stringify_keys
+      else
+        # beacon sends JSON in the request body
+        JSON.parse(request.body.read).slice("sessionId", "windowId", "events", "tags")
+      end
+      session_secure_id = data["sessionId"]
+      window_secure_id = data["windowId"]
+      events = data["events"]
+      session = Session.find_or_create_by(secure_id: session_secure_id)
+      window = SessionWindow.find_or_create_by(secure_id: window_secure_id, session: session)
+      records_data = events.map do |event|
+        { session_id: session.id, session_window_id: window.id, event_data: event, created_at: Time.at(event["timestamp"].to_f / 1000.0) }
+      end.to_a
+      Event.insert_all(records_data) if records_data.any?
+      last_event = records_data.max_by { |data| data[:created_at] }
+      window.update(updated_at: last_event[:created_at]) if last_event
+      if SpectatorSport::SessionWindowTag.migrated?
+        verifier = Rails.application.message_verifier(:spectator_sport_tag_recording)
+        Array(data["tags"]).first(20).each do |signed_tag|
+          tag_value = verifier.verified(signed_tag)
+          next unless tag_value.is_a?(String) && tag_value.present?
+          SessionWindowTag.find_or_create_by(session_window: window, tag: tag_value)
+        rescue ActiveRecord::RecordNotUnique
+          nil
+        end
+      end
+      render json: { message: "ok" }
+    end
+  end
+end

data/app/frontend/spectator_sport/dashboard/application.js ADDED Viewed

@@ -0,0 +1,31 @@
+/*jshint esversion: 6, strict: false */
+import "turbo";
+import { Application } from "stimulus";
+document.addEventListener("turbo:load", function() {
+  document.documentElement.removeAttribute("data-turbo-not-loaded");
+  document.documentElement.removeAttribute("data-turbo-loading");
+});
+document.addEventListener("turbo:submit-start", function(event) {
+  if (!event.target.closest("turbo-frame")) {
+    document.documentElement.setAttribute("data-turbo-loading", "1");
+  }
+});
+document.addEventListener("turbo:submit-end", function(event) {
+  if (!event.detail.fetchResponse?.redirected) {
+    document.documentElement.removeAttribute("data-turbo-loading");
+  }
+});
+window.Stimulus = Application.start();
+import ThemeController from "theme_controller";
+import PlayerController from "player_controller";
+import ClipboardController from "clipboard_controller";
+Stimulus.register("theme", ThemeController);
+Stimulus.register("player", PlayerController);
+Stimulus.register("clipboard", ClipboardController);

data/app/frontend/spectator_sport/dashboard/icons.svg ADDED Viewed

@@ -0,0 +1,79 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg">
+  <!-- https://icons.getbootstrap.com/icons/arrow-clockwise/ -->
+  <symbol id="arrow_clockwise" viewBox="0 0 16 16">
+    <path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z" />
+    <path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z" />
+  </symbol>
+  <!-- https://icons.getbootstrap.com/icons/check-circle/ -->
+  <symbol id="check" viewBox="0 0 16 16">
+    <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
+    <path d="M10.97 4.97a.235.235 0 0 0-.02.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05z" />
+  </symbol>
+  <!-- https://icons.getbootstrap.com/icons/circle-half/ -->
+  <symbol id="circle_half" viewBox="0 0 16 16">
+    <path d="M8 15A7 7 0 1 0 8 1v14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z" />
+  </symbol>
+  <!-- https://icons.getbootstrap.com/icons/clock/ -->
+  <symbol id="clock" viewBox="0 0 16 16">
+    <path d="M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z" />
+    <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0z" />
+  </symbol>
+  <!-- https://icons.getbootstrap.com/icons/dash-circle/ -->
+  <symbol id="dash_circle" viewBox="0 0 16 16">
+    <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
+    <path d="M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8z" />
+  </symbol>
+  <!-- https://icons.getbootstrap.com/icons/three-dots/ -->
+  <symbol id="dots" viewBox="0 0 16 16">
+    <path d="M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z" />
+  </symbol>
+  <!-- https://icons.getbootstrap.com/icons/eject/ -->
+  <symbol id="eject" viewBox="0 0 16 16">
+    <path d="M7.27 1.047a1 1 0 0 1 1.46 0l6.345 6.77c.6.638.146 1.683-.73 1.683H1.656C.78 9.5.326 8.455.926 7.816L7.27 1.047zM14.346 8.5 8 1.731 1.654 8.5h12.692zM.5 11.5a1 1 0 0 1 1-1h13a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1h-13a1 1 0 0 1-1-1v-1zm14 0h-13v1h13v-1z" />
+  </symbol>
+  <!-- https://icons.getbootstrap.com/icons/exclamation-circle/ -->
+  <symbol id="exclamation" viewBox="0 0 16 16">
+    <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
+    <path d="M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995z" />
+  </symbol>
+  <!-- https://icons.getbootstrap.com/icons/globe/ -->
+  <symbol id="globe" viewBox="0 0 16 16">
+    <path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8m7.5-6.923c-.67.204-1.335.82-1.887 1.855A8 8 0 0 0 5.145 4H7.5zM4.09 4a9.3 9.3 0 0 1 .64-1.539 7 7 0 0 1 .597-.933A7.03 7.03 0 0 0 2.255 4zm-.582 3.5c.03-.877.138-1.718.312-2.5H1.674a7 7 0 0 0-.656 2.5zM4.847 5a12.5 12.5 0 0 0-.338 2.5H7.5V5zM8.5 5v2.5h2.99a12.5 12.5 0 0 0-.337-2.5zM4.51 8.5a12.5 12.5 0 0 0 .337 2.5H7.5V8.5zm3.99 0V11h2.653c.187-.765.306-1.608.338-2.5zM5.145 12q.208.58.468 1.068c.552 1.035 1.218 1.65 1.887 1.855V12zm.182 2.472a7 7 0 0 1-.597-.933A9.3 9.3 0 0 1 4.09 12H2.255a7 7 0 0 0 3.072 2.472M3.82 11a13.7 13.7 0 0 1-.312-2.5h-2.49c.062.89.291 1.733.656 2.5zm6.853 3.472A7 7 0 0 0 13.745 12H11.91a9.3 9.3 0 0 1-.64 1.539 7 7 0 0 1-.597.933M8.5 12v2.923c.67-.204 1.335-.82 1.887-1.855q.26-.487.468-1.068zm3.68-1h2.146c.365-.767.594-1.61.656-2.5h-2.49a13.7 13.7 0 0 1-.312 2.5m2.802-3.5a7 7 0 0 0-.656-2.5H12.18c.174.782.282 1.623.312 2.5zM11.27 2.461c.247.464.462.98.64 1.539h1.835a7 7 0 0 0-3.072-2.472c.218.284.418.598.597.933M10.855 4a8 8 0 0 0-.468-1.068C9.835 1.897 9.17 1.282 8.5 1.077V4z" />
+  </symbol>
+  <!-- https://icons.getbootstrap.com/icons/info-circle/ -->
+  <symbol id="info" viewBox="0 0 16 16">
+    <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
+    <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z" />
+  </symbol>
+  <!-- https://icons.getbootstrap.com/icons/moon-stars-fill/ -->
+  <symbol id="moon_stars_fill" viewBox="0 0 16 16">
+    <path d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z" />
+    <path d="M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.734 1.734 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.734 1.734 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.734 1.734 0 0 0 1.097-1.097l.387-1.162zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L13.863.1z" />
+  </symbol>
+  <!-- https://icons.getbootstrap.com/icons/pause-btn/ -->
+  <symbol id="pause" viewBox="0 0 16 16">
+    <path d="M6 3.5a.5.5 0 0 1 .5.5v8a.5.5 0 0 1-1 0V4a.5.5 0 0 1 .5-.5zm4 0a.5.5 0 0 1 .5.5v8a.5.5 0 0 1-1 0V4a.5.5 0 0 1 .5-.5z" />
+  </symbol>
+  <!-- https://icons.getbootstrap.com/icons/play/ -->
+  <symbol id="play" viewBox="0 0 16 16">
+    <path d="M10.804 8 5 4.633v6.734L10.804 8zm.792-.696a.802.802 0 0 1 0 1.392l-6.363 3.692C4.713 12.69 4 12.345 4 11.692V4.308c0-.653.713-.998 1.233-.696l6.363 3.692z" />
+  </symbol>
+  <!-- https://icons.getbootstrap.com/icons/skip-forward/ -->
+  <symbol id="skip_forward" viewBox="0 0 16 16">
+    <path d="M15.5 3.5a.5.5 0 0 1 .5.5v8a.5.5 0 0 1-1 0V8.752l-6.267 3.636c-.52.302-1.233-.043-1.233-.696v-2.94l-6.267 3.636C.713 12.69 0 12.345 0 11.692V4.308c0-.653.713-.998 1.233-.696L7.5 7.248v-2.94c0-.653.713-.998 1.233-.696L15 7.248V4a.5.5 0 0 1 .5-.5zM1 4.633v6.734L6.804 8 1 4.633zm7.5 0v6.734L14.304 8 8.5 4.633z" />
+  </symbol>
+  <!-- https://icons.getbootstrap.com/icons/stop/ -->
+  <symbol id="stop" viewBox="0 0 16 16">
+    <path d="M3.5 5A1.5 1.5 0 0 1 5 3.5h6A1.5 1.5 0 0 1 12.5 5v6a1.5 1.5 0 0 1-1.5 1.5H5A1.5 1.5 0 0 1 3.5 11V5zM5 4.5a.5.5 0 0 0-.5.5v6a.5.5 0 0 0 .5.5h6a.5.5 0 0 0 .5-.5V5a.5.5 0 0 0-.5-.5H5z" />
+  </symbol>
+  <!-- https://icons.getbootstrap.com/icons/sun-fill/ -->
+  <symbol id="sun_fill" viewBox="0 0 16 16">
+    <path d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z" />
+  </symbol>
+  <!-- https://icons.getbootstrap.com/icons/trash/ -->
+  <symbol id="trash" viewBox="0 0 16 16">
+    <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z" />
+    <path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z" />
+  </symbol>
+</svg>

data/app/frontend/spectator_sport/dashboard/modules/clipboard_controller.js ADDED Viewed

@@ -0,0 +1,15 @@
+import { Controller } from "stimulus"
+export default class extends Controller {
+  static targets = [ "source", "button" ]
+  copy() {
+    navigator.clipboard.writeText(this.sourceTarget.dataset.url ?? this.sourceTarget.value).then(() => {
+      const originalText = this.buttonTarget.textContent;
+      this.buttonTarget.textContent = 'Copied!';
+      setTimeout(() => {
+        this.buttonTarget.textContent = originalText;
+      }, 2000);
+    });
+  }
+}

data/app/frontend/spectator_sport/dashboard/modules/player_controller.js ADDED Viewed

@@ -0,0 +1,60 @@
+// hello_controller.js
+import { Controller } from "stimulus"
+import { Player } from  'rrweb-player';
+export default class extends Controller {
+  static values = {
+    events: { type: Array, default: [] },
+  }
+  static targets = [ "player", "events", "linkUrl" ]
+  connect() {
+    this.player = new Player({
+      target: this.playerTarget,
+      props: {
+        events: this.eventsValue,
+        liveMode: true,
+      }
+    });
+    const urlParams = new URLSearchParams(window.location.search);
+    const time = urlParams.get('t');
+    if (time) {
+      const seconds = parseInt(time);
+      this.player.getReplayer().play(seconds * 1000);
+    }
+    let lastSeconds = null;
+    this.player.addEventListener('ui-update-current-time', (event) => {
+      const seconds = Math.floor(event.payload / 1000);
+      if (seconds === lastSeconds) return;
+      lastSeconds = seconds;
+      const url = `${window.location.origin}${window.location.pathname}?t=${seconds}`;
+      this.linkUrlTarget.value = `?t=${seconds}`;
+      this.linkUrlTarget.dataset.url = url;
+    });
+    const playerElement = this.playerTarget.getElementsByClassName("rr-player")[0];
+    playerElement.style.width = "100%";
+    playerElement.style.height = null;
+    playerElement.style.float = "none"
+    playerElement.style["border-radius"] = "inherit";
+    playerElement.style["box-shadow"] = "none";
+  }
+  eventsTargetConnected(element) {
+    if (!this.player) return;
+    const events = JSON.parse(element.dataset.events);
+    events.forEach(event => {
+      this.player.addEvent(event);
+    });
+    element.remove();
+  }
+  disconnect() {
+    this.player?.$destroy();
+  }
+}

data/app/frontend/spectator_sport/dashboard/modules/theme_controller.js ADDED Viewed

@@ -0,0 +1,44 @@
+// hello_controller.js
+import { Controller } from "stimulus"
+export default class extends Controller {
+  static targets = [ "dropdown", "button" ]
+  connect() {
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+      const theme = localStorage.getItem('spectator_sport-theme');
+      if (!["light", "dark"].includes(theme)) {
+        this.setTheme(this.autoTheme());
+      }
+    });
+    this.setTheme(this.getStoredTheme() || 'light');
+  }
+  change(event) {
+    const theme = event.params.value;
+    localStorage.setItem('spectator_sport-theme', theme);
+    this.setTheme(theme);
+  }
+  setTheme(theme) {
+    document.documentElement.setAttribute('data-bs-theme', theme === 'auto' ? this.autoTheme() : theme);
+    this.buttonTargets.forEach((button) => {
+      button.classList.remove('active');
+      if (button.dataset.themeValueParam === theme) {
+        button.classList.add('active');
+      }
+    });
+    const svg = this.buttonTargets.filter(b => b.matches(".active"))[0]?.querySelector('svg');
+    this.dropdownTarget.querySelector('svg').outerHTML = svg.outerHTML;
+  }
+  getStoredTheme() {
+    return localStorage.getItem('spectator_sport-theme');
+  }
+  autoTheme() {
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+  }
+}