diff --git a/backend/api/Dockerfile b/backend/api/Dockerfile
index cb9b4db8..fd6753bf 100644
--- a/backend/api/Dockerfile
+++ b/backend/api/Dockerfile
@@ -2,6 +2,10 @@ FROM node:14-alpine AS REACT_BUILD
WORKDIR /app
COPY interface/package.json .
+
+# This is a workaround for a known issue with the react app
+ENV SKIP_PREFLIGHT_CHECK=true
+
RUN npm install
COPY interface/ .
diff --git a/backend/api/config/config.exs b/backend/api/config/config.exs
index b49a15b3..a593b830 100644
--- a/backend/api/config/config.exs
+++ b/backend/api/config/config.exs
@@ -61,6 +61,12 @@ config :toia, Toia.Guardian,
issuer: "toia",
secret_key: System.get_env("GUARDIAN_SECRET_KEY")
+config :waffle,
+ storage: Waffle.Storage.Google.CloudStorage,
+ bucket: "toia-phoenix",
+ storage_dir: "/",
+ token_fetcher: Toia.WaffleTokenFetcher
+
# Import environment specific config. This must remain at the bottom
# of this file so it overrides the configuration defined above.
import_config "#{config_env()}.exs"
diff --git a/backend/api/lib/toia/application.ex b/backend/api/lib/toia/application.ex
index 0202e349..4a8214d1 100644
--- a/backend/api/lib/toia/application.ex
+++ b/backend/api/lib/toia/application.ex
@@ -2,6 +2,8 @@ defmodule Toia.Application do
# See https://hexdocs.pm/elixir/Application.html
# for more information on OTP Applications
@moduledoc false
+ require HTTPoison
+ alias Jason, as: JSON
use Application
alias EmailHandlers
@@ -17,6 +19,8 @@ defmodule Toia.Application do
{Phoenix.PubSub, name: Toia.PubSub},
# Start Finch
{Finch, name: Toia.Finch},
+ # Goth for OAuth with Google
+ {Goth, name: Toia.Goth},
# Start the Endpoint (http/https)
ToiaWeb.Endpoint
# Start a worker by calling: Toia.Worker.start_link(arg)
@@ -30,6 +34,7 @@ defmodule Toia.Application do
[:swoosh, :deliver_many, :exception],
], &EmailHandlers.handle_event/4, nil)
+ set_gcloud_cors_on_startup()
# See https://hexdocs.pm/elixir/Supervisor.html
# for other strategies and supported options
opts = [strategy: :one_for_one, name: Toia.Supervisor]
@@ -43,4 +48,47 @@ defmodule Toia.Application do
ToiaWeb.Endpoint.config_change(changed, removed)
:ok
end
+
+ def set_gcloud_cors_config(bucket_name) do
+ # Define your CORS configuration directly in code
+ cors_config = %{
+ cors: [
+ %{
+ origin: [System.get_env("API_URL")],
+ method: ["GET"],
+ responseHeader: ["Content-Type"],
+ maxAgeSeconds: 3600
+ }
+ ]
+ }
+
+ # Encode the configuration to a JSON string
+ body = JSON.encode!(cors_config)
+
+ # Construct the URL
+ url = "https://storage.googleapis.com/storage/v1/b/#{bucket_name}?fields=cors"
+
+ # Get the access token using Goth
+ {:ok, token} = Goth.Token.for_scope("https://www.googleapis.com/auth/devstorage.full_control")
+
+ # Set headers
+ headers = [
+ {"Authorization", "Bearer #{token.token}"},
+ {"Content-Type", "application/json"}
+ ]
+
+ # Make the PATCH request
+ HTTPoison.patch(url, body, headers)
+ end
+
+ defp set_gcloud_cors_on_startup do
+ bucket_name = "toia-phoenix"
+
+ case set_gcloud_cors_config(bucket_name) do
+ {:ok, response} ->
+ IO.puts("CORS configuration set successfully: #{inspect(response)}")
+ {:error, reason} ->
+ IO.puts("Failed to set CORS configuration: #{inspect(reason)}")
+ end
+ end
end
diff --git a/backend/api/lib/toia/streams.ex b/backend/api/lib/toia/streams.ex
index dd70b485..61110a2d 100644
--- a/backend/api/lib/toia/streams.ex
+++ b/backend/api/lib/toia/streams.ex
@@ -12,6 +12,8 @@ defmodule Toia.Streams do
alias Toia.Videos
alias Toia.VideosQuestionsStreams.VideoQuestionStream
alias Toia.ToiaUsers
+ alias Toia.StreamPhoto
+
alias ServiceHandlers.DialogueManager
alias ServiceHandlers.SmartSuggester
@@ -117,9 +119,26 @@ defmodule Toia.Streams do
destDir = "Accounts/#{user.first_name}_#{user.id}/StreamPic/"
destFilename = "#{attrs["name"]}_#{stream.id_stream}.jpg"
- case Videos.copyAndDelete(filePath, destDir, destFilename) do
- :ok -> {:ok, stream}
- {:error, reason} -> {:error, reason}
+ scope = %{
+ first_name: user.first_name,
+ toia_id: user.id,
+ file_name: destFilename,
+ stream_id: stream.id_stream,
+ stream_name: attrs["name"]
+ }
+
+ case System.get_env("ENVIRONMENT") do
+ "production" ->
+ case StreamPhoto.store({filePath, scope}) do
+ {:ok, _} -> {:ok, stream}
+ {:error, reason} -> {:error, reason}
+ end
+ "development" ->
+ case Videos.copyAndDelete(filePath, destDir, destFilename) do
+ :ok -> {:ok, stream}
+ {:error, reason} -> {:error, reason}
+ end
+ _ -> raise "Unknown environment"
end
end
end
@@ -232,7 +251,7 @@ defmodule Toia.Streams do
query =
from([_q, vqs, v] in query,
- select: %{id_video: vqs.id_video, answer: v.answer, duration_seconds: v.duration_seconds}
+ select: %{"id_video" => vqs.id_video, "answer" => v.answer, "duration_seconds" => v.duration_seconds}
)
all_videos = Repo.all(query)
@@ -260,7 +279,7 @@ defmodule Toia.Streams do
query =
from([_q, vqs, v] in query,
- select: %{id_video: vqs.id_video, answer: v.answer, duration_seconds: v.duration_seconds}
+ select: %{"id_video" => vqs.id_video, "answer" => v.answer, "duration_seconds" => v.duration_seconds}
)
all_videos = Repo.all(query)
@@ -313,7 +332,7 @@ defmodule Toia.Streams do
# A match was found
{:ok, x} ->
{:ok,
- Map.put(x, :url, Videos.getPlaybackUrl(streamUser.first_name, streamUser.id, x.id_video))}
+ Map.put(x, :url, Videos.getPlaybackUrl(streamUser.first_name, streamUser.id, Map.get(x, "id_video")))}
end
end
@@ -339,7 +358,7 @@ defmodule Toia.Streams do
Map.put(
x,
:url,
- Videos.getPlaybackUrl(streamUser.first_name, streamUser.id, x.id_video)
+ Videos.getPlaybackUrl(streamUser.first_name, streamUser.id, Map.get(x, "id_video"))
)}
end
else
@@ -428,6 +447,18 @@ defmodule Toia.Streams do
user_id = stream.toia_id
user = ToiaUsers.get_toia_user!(user_id)
- "#{System.get_env("API_URL")}/media/#{user.first_name}_#{user.id}/StreamPic/#{stream.name}_#{stream.id_stream}.jpg"
+ scope = %{
+ first_name: user.first_name,
+ toia_id: user.id,
+ file_name: "#{stream.name}_#{stream.id_stream}.jpg",
+ stream_id: stream.id_stream,
+ stream_name: stream.name
+ }
+
+ case System.get_env("ENVIRONMENT") do
+ "production" -> StreamPhoto.url({scope.file_name, scope}, signed: true)
+ "development" -> "#{System.get_env("API_URL")}/media/#{user.first_name}_#{user.id}/StreamPic/#{stream.name}_#{stream.id_stream}.jpg"
+ _ -> ""
+ end
end
end
diff --git a/backend/api/lib/toia/toia_users.ex b/backend/api/lib/toia/toia_users.ex
index 9a600c06..52e8f2bf 100644
--- a/backend/api/lib/toia/toia_users.ex
+++ b/backend/api/lib/toia/toia_users.ex
@@ -11,6 +11,7 @@ defmodule Toia.ToiaUsers do
alias Toia.Questions.Question
alias Toia.VideosQuestionsStreams.VideoQuestionStream
alias Toia.Videos.Video
+ alias Toia.StreamPhoto
@doc """
Returns the list of toia_user.
@@ -55,44 +56,27 @@ defmodule Toia.ToiaUsers do
"""
# `Accounts/${fields.firstName[0]}_${entry.insertId}/StreamPic/All_${stream_entry.insertId}.jpg`;
- def create_toia_user_with_stream(
- %{"profile_pic" => %Plug.Upload{path: path}} = toia_user_params
- ) do
+ def create_toia_user_with_stream(%{"profile_pic" => %Plug.Upload{path: path}} = toia_user_params) do
toia_user_params = Map.delete(toia_user_params, "profile_pic")
-
+
case create_toia_user_with_stream(toia_user_params) do
{:ok, toia_user, stream} ->
- destDir = "Accounts/#{toia_user.first_name}_#{toia_user.id}/StreamPic/"
- destFilename = "All_#{stream.id_stream}.jpg"
-
- case File.mkdir_p(destDir) do
- :ok ->
- case File.cp(path, destDir <> destFilename) do
- :ok ->
- case File.rm(path) do
- :ok ->
- {:ok, toia_user, stream}
-
- {:error, reason} ->
- IO.puts("Error deleting file")
- {:error_pic, reason}
- end
-
- {:error, reason} ->
- IO.puts("Error copying file")
- {:error_pic, reason}
- end
-
- {:error, reason} ->
- IO.puts("Error creating directory")
- {:error_pic, reason}
+ environ = System.get_env("ENVIRONMENT", "development")
+
+ case environ do
+ "production" ->
+ upload_to_google_cloud(path, toia_user, stream)
+ "development" ->
+ upload_locally(path, toia_user, stream)
+ _ ->
+ {:error, "Invalid environment when uploading file"}
end
-
+
{:error, changeset} ->
{:error, changeset}
end
end
-
+
def create_toia_user_with_stream(attrs) do
case create_toia_user(attrs) do
{:ok, %ToiaUser{} = toia_user} ->
@@ -117,6 +101,60 @@ defmodule Toia.ToiaUsers do
end
end
+ defp upload_locally(path, toia_user, stream) do
+ dest_dir = "Accounts/#{toia_user.first_name}_#{toia_user.id}/StreamPic/"
+ dest_filename = "All_#{stream.id_stream}.jpg"
+
+ case File.mkdir_p(dest_dir) do
+ :ok ->
+ case File.cp(path, dest_dir <> dest_filename) do
+ :ok ->
+ case File.rm(path) do
+ :ok ->
+ {:ok, toia_user, stream}
+
+ {:error, reason} ->
+ IO.puts("Error deleting file")
+ {:error_pic, reason}
+ end
+
+ {:error, reason} ->
+ IO.puts("Error copying file")
+ {:error_pic, reason}
+ end
+
+ {:error, reason} ->
+ IO.puts("Error creating directory")
+ {:error_pic, reason}
+ end
+ end
+
+ defp upload_to_google_cloud(path, toia_user, stream) do
+ scope = %{
+ first_name: toia_user.first_name,
+ toia_id: toia_user.id,
+ file_name: "All_#{stream.id_stream}.jpg",
+ stream_id: stream.id_stream,
+ stream_name: stream.name
+ }
+ case StreamPhoto.store({path, scope}) do
+ {:ok, _} ->
+ case File.rm(path) do
+ :ok ->
+ {:ok, toia_user, stream}
+
+ {:error, reason} ->
+ IO.puts("Error deleting file")
+ {:error_pic, reason}
+ end
+
+ {:error, reason} ->
+ IO.puts("Error uploading file")
+ IO.inspect(reason)
+ {:error_pic, reason}
+ end
+ end
+
def create_toia_user(attrs \\ %{}) do
%{"password" => password} = attrs
hash = Bcrypt.hash_pwd_salt(password)
diff --git a/backend/api/lib/toia/videos.ex b/backend/api/lib/toia/videos.ex
index 88022223..e4b0f8f2 100644
--- a/backend/api/lib/toia/videos.ex
+++ b/backend/api/lib/toia/videos.ex
@@ -13,6 +13,7 @@ defmodule Toia.Videos do
alias Toia.Questions.Question
alias Toia.Questions
alias Toia.ToiaUsers
+ alias Toia.VideoFiles
alias ServiceHandlers.QuestionSuggester
alias ServiceHandlers.GenerateEmbeddings
@@ -149,7 +150,14 @@ defmodule Toia.Videos do
Returns the playback url. Legacy: `/${entries[0].first_name}_${entries[0].id}/Videos/${req.body.params.playbackVideoID}`
"""
def getPlaybackUrl(first_name, toia_id, video_id) do
- "#{System.get_env("API_URL")}/media/#{first_name}_#{toia_id}/Videos/#{video_id}"
+ case System.get_env("ENVIRONMENT") do
+ "development" ->
+ "#{System.get_env("API_URL")}/media/#{first_name}_#{toia_id}/Videos/#{video_id}"
+ "production" ->
+ VideoFiles.url({video_id, %{first_name: first_name, toia_id: toia_id, id_video: video_id}}, signed: true)
+ _ -> raise "Unknown environment"
+ end
+
end
@doc """
@@ -249,7 +257,13 @@ defmodule Toia.Videos do
Returns the video path given a video id
"""
def getVideoPath(first_name, user_id, id_video) do
- "Accounts/#{first_name}_#{user_id}/Videos/#{id_video}"
+ case System.get_env("ENVIRONMENT") do
+ "development" ->
+ "Accounts/#{first_name}_#{user_id}/Videos/#{id_video}"
+ "production" ->
+ VideoFiles.url({id_video, %{first_name: first_name, toia_id: user_id, id_video: id_video}})
+ _ -> raise "Unknown environment"
+ end
end
def getDestPath(first_name, user_id) do
@@ -281,7 +295,25 @@ defmodule Toia.Videos do
Save the video file
"""
def saveVideoFile(first_name, user_id, id_video, upload_path) do
- copyAndDelete(upload_path, getDestPath(first_name, user_id), id_video)
+ case System.get_env("ENVIRONMENT") do
+ "development" ->
+ copyAndDelete(upload_path, getDestPath(first_name, user_id), id_video)
+ "production" ->
+ scope = %{
+ first_name: first_name,
+ toia_id: user_id,
+ id_video: id_video
+ }
+ case VideoFiles.store({upload_path, scope}) do
+ {:ok, _} ->
+ File.rm(upload_path)
+
+ {:error, reason} ->
+ IO.puts("Error uploading file")
+ {:error, reason}
+ end
+ _ -> raise "Unknown environment"
+ end
end
@doc """
diff --git a/backend/api/lib/toia_web/controllers/stream_controller.ex b/backend/api/lib/toia_web/controllers/stream_controller.ex
index 077ed55f..b4641ab4 100644
--- a/backend/api/lib/toia_web/controllers/stream_controller.ex
+++ b/backend/api/lib/toia_web/controllers/stream_controller.ex
@@ -3,6 +3,7 @@ defmodule ToiaWeb.StreamController do
alias Toia.Streams
alias Toia.Streams.Stream
+ alias Toia.ToiaUsers
action_fallback(ToiaWeb.FallbackController)
@@ -92,11 +93,18 @@ defmodule ToiaWeb.StreamController do
end
end
- def delete(conn, %{"id" => id}) do
+ def delete(%{assigns: %{current_user: user}} = conn, %{"id" => id}) do
stream = Streams.get_stream!(id)
- with {:ok, %Stream{}} <- Streams.delete_stream(stream) do
- send_resp(conn, :no_content, "")
+ # Check if the user owns the stream
+ if ToiaUsers.owns_stream(user.id, stream.id_stream) do
+ with {:ok, %Stream{}} <- Streams.delete_stream(stream) do
+ send_resp(conn, :no_content, "")
+ end
+ else
+ conn
+ |> put_status(:unauthorized)
+ |> json(%{error: "Unauthorized"})
end
end
diff --git a/backend/api/lib/toia_web/controllers/toia_user_controller.ex b/backend/api/lib/toia_web/controllers/toia_user_controller.ex
index d8dffc1a..8cc3985f 100644
--- a/backend/api/lib/toia_web/controllers/toia_user_controller.ex
+++ b/backend/api/lib/toia_web/controllers/toia_user_controller.ex
@@ -96,7 +96,8 @@ defmodule ToiaWeb.ToiaUserController do
end
end
- def delete(conn, %{"id" => id}) do
+ def delete(%{assigns: %{current_user: user}} = conn, _) do
+ id = user.id
toia_user = ToiaUsers.get_toia_user!(id)
with {:ok, %ToiaUser{}} <- ToiaUsers.delete_toia_user(toia_user) do
diff --git a/backend/api/lib/toia_web/router.ex b/backend/api/lib/toia_web/router.ex
index 73db05a1..60d047c8 100644
--- a/backend/api/lib/toia_web/router.ex
+++ b/backend/api/lib/toia_web/router.ex
@@ -39,6 +39,7 @@ defmodule ToiaWeb.Router do
post("/stream/:id/next", StreamController, :next)
# legacy: /api/getSmartQuestions
post("/stream/:id/smart_questions", StreamController, :smart_questions)
+ delete("/stream/:id", StreamController, :delete)
# legacy: /api/getAllStreams, /api/getStreamVideosCount
resources("/stream", StreamController, only: [:index, :create, :show])
@@ -75,6 +76,9 @@ defmodule ToiaWeb.Router do
# legacy: /api/questions/answered/:user_id, api/questions/answered/:user_id/:stream_id, api/questions/answered_filtered/:user_id/:stream_id
get("/question/answered", QuestionController, :index_answered)
+ # Delete users route
+ delete("/toia_user/", ToiaUserController, :delete)
+
# Player feedback routes
# legacy: api/save_player_feedback
resources("/player_feedback", PlayerFeedbackController, only: [:create])
diff --git a/backend/api/lib/toia_web/service_handlers/generate_embeddings.ex b/backend/api/lib/toia_web/service_handlers/generate_embeddings.ex
index 48db89b0..56e2577c 100644
--- a/backend/api/lib/toia_web/service_handlers/generate_embeddings.ex
+++ b/backend/api/lib/toia_web/service_handlers/generate_embeddings.ex
@@ -19,7 +19,7 @@ defmodule ServiceHandlers.GenerateEmbeddings do
query = "Question: #{question}; Answer: #{answer}"
payload = %{
- model: "text-search-ada-doc-001",
+ model: "text-embedding-ada-002",
input: query
}
@@ -33,4 +33,4 @@ defmodule ServiceHandlers.GenerateEmbeddings do
|> Enum.at(0)
|> Map.get("embedding")
end
-end
+end
\ No newline at end of file
diff --git a/backend/api/lib/toia_web/service_handlers/question_suggester.ex b/backend/api/lib/toia_web/service_handlers/question_suggester.ex
index 244fd084..564ca0b7 100644
--- a/backend/api/lib/toia_web/service_handlers/question_suggester.ex
+++ b/backend/api/lib/toia_web/service_handlers/question_suggester.ex
@@ -19,7 +19,7 @@ defmodule ServiceHandlers.QuestionSuggester do
new_a: body["latest_answer"],
n_suggestions: 3,
avatar_id: body["toia_id"],
- callback_url: "http://host.docker.internal:4000/api/question_suggestions?toia_id=#{body["toia_id"]}"
+ callback_url: "http://api:4000/api/question_suggestions?toia_id=#{body["toia_id"]}"
}
Poison.encode!(payload)
diff --git a/backend/api/lib/toia_web/uploaders/stream_photo.ex b/backend/api/lib/toia_web/uploaders/stream_photo.ex
new file mode 100644
index 00000000..8f415aec
--- /dev/null
+++ b/backend/api/lib/toia_web/uploaders/stream_photo.ex
@@ -0,0 +1,59 @@
+defmodule Toia.StreamPhoto do
+ use Waffle.Definition
+
+ # Include ecto support (requires package waffle_ecto installed):
+ # use Waffle.Ecto.Definition
+
+ @versions [:original]
+
+ # To add a thumbnail version:
+ # @versions [:original, :thumb]
+
+ # Override the bucket on a per definition basis:
+ # def bucket do
+ # :custom_bucket_name
+ # end
+
+ # def bucket({_file, scope}) do
+ # scope.bucket || bucket()
+ # end
+
+ # Whitelist file extensions:
+ # def validate({file, _}) do
+ # file_extension = file.file_name |> Path.extname() |> String.downcase()
+
+ # case Enum.member?(~w(.jpg .jpeg .gif .png), file_extension) do
+ # true -> :ok
+ # false -> {:error, "invalid file type"}
+ # end
+ # end
+
+ # Define a thumbnail transformation:
+ # def transform(:thumb, _) do
+ # {:convert, "-strip -thumbnail 250x250^ -gravity center -extent 250x250 -format png", :png}
+ # end
+
+ # Override the persisted filenames:
+ def filename(_version, {_file, scope}) do
+ scope.file_name
+ end
+
+ # Override the storage directory:
+ def storage_dir(_version, {_file, scope}) do
+ "Accounts/#{scope.first_name}_#{scope.toia_id}/StreamPic/"
+ end
+
+ # Provide a default URL if there hasn't been a file uploaded
+ # def default_url(version, scope) do
+ # "/images/avatars/default_#{version}.png"
+ # end
+
+ # Specify custom headers for s3 objects
+ # Available options are [:cache_control, :content_disposition,
+ # :content_encoding, :content_length, :content_type,
+ # :expect, :expires, :storage_class, :website_redirect_location]
+ #
+ # def s3_object_headers(version, {file, scope}) do
+ # [content_type: MIME.from_path(file.file_name)]
+ # end
+end
diff --git a/backend/api/lib/toia_web/uploaders/video_files.ex b/backend/api/lib/toia_web/uploaders/video_files.ex
new file mode 100644
index 00000000..cda69c45
--- /dev/null
+++ b/backend/api/lib/toia_web/uploaders/video_files.ex
@@ -0,0 +1,60 @@
+defmodule Toia.VideoFiles do
+ use Waffle.Definition
+
+ # Include ecto support (requires package waffle_ecto installed):
+ # use Waffle.Ecto.Definition
+
+ @versions [:original]
+
+ # To add a thumbnail version:
+ # @versions [:original, :thumb]
+
+ # Override the bucket on a per definition basis:
+ # def bucket do
+ # :custom_bucket_name
+ # end
+
+ # def bucket({_file, scope}) do
+ # scope.bucket || bucket()
+ # end
+
+ # Whitelist file extensions:
+ # def validate({file, _}) do
+ # file_extension = file.file_name |> Path.extname() |> String.downcase()
+ #
+ # case Enum.member?(~w(.jpg .jpeg .gif .png), file_extension) do
+ # true -> :ok
+ # false -> {:error, "invalid file type"}
+ # end
+ # end
+
+ # Define a thumbnail transformation:
+ # def transform(:thumb, _) do
+ # {:convert, "-strip -thumbnail 250x250^ -gravity center -extent 250x250 -format png", :png}
+ # end
+
+ # Override the persisted filenames:
+ def filename(_version, {_file, scope}) do
+ scope.id_video
+ end
+
+ # Override the storage directory:
+ def storage_dir(_version, {_file, scope}) do
+ # "Accounts/#{first_name}_#{user_id}/Videos/#{id_video}"
+ "Accounts/#{scope.first_name}_#{scope.toia_id}/Videos/"
+ end
+
+ # Provide a default URL if there hasn't been a file uploaded
+ # def default_url(version, scope) do
+ # "/images/avatars/default_#{version}.png"
+ # end
+
+ # Specify custom headers for s3 objects
+ # Available options are [:cache_control, :content_disposition,
+ # :content_encoding, :content_length, :content_type,
+ # :expect, :expires, :storage_class, :website_redirect_location]
+ #
+ # def s3_object_headers(version, {file, scope}) do
+ # [content_type: MIME.from_path(file.file_name)]
+ # end
+end
diff --git a/backend/api/lib/waffle_token_fetcher.ex b/backend/api/lib/waffle_token_fetcher.ex
new file mode 100644
index 00000000..f19cff60
--- /dev/null
+++ b/backend/api/lib/waffle_token_fetcher.ex
@@ -0,0 +1,8 @@
+defmodule Toia.WaffleTokenFetcher do
+ @behaviour Waffle.Storage.Google.Token.Fetcher
+
+ @impl true
+ def get_token(scope) when is_binary(scope) do
+ Goth.fetch!(Toia.Goth).token
+ end
+ end
\ No newline at end of file
diff --git a/backend/api/mix.exs b/backend/api/mix.exs
index b75c9a54..50ca63f0 100644
--- a/backend/api/mix.exs
+++ b/backend/api/mix.exs
@@ -46,11 +46,13 @@ defmodule Toia.MixProject do
{:guardian, "~> 2.0"},
{:bcrypt_elixir, "~> 3.0"},
{:httpoison, "~> 2.0"},
- {:poison, "~> 5.0"},
+ {:poison, "~> 4.0.1"},
{:cors_plug, "~> 3.0"},
{:tarams, "~> 1.7.1"},
{:gen_smtp, "~> 1.1"},
- {:amqp, "~> 3.3"}
+ {:amqp, "~> 3.3"},
+ {:goth, "~> 1.3"},
+ {:waffle_gcs, "~> 0.2"}
]
end
diff --git a/backend/api/mix.lock b/backend/api/mix.lock
index f1a13717..018b0ad5 100644
--- a/backend/api/mix.lock
+++ b/backend/api/mix.lock
@@ -1,66 +1,68 @@
%{
"amqp": {:hex, :amqp, "3.3.0", "056d9f4bac96c3ab5a904b321e70e78b91ba594766a1fc2f32afd9c016d9f43b", [:mix], [{:amqp_client, "~> 3.9", [hex: :amqp_client, repo: "hexpm", optional: false]}], "hexpm", "8d3ae139d2646c630d674a1b8d68c7f85134f9e8b2a1c3dd5621616994b10a8b"},
- "amqp_client": {:hex, :amqp_client, "3.12.2", "19770f1075fe697bea8aa77e29df38bd8a439f8d9f1d8a8fccb56ae0c7af73cd", [:make, :rebar3], [{:credentials_obfuscation, "3.4.0", [hex: :credentials_obfuscation, repo: "hexpm", optional: false]}, {:rabbit_common, "3.12.2", [hex: :rabbit_common, repo: "hexpm", optional: false]}], "hexpm", "004bbf9a4129751195660d5347fd89675564c298979c834189e9b24677afae94"},
- "bcrypt_elixir": {:hex, :bcrypt_elixir, "3.0.1", "9be815469e6bfefec40fa74658ecbbe6897acfb57614df1416eeccd4903f602c", [:make, :mix], [{:comeonin, "~> 5.3", [hex: :comeonin, repo: "hexpm", optional: false]}, {:elixir_make, "~> 0.6", [hex: :elixir_make, repo: "hexpm", optional: false]}], "hexpm", "486bb95efb645d1efc6794c1ddd776a186a9a713abf06f45708a6ce324fb96cf"},
- "castore": {:hex, :castore, "1.0.2", "0c6292ecf3e3f20b7c88408f00096337c4bfd99bd46cc2fe63413ddbe45b3573", [:mix], [], "hexpm", "40b2dd2836199203df8500e4a270f10fc006cc95adc8a319e148dc3077391d96"},
- "certifi": {:hex, :certifi, "2.9.0", "6f2a475689dd47f19fb74334859d460a2dc4e3252a3324bd2111b8f0429e7e21", [:rebar3], [], "hexpm", "266da46bdb06d6c6d35fde799bcb28d36d985d424ad7c08b5bb48f5b5cdd4641"},
- "comeonin": {:hex, :comeonin, "5.3.3", "2c564dac95a35650e9b6acfe6d2952083d8a08e4a89b93a481acb552b325892e", [:mix], [], "hexpm", "3e38c9c2cb080828116597ca8807bb482618a315bfafd98c90bc22a821cc84df"},
+ "amqp_client": {:hex, :amqp_client, "3.12.14", "2b677bc3f2e2234ba7517042b25d72071a79735042e91f9116bd3c176854b622", [:make, :rebar3], [{:credentials_obfuscation, "3.4.0", [hex: :credentials_obfuscation, repo: "hexpm", optional: false]}, {:rabbit_common, "3.12.14", [hex: :rabbit_common, repo: "hexpm", optional: false]}], "hexpm", "5f70b6c3b1a739790080da4fddc94a867e99f033c4b1edc20d6ff8b8fb4bd160"},
+ "bcrypt_elixir": {:hex, :bcrypt_elixir, "3.1.0", "0b110a9a6c619b19a7f73fa3004aa11d6e719a67e672d1633dc36b6b2290a0f7", [:make, :mix], [{:comeonin, "~> 5.3", [hex: :comeonin, repo: "hexpm", optional: false]}, {:elixir_make, "~> 0.6", [hex: :elixir_make, repo: "hexpm", optional: false]}], "hexpm", "2ad2acb5a8bc049e8d5aa267802631912bb80d5f4110a178ae7999e69dca1bf7"},
+ "castore": {:hex, :castore, "1.0.7", "b651241514e5f6956028147fe6637f7ac13802537e895a724f90bf3e36ddd1dd", [:mix], [], "hexpm", "da7785a4b0d2a021cd1292a60875a784b6caef71e76bf4917bdee1f390455cf5"},
+ "certifi": {:hex, :certifi, "2.12.0", "2d1cca2ec95f59643862af91f001478c9863c2ac9cb6e2f89780bfd8de987329", [:rebar3], [], "hexpm", "ee68d85df22e554040cdb4be100f33873ac6051387baf6a8f6ce82272340ff1c"},
+ "comeonin": {:hex, :comeonin, "5.4.0", "246a56ca3f41d404380fc6465650ddaa532c7f98be4bda1b4656b3a37cc13abe", [:mix], [], "hexpm", "796393a9e50d01999d56b7b8420ab0481a7538d0caf80919da493b4a6e51faf1"},
"cors_plug": {:hex, :cors_plug, "3.0.3", "7c3ac52b39624bc616db2e937c282f3f623f25f8d550068b6710e58d04a0e330", [:mix], [{:plug, "~> 1.13", [hex: :plug, repo: "hexpm", optional: false]}], "hexpm", "3f2d759e8c272ed3835fab2ef11b46bddab8c1ab9528167bd463b6452edf830d"},
- "corsica": {:hex, :corsica, "1.3.0", "bbec02ccbeca1fdf44ee23b25a8ae32f7c6c28fc127ef8836dd8420e8f65bd9b", [:mix], [{:plug, "~> 1.0", [hex: :plug, repo: "hexpm", optional: false]}], "hexpm", "8847ec817554047e9aa6d9933539cacb10c4ee60b58e0c15c3b380c5b737b35f"},
- "cowboy": {:hex, :cowboy, "2.10.0", "ff9ffeff91dae4ae270dd975642997afe2a1179d94b1887863e43f681a203e26", [:make, :rebar3], [{:cowlib, "2.12.1", [hex: :cowlib, repo: "hexpm", optional: false]}, {:ranch, "1.8.0", [hex: :ranch, repo: "hexpm", optional: false]}], "hexpm", "3afdccb7183cc6f143cb14d3cf51fa00e53db9ec80cdcd525482f5e99bc41d6b"},
+ "cowboy": {:hex, :cowboy, "2.12.0", "f276d521a1ff88b2b9b4c54d0e753da6c66dd7be6c9fca3d9418b561828a3731", [:make, :rebar3], [{:cowlib, "2.13.0", [hex: :cowlib, repo: "hexpm", optional: false]}, {:ranch, "1.8.0", [hex: :ranch, repo: "hexpm", optional: false]}], "hexpm", "8a7abe6d183372ceb21caa2709bec928ab2b72e18a3911aa1771639bef82651e"},
"cowboy_telemetry": {:hex, :cowboy_telemetry, "0.4.0", "f239f68b588efa7707abce16a84d0d2acf3a0f50571f8bb7f56a15865aae820c", [:rebar3], [{:cowboy, "~> 2.7", [hex: :cowboy, repo: "hexpm", optional: false]}, {:telemetry, "~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "7d98bac1ee4565d31b62d59f8823dfd8356a169e7fcbb83831b8a5397404c9de"},
- "cowlib": {:hex, :cowlib, "2.12.1", "a9fa9a625f1d2025fe6b462cb865881329b5caff8f1854d1cbc9f9533f00e1e1", [:make, :rebar3], [], "hexpm", "163b73f6367a7341b33c794c4e88e7dbfe6498ac42dcd69ef44c5bc5507c8db0"},
+ "cowlib": {:hex, :cowlib, "2.13.0", "db8f7505d8332d98ef50a3ef34b34c1afddec7506e4ee4dd4a3a266285d282ca", [:make, :rebar3], [], "hexpm", "e1e1284dc3fc030a64b1ad0d8382ae7e99da46c3246b815318a4b848873800a4"},
"credentials_obfuscation": {:hex, :credentials_obfuscation, "3.4.0", "34e18b126b3aefd6e8143776fbe1ceceea6792307c99ac5ee8687911f048cfd7", [:rebar3], [], "hexpm", "738ace0ed5545d2710d3f7383906fc6f6b582d019036e5269c4dbd85dbced566"},
- "db_connection": {:hex, :db_connection, "2.5.0", "bb6d4f30d35ded97b29fe80d8bd6f928a1912ca1ff110831edcd238a1973652c", [:mix], [{:telemetry, "~> 0.4 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "c92d5ba26cd69ead1ff7582dbb860adeedfff39774105a4f1c92cbb654b55aa2"},
+ "db_connection": {:hex, :db_connection, "2.6.0", "77d835c472b5b67fc4f29556dee74bf511bbafecdcaf98c27d27fa5918152086", [:mix], [{:telemetry, "~> 0.4 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "c2f992d15725e721ec7fbc1189d4ecdb8afef76648c746a8e1cad35e3b8a35f3"},
"decimal": {:hex, :decimal, "2.1.1", "5611dca5d4b2c3dd497dec8f68751f1f1a54755e8ed2a966c2633cf885973ad6", [:mix], [], "hexpm", "53cfe5f497ed0e7771ae1a475575603d77425099ba5faef9394932b35020ffcc"},
- "ecto": {:hex, :ecto, "3.10.1", "c6757101880e90acc6125b095853176a02da8f1afe056f91f1f90b80c9389822", [:mix], [{:decimal, "~> 1.6 or ~> 2.0", [hex: :decimal, repo: "hexpm", optional: false]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: true]}, {:telemetry, "~> 0.4 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "d2ac4255f1601bdf7ac74c0ed971102c6829dc158719b94bd30041bbad77f87a"},
- "ecto_sql": {:hex, :ecto_sql, "3.10.1", "6ea6b3036a0b0ca94c2a02613fd9f742614b5cfe494c41af2e6571bb034dd94c", [:mix], [{:db_connection, "~> 2.4.1 or ~> 2.5", [hex: :db_connection, repo: "hexpm", optional: false]}, {:ecto, "~> 3.10.0", [hex: :ecto, repo: "hexpm", optional: false]}, {:myxql, "~> 0.6.0", [hex: :myxql, repo: "hexpm", optional: true]}, {:postgrex, "~> 0.16.0 or ~> 0.17.0 or ~> 1.0", [hex: :postgrex, repo: "hexpm", optional: true]}, {:tds, "~> 2.1.1 or ~> 2.2", [hex: :tds, repo: "hexpm", optional: true]}, {:telemetry, "~> 0.4.0 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "f6a25bdbbd695f12c8171eaff0851fa4c8e72eec1e98c7364402dda9ce11c56b"},
- "elixir_make": {:hex, :elixir_make, "0.7.6", "67716309dc5d43e16b5abbd00c01b8df6a0c2ab54a8f595468035a50189f9169", [:mix], [{:castore, "~> 0.1 or ~> 1.0", [hex: :castore, repo: "hexpm", optional: true]}], "hexpm", "5a0569756b0f7873a77687800c164cca6dfc03a09418e6fcf853d78991f49940"},
- "ex_json_schema": {:hex, :ex_json_schema, "0.7.4", "09eb5b0c8184e5702bc89625a9d0c05c7a0a845d382e9f6f406a0fc1c9a8cc3f", [:mix], [], "hexpm", "45c67fa840f0d719a2b5578126dc29bcdc1f92499c0f61bcb8a3bcb5935f9684"},
- "expo": {:hex, :expo, "0.4.1", "1c61d18a5df197dfda38861673d392e642649a9cef7694d2f97a587b2cfb319b", [:mix], [], "hexpm", "2ff7ba7a798c8c543c12550fa0e2cbc81b95d4974c65855d8d15ba7b37a1ce47"},
- "finch": {:hex, :finch, "0.16.0", "40733f02c89f94a112518071c0a91fe86069560f5dbdb39f9150042f44dcfb1a", [:mix], [{:castore, "~> 0.1 or ~> 1.0", [hex: :castore, repo: "hexpm", optional: false]}, {:mime, "~> 1.0 or ~> 2.0", [hex: :mime, repo: "hexpm", optional: false]}, {:mint, "~> 1.3", [hex: :mint, repo: "hexpm", optional: false]}, {:nimble_options, "~> 0.4 or ~> 1.0", [hex: :nimble_options, repo: "hexpm", optional: false]}, {:nimble_pool, "~> 0.2.6 or ~> 1.0", [hex: :nimble_pool, repo: "hexpm", optional: false]}, {:telemetry, "~> 0.4 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "f660174c4d519e5fec629016054d60edd822cdfe2b7270836739ac2f97735ec5"},
+ "ecto": {:hex, :ecto, "3.11.2", "e1d26be989db350a633667c5cda9c3d115ae779b66da567c68c80cfb26a8c9ee", [:mix], [{:decimal, "~> 2.0", [hex: :decimal, repo: "hexpm", optional: false]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: true]}, {:telemetry, "~> 0.4 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "3c38bca2c6f8d8023f2145326cc8a80100c3ffe4dcbd9842ff867f7fc6156c65"},
+ "ecto_sql": {:hex, :ecto_sql, "3.11.3", "4eb7348ff8101fbc4e6bbc5a4404a24fecbe73a3372d16569526b0cf34ebc195", [:mix], [{:db_connection, "~> 2.4.1 or ~> 2.5", [hex: :db_connection, repo: "hexpm", optional: false]}, {:ecto, "~> 3.11.0", [hex: :ecto, repo: "hexpm", optional: false]}, {:myxql, "~> 0.6", [hex: :myxql, repo: "hexpm", optional: true]}, {:postgrex, "~> 0.16 or ~> 1.0", [hex: :postgrex, repo: "hexpm", optional: true]}, {:tds, "~> 2.1.1 or ~> 2.2", [hex: :tds, repo: "hexpm", optional: true]}, {:telemetry, "~> 0.4.0 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "e5f36e3d736b99c7fee3e631333b8394ade4bafe9d96d35669fca2d81c2be928"},
+ "elixir_make": {:hex, :elixir_make, "0.8.4", "4960a03ce79081dee8fe119d80ad372c4e7badb84c493cc75983f9d3bc8bde0f", [:mix], [{:castore, "~> 0.1 or ~> 1.0", [hex: :castore, repo: "hexpm", optional: true]}, {:certifi, "~> 2.0", [hex: :certifi, repo: "hexpm", optional: true]}], "hexpm", "6e7f1d619b5f61dfabd0a20aa268e575572b542ac31723293a4c1a567d5ef040"},
+ "expo": {:hex, :expo, "0.5.2", "beba786aab8e3c5431813d7a44b828e7b922bfa431d6bfbada0904535342efe2", [:mix], [], "hexpm", "8c9bfa06ca017c9cb4020fabe980bc7fdb1aaec059fd004c2ab3bff03b1c599c"},
+ "finch": {:hex, :finch, "0.18.0", "944ac7d34d0bd2ac8998f79f7a811b21d87d911e77a786bc5810adb75632ada4", [:mix], [{:castore, "~> 0.1 or ~> 1.0", [hex: :castore, repo: "hexpm", optional: false]}, {:mime, "~> 1.0 or ~> 2.0", [hex: :mime, repo: "hexpm", optional: false]}, {:mint, "~> 1.3", [hex: :mint, repo: "hexpm", optional: false]}, {:nimble_options, "~> 0.4 or ~> 1.0", [hex: :nimble_options, repo: "hexpm", optional: false]}, {:nimble_pool, "~> 0.2.6 or ~> 1.0", [hex: :nimble_pool, repo: "hexpm", optional: false]}, {:telemetry, "~> 0.4 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "69f5045b042e531e53edc2574f15e25e735b522c37e2ddb766e15b979e03aa65"},
"gen_smtp": {:hex, :gen_smtp, "1.2.0", "9cfc75c72a8821588b9b9fe947ae5ab2aed95a052b81237e0928633a13276fd3", [:rebar3], [{:ranch, ">= 1.8.0", [hex: :ranch, repo: "hexpm", optional: false]}], "hexpm", "5ee0375680bca8f20c4d85f58c2894441443a743355430ff33a783fe03296779"},
- "gettext": {:hex, :gettext, "0.22.1", "e7942988383c3d9eed4bdc22fc63e712b655ae94a672a27e4900e3d4a2c43581", [:mix], [{:expo, "~> 0.4.0", [hex: :expo, repo: "hexpm", optional: false]}], "hexpm", "ad105b8dab668ee3f90c0d3d94ba75e9aead27a62495c101d94f2657a190ac5d"},
- "guardian": {:hex, :guardian, "2.3.1", "2b2d78dc399a7df182d739ddc0e566d88723299bfac20be36255e2d052fd215d", [:mix], [{:jose, "~> 1.8", [hex: :jose, repo: "hexpm", optional: false]}, {:plug, "~> 1.3.3 or ~> 1.4", [hex: :plug, repo: "hexpm", optional: true]}], "hexpm", "bbe241f9ca1b09fad916ad42d6049d2600bbc688aba5b3c4a6c82592a54274c3"},
- "hackney": {:hex, :hackney, "1.18.1", "f48bf88f521f2a229fc7bae88cf4f85adc9cd9bcf23b5dc8eb6a1788c662c4f6", [:rebar3], [{:certifi, "~> 2.9.0", [hex: :certifi, repo: "hexpm", optional: false]}, {:idna, "~> 6.1.0", [hex: :idna, repo: "hexpm", optional: false]}, {:metrics, "~> 1.0.0", [hex: :metrics, repo: "hexpm", optional: false]}, {:mimerl, "~> 1.1", [hex: :mimerl, repo: "hexpm", optional: false]}, {:parse_trans, "3.3.1", [hex: :parse_trans, repo: "hexpm", optional: false]}, {:ssl_verify_fun, "~> 1.1.0", [hex: :ssl_verify_fun, repo: "hexpm", optional: false]}, {:unicode_util_compat, "~> 0.7.0", [hex: :unicode_util_compat, repo: "hexpm", optional: false]}], "hexpm", "a4ecdaff44297e9b5894ae499e9a070ea1888c84afdd1fd9b7b2bc384950128e"},
- "hpax": {:hex, :hpax, "0.1.2", "09a75600d9d8bbd064cdd741f21fc06fc1f4cf3d0fcc335e5aa19be1a7235c84", [:mix], [], "hexpm", "2c87843d5a23f5f16748ebe77969880e29809580efdaccd615cd3bed628a8c13"},
- "httpoison": {:hex, :httpoison, "2.1.0", "655fd9a7b0b95ee3e9a3b535cf7ac8e08ef5229bab187fa86ac4208b122d934b", [:mix], [{:hackney, "~> 1.17", [hex: :hackney, repo: "hexpm", optional: false]}], "hexpm", "fc455cb4306b43827def4f57299b2d5ac8ac331cb23f517e734a4b78210a160c"},
+ "gettext": {:hex, :gettext, "0.24.0", "6f4d90ac5f3111673cbefc4ebee96fe5f37a114861ab8c7b7d5b30a1108ce6d8", [:mix], [{:expo, "~> 0.5.1", [hex: :expo, repo: "hexpm", optional: false]}], "hexpm", "bdf75cdfcbe9e4622dd18e034b227d77dd17f0f133853a1c73b97b3d6c770e8b"},
+ "google_api_storage": {:hex, :google_api_storage, "0.37.0", "e8f0c54fc8e6811854bba7d9b6f4ba43cd8e6f5eb01032a9701a5f662cda6fb9", [:mix], [{:google_gax, "~> 0.4", [hex: :google_gax, repo: "hexpm", optional: false]}], "hexpm", "25d2a6ab201531d48d31e27dd429f1445be7e98850f019cab1bebd4feb3d4072"},
+ "google_gax": {:hex, :google_gax, "0.4.0", "83651f8561c02a295826cb96b4bddde030e2369747bbddc592c4569526bafe94", [:mix], [{:poison, ">= 3.0.0 and < 5.0.0", [hex: :poison, repo: "hexpm", optional: false]}, {:tesla, "~> 1.2", [hex: :tesla, repo: "hexpm", optional: false]}], "hexpm", "a95d36f1dd753ab31268dd8bb6de9911243c911cfda9080f64778f6297b9ac57"},
+ "goth": {:hex, :goth, "1.4.3", "80e86225ae174844e6a77b61982fafadfc715277db465e0956348d8bdd56b231", [:mix], [{:finch, "~> 0.17", [hex: :finch, repo: "hexpm", optional: false]}, {:jason, "~> 1.1", [hex: :jason, repo: "hexpm", optional: false]}, {:jose, "~> 1.11", [hex: :jose, repo: "hexpm", optional: false]}], "hexpm", "34e2012ed1af2fe2446083da60a988fd9829943d30e4447832646c3a6863a7e6"},
+ "guardian": {:hex, :guardian, "2.3.2", "78003504b987f2b189d76ccf9496ceaa6a454bb2763627702233f31eb7212881", [:mix], [{:jose, "~> 1.8", [hex: :jose, repo: "hexpm", optional: false]}, {:plug, "~> 1.3.3 or ~> 1.4", [hex: :plug, repo: "hexpm", optional: true]}], "hexpm", "b189ff38cd46a22a8a824866a6867ca8722942347f13c33f7d23126af8821b52"},
+ "hackney": {:hex, :hackney, "1.20.1", "8d97aec62ddddd757d128bfd1df6c5861093419f8f7a4223823537bad5d064e2", [:rebar3], [{:certifi, "~> 2.12.0", [hex: :certifi, repo: "hexpm", optional: false]}, {:idna, "~> 6.1.0", [hex: :idna, repo: "hexpm", optional: false]}, {:metrics, "~> 1.0.0", [hex: :metrics, repo: "hexpm", optional: false]}, {:mimerl, "~> 1.1", [hex: :mimerl, repo: "hexpm", optional: false]}, {:parse_trans, "3.4.1", [hex: :parse_trans, repo: "hexpm", optional: false]}, {:ssl_verify_fun, "~> 1.1.0", [hex: :ssl_verify_fun, repo: "hexpm", optional: false]}, {:unicode_util_compat, "~> 0.7.0", [hex: :unicode_util_compat, repo: "hexpm", optional: false]}], "hexpm", "fe9094e5f1a2a2c0a7d10918fee36bfec0ec2a979994cff8cfe8058cd9af38e3"},
+ "hpax": {:hex, :hpax, "0.2.0", "5a58219adcb75977b2edce5eb22051de9362f08236220c9e859a47111c194ff5", [:mix], [], "hexpm", "bea06558cdae85bed075e6c036993d43cd54d447f76d8190a8db0dc5893fa2f1"},
+ "httpoison": {:hex, :httpoison, "2.2.1", "87b7ed6d95db0389f7df02779644171d7319d319178f6680438167d7b69b1f3d", [:mix], [{:hackney, "~> 1.17", [hex: :hackney, repo: "hexpm", optional: false]}], "hexpm", "51364e6d2f429d80e14fe4b5f8e39719cacd03eb3f9a9286e61e216feac2d2df"},
"idna": {:hex, :idna, "6.1.1", "8a63070e9f7d0c62eb9d9fcb360a7de382448200fbbd1b106cc96d3d8099df8d", [:rebar3], [{:unicode_util_compat, "~> 0.7.0", [hex: :unicode_util_compat, repo: "hexpm", optional: false]}], "hexpm", "92376eb7894412ed19ac475e4a86f7b413c1b9fbb5bd16dccd57934157944cea"},
- "jason": {:hex, :jason, "1.4.0", "e855647bc964a44e2f67df589ccf49105ae039d4179db7f6271dfd3843dc27e6", [:mix], [{:decimal, "~> 1.0 or ~> 2.0", [hex: :decimal, repo: "hexpm", optional: true]}], "hexpm", "79a3791085b2a0f743ca04cec0f7be26443738779d09302e01318f97bdb82121"},
- "jose": {:hex, :jose, "1.11.5", "3bc2d75ffa5e2c941ca93e5696b54978323191988eb8d225c2e663ddfefd515e", [:mix, :rebar3], [], "hexpm", "dcd3b215bafe02ea7c5b23dafd3eb8062a5cd8f2d904fd9caa323d37034ab384"},
- "mail": {:hex, :mail, "0.2.3", "2c6bb5f8a5f74845fa50ecd0fb45ea16b164026f285f45104f1c4c078cd616d4", [:mix], [], "hexpm", "932b398fa9c69fdf290d7ff63175826e0f1e24414d5b0763bb00a2acfc6c6bf5"},
+ "jason": {:hex, :jason, "1.4.1", "af1504e35f629ddcdd6addb3513c3853991f694921b1b9368b0bd32beb9f1b63", [:mix], [{:decimal, "~> 1.0 or ~> 2.0", [hex: :decimal, repo: "hexpm", optional: true]}], "hexpm", "fbb01ecdfd565b56261302f7e1fcc27c4fb8f32d56eab74db621fc154604a7a1"},
+ "jose": {:hex, :jose, "1.11.10", "a903f5227417bd2a08c8a00a0cbcc458118be84480955e8d251297a425723f83", [:mix, :rebar3], [], "hexpm", "0d6cd36ff8ba174db29148fc112b5842186b68a90ce9fc2b3ec3afe76593e614"},
"metrics": {:hex, :metrics, "1.0.1", "25f094dea2cda98213cecc3aeff09e940299d950904393b2a29d191c346a8486", [:rebar3], [], "hexpm", "69b09adddc4f74a40716ae54d140f93beb0fb8978d8636eaded0c31b6f099f16"},
- "mime": {:hex, :mime, "2.0.3", "3676436d3d1f7b81b5a2d2bd8405f412c677558c81b1c92be58c00562bb59095", [:mix], [], "hexpm", "27a30bf0db44d25eecba73755acf4068cbfe26a4372f9eb3e4ea3a45956bff6b"},
- "mimerl": {:hex, :mimerl, "1.2.0", "67e2d3f571088d5cfd3e550c383094b47159f3eee8ffa08e64106cdf5e981be3", [:rebar3], [], "hexpm", "f278585650aa581986264638ebf698f8bb19df297f66ad91b18910dfc6e19323"},
- "mint": {:hex, :mint, "1.5.1", "8db5239e56738552d85af398798c80648db0e90f343c8469f6c6d8898944fb6f", [:mix], [{:castore, "~> 0.1.0 or ~> 1.0", [hex: :castore, repo: "hexpm", optional: true]}, {:hpax, "~> 0.1.1", [hex: :hpax, repo: "hexpm", optional: false]}], "hexpm", "4a63e1e76a7c3956abd2c72f370a0d0aecddc3976dea5c27eccbecfa5e7d5b1e"},
- "myxql": {:hex, :myxql, "0.6.3", "3d77683a09f1227abb8b73d66b275262235c5cae68182f0cfa5897d72a03700e", [:mix], [{:db_connection, "~> 2.4.1 or ~> 2.5", [hex: :db_connection, repo: "hexpm", optional: false]}, {:decimal, "~> 1.6 or ~> 2.0", [hex: :decimal, repo: "hexpm", optional: false]}, {:geo, "~> 3.4", [hex: :geo, repo: "hexpm", optional: true]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: true]}, {:table, "~> 0.1.0", [hex: :table, repo: "hexpm", optional: true]}], "hexpm", "af9eb517ddaced5c5c28e8749015493757fd4413f2cfccea449c466d405d9f51"},
- "nimble_options": {:hex, :nimble_options, "1.0.2", "92098a74df0072ff37d0c12ace58574d26880e522c22801437151a159392270e", [:mix], [], "hexpm", "fd12a8db2021036ce12a309f26f564ec367373265b53e25403f0ee697380f1b8"},
- "nimble_pool": {:hex, :nimble_pool, "1.0.0", "5eb82705d138f4dd4423f69ceb19ac667b3b492ae570c9f5c900bb3d2f50a847", [:mix], [], "hexpm", "80be3b882d2d351882256087078e1b1952a28bf98d0a287be87e4a24a710b67a"},
- "parse_trans": {:hex, :parse_trans, "3.3.1", "16328ab840cc09919bd10dab29e431da3af9e9e7e7e6f0089dd5a2d2820011d8", [:rebar3], [], "hexpm", "07cd9577885f56362d414e8c4c4e6bdf10d43a8767abb92d24cbe8b24c54888b"},
- "phoenix": {:hex, :phoenix, "1.7.2", "c375ffb482beb4e3d20894f84dd7920442884f5f5b70b9f4528cbe0cedefec63", [:mix], [{:castore, ">= 0.0.0", [hex: :castore, repo: "hexpm", optional: false]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: true]}, {:phoenix_pubsub, "~> 2.1", [hex: :phoenix_pubsub, repo: "hexpm", optional: false]}, {:phoenix_template, "~> 1.0", [hex: :phoenix_template, repo: "hexpm", optional: false]}, {:phoenix_view, "~> 2.0", [hex: :phoenix_view, repo: "hexpm", optional: true]}, {:plug, "~> 1.14", [hex: :plug, repo: "hexpm", optional: false]}, {:plug_cowboy, "~> 2.6", [hex: :plug_cowboy, repo: "hexpm", optional: true]}, {:plug_crypto, "~> 1.2", [hex: :plug_crypto, repo: "hexpm", optional: false]}, {:telemetry, "~> 0.4 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}, {:websock_adapter, "~> 0.4", [hex: :websock_adapter, repo: "hexpm", optional: false]}], "hexpm", "1ebca94b32b4d0e097ab2444a9742ed8ff3361acad17365e4e6b2e79b4792159"},
- "phoenix_ecto": {:hex, :phoenix_ecto, "4.4.1", "fe7a02387a7d26002a46b97e9879591efee7ebffe5f5e114fd196632e6e4a08d", [:mix], [{:ecto, "~> 3.5", [hex: :ecto, repo: "hexpm", optional: false]}, {:phoenix_html, "~> 2.14.2 or ~> 3.0", [hex: :phoenix_html, repo: "hexpm", optional: true]}, {:plug, "~> 1.9", [hex: :plug, repo: "hexpm", optional: false]}], "hexpm", "ddccf8b4966180afe7630b105edb3402b1ca485e7468109540d262e842048ba4"},
- "phoenix_html": {:hex, :phoenix_html, "3.3.1", "4788757e804a30baac6b3fc9695bf5562465dd3f1da8eb8460ad5b404d9a2178", [:mix], [{:plug, "~> 1.5", [hex: :plug, repo: "hexpm", optional: true]}], "hexpm", "bed1906edd4906a15fd7b412b85b05e521e1f67c9a85418c55999277e553d0d3"},
+ "mime": {:hex, :mime, "2.0.5", "dc34c8efd439abe6ae0343edbb8556f4d63f178594894720607772a041b04b02", [:mix], [], "hexpm", "da0d64a365c45bc9935cc5c8a7fc5e49a0e0f9932a761c55d6c52b142780a05c"},
+ "mimerl": {:hex, :mimerl, "1.3.0", "d0cd9fc04b9061f82490f6581e0128379830e78535e017f7780f37fea7545726", [:rebar3], [], "hexpm", "a1e15a50d1887217de95f0b9b0793e32853f7c258a5cd227650889b38839fe9d"},
+ "mint": {:hex, :mint, "1.6.1", "065e8a5bc9bbd46a41099dfea3e0656436c5cbcb6e741c80bd2bad5cd872446f", [:mix], [{:castore, "~> 0.1.0 or ~> 1.0", [hex: :castore, repo: "hexpm", optional: true]}, {:hpax, "~> 0.1.1 or ~> 0.2.0", [hex: :hpax, repo: "hexpm", optional: false]}], "hexpm", "4fc518dcc191d02f433393a72a7ba3f6f94b101d094cb6bf532ea54c89423780"},
+ "myxql": {:hex, :myxql, "0.7.0", "3382f139b0b0da977a8fc33c8cded125e20df2e400f8d7b7e674fa62a7e077dd", [:mix], [{:db_connection, "~> 2.4.1 or ~> 2.5", [hex: :db_connection, repo: "hexpm", optional: false]}, {:decimal, "~> 1.6 or ~> 2.0", [hex: :decimal, repo: "hexpm", optional: false]}, {:geo, "~> 3.4", [hex: :geo, repo: "hexpm", optional: true]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: true]}, {:table, "~> 0.1.0", [hex: :table, repo: "hexpm", optional: true]}], "hexpm", "40e4b7ad4973c8b895e86a3de04ff7a79c2cf72b9f2bddef7717afb4ab36d8c0"},
+ "nimble_options": {:hex, :nimble_options, "1.1.1", "e3a492d54d85fc3fd7c5baf411d9d2852922f66e69476317787a7b2bb000a61b", [:mix], [], "hexpm", "821b2470ca9442c4b6984882fe9bb0389371b8ddec4d45a9504f00a66f650b44"},
+ "nimble_pool": {:hex, :nimble_pool, "1.1.0", "bf9c29fbdcba3564a8b800d1eeb5a3c58f36e1e11d7b7fb2e084a643f645f06b", [:mix], [], "hexpm", "af2e4e6b34197db81f7aad230c1118eac993acc0dae6bc83bac0126d4ae0813a"},
+ "parse_trans": {:hex, :parse_trans, "3.4.1", "6e6aa8167cb44cc8f39441d05193be6e6f4e7c2946cb2759f015f8c56b76e5ff", [:rebar3], [], "hexpm", "620a406ce75dada827b82e453c19cf06776be266f5a67cff34e1ef2cbb60e49a"},
+ "phoenix": {:hex, :phoenix, "1.7.14", "a7d0b3f1bc95987044ddada111e77bd7f75646a08518942c72a8440278ae7825", [:mix], [{:castore, ">= 0.0.0", [hex: :castore, repo: "hexpm", optional: false]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: true]}, {:phoenix_pubsub, "~> 2.1", [hex: :phoenix_pubsub, repo: "hexpm", optional: false]}, {:phoenix_template, "~> 1.0", [hex: :phoenix_template, repo: "hexpm", optional: false]}, {:phoenix_view, "~> 2.0", [hex: :phoenix_view, repo: "hexpm", optional: true]}, {:plug, "~> 1.14", [hex: :plug, repo: "hexpm", optional: false]}, {:plug_cowboy, "~> 2.7", [hex: :plug_cowboy, repo: "hexpm", optional: true]}, {:plug_crypto, "~> 1.2 or ~> 2.0", [hex: :plug_crypto, repo: "hexpm", optional: false]}, {:telemetry, "~> 0.4 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}, {:websock_adapter, "~> 0.5.3", [hex: :websock_adapter, repo: "hexpm", optional: false]}], "hexpm", "c7859bc56cc5dfef19ecfc240775dae358cbaa530231118a9e014df392ace61a"},
+ "phoenix_ecto": {:hex, :phoenix_ecto, "4.6.1", "96798325fab2fed5a824ca204e877b81f9afd2e480f581e81f7b4b64a5a477f2", [:mix], [{:ecto, "~> 3.5", [hex: :ecto, repo: "hexpm", optional: false]}, {:phoenix_html, "~> 2.14.2 or ~> 3.0 or ~> 4.1", [hex: :phoenix_html, repo: "hexpm", optional: true]}, {:plug, "~> 1.9", [hex: :plug, repo: "hexpm", optional: false]}, {:postgrex, "~> 0.17", [hex: :postgrex, repo: "hexpm", optional: true]}], "hexpm", "0ae544ff99f3c482b0807c5cec2c8289e810ecacabc04959d82c3337f4703391"},
+ "phoenix_html": {:hex, :phoenix_html, "3.3.4", "42a09fc443bbc1da37e372a5c8e6755d046f22b9b11343bf885067357da21cb3", [:mix], [{:plug, "~> 1.5", [hex: :plug, repo: "hexpm", optional: true]}], "hexpm", "0249d3abec3714aff3415e7ee3d9786cb325be3151e6c4b3021502c585bf53fb"},
"phoenix_live_dashboard": {:hex, :phoenix_live_dashboard, "0.7.2", "97cc4ff2dba1ebe504db72cb45098cb8e91f11160528b980bd282cc45c73b29c", [:mix], [{:ecto, "~> 3.6.2 or ~> 3.7", [hex: :ecto, repo: "hexpm", optional: true]}, {:ecto_mysql_extras, "~> 0.5", [hex: :ecto_mysql_extras, repo: "hexpm", optional: true]}, {:ecto_psql_extras, "~> 0.7", [hex: :ecto_psql_extras, repo: "hexpm", optional: true]}, {:mime, "~> 1.6 or ~> 2.0", [hex: :mime, repo: "hexpm", optional: false]}, {:phoenix_live_view, "~> 0.18.3", [hex: :phoenix_live_view, repo: "hexpm", optional: false]}, {:telemetry_metrics, "~> 0.6 or ~> 1.0", [hex: :telemetry_metrics, repo: "hexpm", optional: false]}], "hexpm", "0e5fdf063c7a3b620c566a30fcf68b7ee02e5e46fe48ee46a6ec3ba382dc05b7"},
"phoenix_live_view": {:hex, :phoenix_live_view, "0.18.18", "1f38fbd7c363723f19aad1a04b5490ff3a178e37daaf6999594d5f34796c47fc", [:mix], [{:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: true]}, {:phoenix, "~> 1.6.15 or ~> 1.7.0", [hex: :phoenix, repo: "hexpm", optional: false]}, {:phoenix_html, "~> 3.3", [hex: :phoenix_html, repo: "hexpm", optional: false]}, {:phoenix_template, "~> 1.0", [hex: :phoenix_template, repo: "hexpm", optional: false]}, {:phoenix_view, "~> 2.0", [hex: :phoenix_view, repo: "hexpm", optional: true]}, {:telemetry, "~> 0.4.2 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "a5810d0472f3189ede6d2a95bda7f31c6113156b91784a3426cb0ab6a6d85214"},
- "phoenix_pubsub": {:hex, :phoenix_pubsub, "2.1.2", "a4950b63ace57720b0fc1c6da083c53346b36f99021de89595cc4f026288ff51", [:mix], [], "hexpm", "45741676a94c71f9afdfed9d22d49b6856c026ff504db04e3dc03a1d86f8201c"},
- "phoenix_swagger": {:hex, :phoenix_swagger, "0.8.3", "298d6204802409d3b0b4fc1013873839478707cf3a62532a9e10fec0e26d0e37", [:mix], [{:ex_json_schema, "~> 0.7.1", [hex: :ex_json_schema, repo: "hexpm", optional: true]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: true]}, {:plug, "~> 1.11", [hex: :plug, repo: "hexpm", optional: false]}, {:poison, "~> 2.2 or ~> 3.0", [hex: :poison, repo: "hexpm", optional: true]}], "hexpm", "3bc0fa9f5b679b8a61b90a52b2c67dd932320e9a84a6f91a4af872a0ab367337"},
- "phoenix_template": {:hex, :phoenix_template, "1.0.1", "85f79e3ad1b0180abb43f9725973e3b8c2c3354a87245f91431eec60553ed3ef", [:mix], [{:phoenix_html, "~> 2.14.2 or ~> 3.0", [hex: :phoenix_html, repo: "hexpm", optional: true]}], "hexpm", "157dc078f6226334c91cb32c1865bf3911686f8bcd6bcff86736f6253e6993ee"},
- "plug": {:hex, :plug, "1.14.2", "cff7d4ec45b4ae176a227acd94a7ab536d9b37b942c8e8fa6dfc0fff98ff4d80", [:mix], [{:mime, "~> 1.0 or ~> 2.0", [hex: :mime, repo: "hexpm", optional: false]}, {:plug_crypto, "~> 1.1.1 or ~> 1.2", [hex: :plug_crypto, repo: "hexpm", optional: false]}, {:telemetry, "~> 0.4.3 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "842fc50187e13cf4ac3b253d47d9474ed6c296a8732752835ce4a86acdf68d13"},
- "plug_cowboy": {:hex, :plug_cowboy, "2.6.1", "9a3bbfceeb65eff5f39dab529e5cd79137ac36e913c02067dba3963a26efe9b2", [:mix], [{:cowboy, "~> 2.7", [hex: :cowboy, repo: "hexpm", optional: false]}, {:cowboy_telemetry, "~> 0.3", [hex: :cowboy_telemetry, repo: "hexpm", optional: false]}, {:plug, "~> 1.14", [hex: :plug, repo: "hexpm", optional: false]}], "hexpm", "de36e1a21f451a18b790f37765db198075c25875c64834bcc82d90b309eb6613"},
- "plug_crypto": {:hex, :plug_crypto, "1.2.5", "918772575e48e81e455818229bf719d4ab4181fcbf7f85b68a35620f78d89ced", [:mix], [], "hexpm", "26549a1d6345e2172eb1c233866756ae44a9609bd33ee6f99147ab3fd87fd842"},
- "poison": {:hex, :poison, "5.0.0", "d2b54589ab4157bbb82ec2050757779bfed724463a544b6e20d79855a9e43b24", [:mix], [{:decimal, "~> 2.0", [hex: :decimal, repo: "hexpm", optional: true]}], "hexpm", "11dc6117c501b80c62a7594f941d043982a1bd05a1184280c0d9166eb4d8d3fc"},
- "rabbit_common": {:hex, :rabbit_common, "3.12.2", "fa46f2954f6f5e28d69afdefb10f15c4782402411fac743bc2459a07dcf83b4c", [:make, :rebar3], [{:credentials_obfuscation, "3.4.0", [hex: :credentials_obfuscation, repo: "hexpm", optional: false]}, {:recon, "2.5.3", [hex: :recon, repo: "hexpm", optional: false]}, {:thoas, "1.0.0", [hex: :thoas, repo: "hexpm", optional: false]}], "hexpm", "33fe4eb510b1e72a2734b9c3d081f76059a07ed7d76c9b9403276af9d5afc1b1"},
+ "phoenix_pubsub": {:hex, :phoenix_pubsub, "2.1.3", "3168d78ba41835aecad272d5e8cd51aa87a7ac9eb836eabc42f6e57538e3731d", [:mix], [], "hexpm", "bba06bc1dcfd8cb086759f0edc94a8ba2bc8896d5331a1e2c2902bf8e36ee502"},
+ "phoenix_template": {:hex, :phoenix_template, "1.0.4", "e2092c132f3b5e5b2d49c96695342eb36d0ed514c5b252a77048d5969330d639", [:mix], [{:phoenix_html, "~> 2.14.2 or ~> 3.0 or ~> 4.0", [hex: :phoenix_html, repo: "hexpm", optional: true]}], "hexpm", "2c0c81f0e5c6753faf5cca2f229c9709919aba34fab866d3bc05060c9c444206"},
+ "plug": {:hex, :plug, "1.16.1", "40c74619c12f82736d2214557dedec2e9762029b2438d6d175c5074c933edc9d", [:mix], [{:mime, "~> 1.0 or ~> 2.0", [hex: :mime, repo: "hexpm", optional: false]}, {:plug_crypto, "~> 1.1.1 or ~> 1.2 or ~> 2.0", [hex: :plug_crypto, repo: "hexpm", optional: false]}, {:telemetry, "~> 0.4.3 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "a13ff6b9006b03d7e33874945b2755253841b238c34071ed85b0e86057f8cddc"},
+ "plug_cowboy": {:hex, :plug_cowboy, "2.7.1", "87677ffe3b765bc96a89be7960f81703223fe2e21efa42c125fcd0127dd9d6b2", [:mix], [{:cowboy, "~> 2.7", [hex: :cowboy, repo: "hexpm", optional: false]}, {:cowboy_telemetry, "~> 0.3", [hex: :cowboy_telemetry, repo: "hexpm", optional: false]}, {:plug, "~> 1.14", [hex: :plug, repo: "hexpm", optional: false]}], "hexpm", "02dbd5f9ab571b864ae39418db7811618506256f6d13b4a45037e5fe78dc5de3"},
+ "plug_crypto": {:hex, :plug_crypto, "2.1.0", "f44309c2b06d249c27c8d3f65cfe08158ade08418cf540fd4f72d4d6863abb7b", [:mix], [], "hexpm", "131216a4b030b8f8ce0f26038bc4421ae60e4bb95c5cf5395e1421437824c4fa"},
+ "poison": {:hex, :poison, "4.0.1", "bcb755a16fac91cad79bfe9fc3585bb07b9331e50cfe3420a24bcc2d735709ae", [:mix], [], "hexpm", "ba8836feea4b394bb718a161fc59a288fe0109b5006d6bdf97b6badfcf6f0f25"},
+ "rabbit_common": {:hex, :rabbit_common, "3.12.14", "466123ee7346a3cdac078c0c302bcd36da4523e8acd678c1b992f7b4df1f7914", [:make, :rebar3], [{:credentials_obfuscation, "3.4.0", [hex: :credentials_obfuscation, repo: "hexpm", optional: false]}, {:recon, "2.5.3", [hex: :recon, repo: "hexpm", optional: false]}, {:thoas, "1.0.0", [hex: :thoas, repo: "hexpm", optional: false]}], "hexpm", "70c31a51f7401cc0204ddef2745d98680c2e0df67e3b0c9e198916881fde3293"},
"ranch": {:hex, :ranch, "1.8.0", "8c7a100a139fd57f17327b6413e4167ac559fbc04ca7448e9be9057311597a1d", [:make, :rebar3], [], "hexpm", "49fbcfd3682fab1f5d109351b61257676da1a2fdbe295904176d5e521a2ddfe5"},
"recon": {:hex, :recon, "2.5.3", "739107b9050ea683c30e96de050bc59248fd27ec147696f79a8797ff9fa17153", [:mix, :rebar3], [], "hexpm", "6c6683f46fd4a1dfd98404b9f78dcabc7fcd8826613a89dcb984727a8c3099d7"},
"ssl_verify_fun": {:hex, :ssl_verify_fun, "1.1.7", "354c321cf377240c7b8716899e182ce4890c5938111a1296add3ec74cf1715df", [:make, :mix, :rebar3], [], "hexpm", "fe4c190e8f37401d30167c8c405eda19469f34577987c76dde613e838bbc67f8"},
- "swoosh": {:hex, :swoosh, "1.11.0", "00b4fff8c08347a47cc5cbe67d64df5aae0607a7a51171944f5b89216e2d62f5", [:mix], [{:cowboy, "~> 1.1 or ~> 2.4", [hex: :cowboy, repo: "hexpm", optional: true]}, {:ex_aws, "~> 2.1", [hex: :ex_aws, repo: "hexpm", optional: true]}, {:finch, "~> 0.6", [hex: :finch, repo: "hexpm", optional: true]}, {:gen_smtp, "~> 0.13 or ~> 1.0", [hex: :gen_smtp, repo: "hexpm", optional: true]}, {:hackney, "~> 1.9", [hex: :hackney, repo: "hexpm", optional: true]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: false]}, {:mail, "~> 0.2", [hex: :mail, repo: "hexpm", optional: true]}, {:mime, "~> 1.1 or ~> 2.0", [hex: :mime, repo: "hexpm", optional: false]}, {:plug_cowboy, ">= 1.0.0", [hex: :plug_cowboy, repo: "hexpm", optional: true]}, {:telemetry, "~> 0.4.2 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "5e7c49b6259e50a5ed756517e23a7f916c0b73eb0752e864b1d83b28e2c204d9"},
+ "swoosh": {:hex, :swoosh, "1.16.9", "20c6a32ea49136a4c19f538e27739bb5070558c0fa76b8a95f4d5d5ca7d319a1", [:mix], [{:bandit, ">= 1.0.0", [hex: :bandit, repo: "hexpm", optional: true]}, {:cowboy, "~> 1.1 or ~> 2.4", [hex: :cowboy, repo: "hexpm", optional: true]}, {:ex_aws, "~> 2.1", [hex: :ex_aws, repo: "hexpm", optional: true]}, {:finch, "~> 0.6", [hex: :finch, repo: "hexpm", optional: true]}, {:gen_smtp, "~> 0.13 or ~> 1.0", [hex: :gen_smtp, repo: "hexpm", optional: true]}, {:hackney, "~> 1.9", [hex: :hackney, repo: "hexpm", optional: true]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: false]}, {:mail, "~> 0.2", [hex: :mail, repo: "hexpm", optional: true]}, {:mime, "~> 1.1 or ~> 2.0", [hex: :mime, repo: "hexpm", optional: false]}, {:mua, "~> 0.2.0", [hex: :mua, repo: "hexpm", optional: true]}, {:multipart, "~> 0.4", [hex: :multipart, repo: "hexpm", optional: true]}, {:plug, "~> 1.9", [hex: :plug, repo: "hexpm", optional: true]}, {:plug_cowboy, ">= 1.0.0", [hex: :plug_cowboy, repo: "hexpm", optional: true]}, {:req, "~> 0.5 or ~> 1.0", [hex: :req, repo: "hexpm", optional: true]}, {:telemetry, "~> 0.4.2 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "878b1a7a6c10ebbf725a3349363f48f79c5e3d792eb621643b0d276a38acc0a6"},
"tarams": {:hex, :tarams, "1.7.1", "93b162f14675940a8c2a7d62e1d4b7ed24654f9820698e095a6d80fff623d8e5", [:mix], [{:decimal, "~> 2.0", [hex: :decimal, repo: "hexpm", optional: false]}, {:valdi, "~> 0.3", [hex: :valdi, repo: "hexpm", optional: false]}], "hexpm", "080428693a6305cf4c19107b17fde2dee9d7f119445057afe8be3be920c13c1a"},
"telemetry": {:hex, :telemetry, "1.2.1", "68fdfe8d8f05a8428483a97d7aab2f268aaff24b49e0f599faa091f1d4e7f61c", [:rebar3], [], "hexpm", "dad9ce9d8effc621708f99eac538ef1cbe05d6a874dd741de2e689c47feafed5"},
- "telemetry_metrics": {:hex, :telemetry_metrics, "0.6.1", "315d9163a1d4660aedc3fee73f33f1d355dcc76c5c3ab3d59e76e3edf80eef1f", [:mix], [{:telemetry, "~> 0.4 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "7be9e0871c41732c233be71e4be11b96e56177bf15dde64a8ac9ce72ac9834c6"},
- "telemetry_poller": {:hex, :telemetry_poller, "1.0.0", "db91bb424e07f2bb6e73926fcafbfcbcb295f0193e0a00e825e589a0a47e8453", [:rebar3], [{:telemetry, "~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "b3a24eafd66c3f42da30fc3ca7dda1e9d546c12250a2d60d7b81d264fbec4f6e"},
+ "telemetry_metrics": {:hex, :telemetry_metrics, "0.6.2", "2caabe9344ec17eafe5403304771c3539f3b6e2f7fb6a6f602558c825d0d0bfb", [:mix], [{:telemetry, "~> 0.4 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "9b43db0dc33863930b9ef9d27137e78974756f5f198cae18409970ed6fa5b561"},
+ "telemetry_poller": {:hex, :telemetry_poller, "1.1.0", "58fa7c216257291caaf8d05678c8d01bd45f4bdbc1286838a28c4bb62ef32999", [:rebar3], [{:telemetry, "~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "9eb9d9cbfd81cbd7cdd24682f8711b6e2b691289a0de6826e58452f28c103c8f"},
+ "tesla": {:hex, :tesla, "1.11.0", "81b2b10213dddb27105ec6102d9eb0cc93d7097a918a0b1594f2dfd1a4601190", [:mix], [{:castore, "~> 0.1 or ~> 1.0", [hex: :castore, repo: "hexpm", optional: true]}, {:exjsx, ">= 3.0.0", [hex: :exjsx, repo: "hexpm", optional: true]}, {:finch, "~> 0.13", [hex: :finch, repo: "hexpm", optional: true]}, {:fuse, "~> 2.4", [hex: :fuse, repo: "hexpm", optional: true]}, {:gun, ">= 1.0.0", [hex: :gun, repo: "hexpm", optional: true]}, {:hackney, "~> 1.6", [hex: :hackney, repo: "hexpm", optional: true]}, {:ibrowse, "4.4.2", [hex: :ibrowse, repo: "hexpm", optional: true]}, {:jason, ">= 1.0.0", [hex: :jason, repo: "hexpm", optional: true]}, {:mime, "~> 1.0 or ~> 2.0", [hex: :mime, repo: "hexpm", optional: false]}, {:mint, "~> 1.0", [hex: :mint, repo: "hexpm", optional: true]}, {:msgpax, "~> 2.3", [hex: :msgpax, repo: "hexpm", optional: true]}, {:poison, ">= 1.0.0", [hex: :poison, repo: "hexpm", optional: true]}, {:telemetry, "~> 0.4 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: true]}], "hexpm", "b83ab5d4c2d202e1ea2b7e17a49f788d49a699513d7c4f08f2aef2c281be69db"},
"thoas": {:hex, :thoas, "1.0.0", "567c03902920827a18a89f05b79a37b5bf93553154b883e0131801600cf02ce0", [:rebar3], [], "hexpm", "fc763185b932ecb32a554fb735ee03c3b6b1b31366077a2427d2a97f3bd26735"},
"unicode_util_compat": {:hex, :unicode_util_compat, "0.7.0", "bc84380c9ab48177092f43ac89e4dfa2c6d62b40b8bd132b1059ecc7232f9a78", [:rebar3], [], "hexpm", "25eee6d67df61960cf6a794239566599b09e17e668d3700247bc498638152521"},
- "valdi": {:hex, :valdi, "0.3.0", "902005163c4d54ca11347a03f31546fa00cde5b00a1d860a8a78ab5cb583e8ca", [:mix], [], "hexpm", "60f63a2bd3d94a2def4073acd1f81931077ba29c7fd2f306a5fc9385e3e2fab9"},
- "websock": {:hex, :websock, "0.5.1", "c496036ce95bc26d08ba086b2a827b212c67e7cabaa1c06473cd26b40ed8cf10", [:mix], [], "hexpm", "b9f785108b81cd457b06e5f5dabe5f65453d86a99118b2c0a515e1e296dc2d2c"},
- "websock_adapter": {:hex, :websock_adapter, "0.5.1", "292e6c56724e3457e808e525af0e9bcfa088cc7b9c798218e78658c7f9b85066", [:mix], [{:bandit, ">= 0.6.0", [hex: :bandit, repo: "hexpm", optional: true]}, {:plug, "~> 1.14", [hex: :plug, repo: "hexpm", optional: false]}, {:plug_cowboy, "~> 2.6", [hex: :plug_cowboy, repo: "hexpm", optional: true]}, {:websock, "~> 0.5", [hex: :websock, repo: "hexpm", optional: false]}], "hexpm", "8e2e1544bfde5f9d0442f9cec2f5235398b224f75c9e06b60557debf64248ec1"},
+ "valdi": {:hex, :valdi, "0.5.0", "b686378c33de1cd35b4fe6f60598d88d10a9a2c5d914a243433158a078607b23", [:mix], [{:decimal, "~> 2.1", [hex: :decimal, repo: "hexpm", optional: false]}], "hexpm", "a375904658a7175d77546785338ab927a0cb7723b3fd24f0890510cdadf5ba27"},
+ "waffle": {:hex, :waffle, "1.1.9", "8ce5ca9e59fa5491da67a2df57b8711d93223df3c3e5c21ad2acdedc41a0f51a", [:mix], [{:ex_aws, "~> 2.1", [hex: :ex_aws, repo: "hexpm", optional: true]}, {:ex_aws_s3, "~> 2.1", [hex: :ex_aws_s3, repo: "hexpm", optional: true]}, {:hackney, "~> 1.9", [hex: :hackney, repo: "hexpm", optional: false]}, {:sweet_xml, "~> 0.6", [hex: :sweet_xml, repo: "hexpm", optional: true]}], "hexpm", "307c63cfdfb4624e7c423868a128ccfcb0e5291ae73a9deecb3a10b7a3eb277c"},
+ "waffle_gcs": {:hex, :waffle_gcs, "0.2.0", "dea6bb5da8da961a2a7a000178b0912cd342c89891c73ec745e19b1841b47fb2", [:mix], [{:google_api_storage, "~> 0.14", [hex: :google_api_storage, repo: "hexpm", optional: false]}, {:goth, "~> 1.1", [hex: :goth, repo: "hexpm", optional: false]}, {:waffle, "~> 1.1", [hex: :waffle, repo: "hexpm", optional: false]}], "hexpm", "5250750957d21cbaa762b88e71ca82014e7d803f3c2759a75ec2bb93fa3a384d"},
+ "websock": {:hex, :websock, "0.5.3", "2f69a6ebe810328555b6fe5c831a851f485e303a7c8ce6c5f675abeb20ebdadc", [:mix], [], "hexpm", "6105453d7fac22c712ad66fab1d45abdf049868f253cf719b625151460b8b453"},
+ "websock_adapter": {:hex, :websock_adapter, "0.5.6", "0437fe56e093fd4ac422de33bf8fc89f7bc1416a3f2d732d8b2c8fd54792fe60", [:mix], [{:bandit, ">= 0.6.0", [hex: :bandit, repo: "hexpm", optional: true]}, {:plug, "~> 1.14", [hex: :plug, repo: "hexpm", optional: false]}, {:plug_cowboy, "~> 2.6", [hex: :plug_cowboy, repo: "hexpm", optional: true]}, {:websock, "~> 0.5", [hex: :websock, repo: "hexpm", optional: false]}], "hexpm", "e04378d26b0af627817ae84c92083b7e97aca3121196679b73c73b99d0d133ea"},
}
diff --git a/backend/api/priv/repo/migrations/20240204124111_onboarding_questions.exs b/backend/api/priv/repo/migrations/20240204124111_onboarding_questions.exs
new file mode 100644
index 00000000..2d986f73
--- /dev/null
+++ b/backend/api/priv/repo/migrations/20240204124111_onboarding_questions.exs
@@ -0,0 +1,55 @@
+defmodule Toia.Repo.Migrations.OnboardingQuestions do
+ use Ecto.Migration
+
+ def up do
+ execute """
+ INSERT INTO questions (question, suggested_type, priority, trigger_suggester)
+ VALUES ('Attentive filler video: Record yourself touching your hair/head/face staring at the camera (think making eye contact with a user interacting with your avatar)', 'filler', 0, false),
+ ('Attentive filler: Nod/shake head to show you are listening, and keep staring at the camere (make eye contact)', 'filler', 1, false),
+ ('Attentive filler: Smile and blink eyes while looking towards the camera (make eye contact) for about 10 seconds', 'filler', 2, false),
+ ('Attentive filler: Lean slightly forward with your elbows on the table and your hands together on your chin as if you were attentive to the camera', 'filler', 3, false),
+ ('Attentive filler: Cross hands while looking forward into the camera', 'filler', 4, false),
+ ('Inattentive filler video: Now record again yourself touching your hair/head/face, but don''t look at the camera. Look elsewhere (don''t make eye contact)', 'filler', 5, false),
+ ('Inattentive filler: Do not nod/shake head and look elsewhere from the camera. Show you are engageing with somebody else in the room, do not stare at the camera (avoid eye contact)', 'filler', 6, false),
+ ('Inattentive filler: Look downward, do not stare at the camera (avoid eye contact) for about 10 seconds', 'filler', 7, false),
+ ('Inattentive filler: Lean slightly backwards, like trying to relax, gaze around and never look at the camera (avoid eye contact)', 'filler', 8, false),
+ ('Inattentive filler: Cross hands while looking upward or elsewere, looking bored, avoiding eye contact with the camera', 'filler', 9, false),
+ ('Say: I don''t have an answer to that right now.', 'no-answer', 10, false),
+ ('Say: Sorry, I didn''t record answers to that question.', 'no-answer', 11, false),
+ ('Say: Can you try rephrasing the question?', 'no-answer', 12, false),
+ ('Record a greeting (e.g., hello, hi)', 'greeting', 13, false),
+ ('Record a goodbye (or end of conversation sentence)', 'exit', 14, false),
+ ('What is your name?', 'answer', 15, true),
+ ('Where and when were you born?', 'answer', 16, true),
+ ('What do you do for a living?', 'answer', 17, true),
+ ('Record yourself saying Yes. You cann add questions for this answer later.', 'y/n-answer', 18, false),
+ ('Record yourself saying No. You can add questions for this answer later.', 'y/n-answer', 19, false)
+ """
+ end
+
+ def down do
+ execute """
+ DELETE FROM questions
+ WHERE question IN ('Attentive filler video: Record yourself touching your hair/head/face staring at the camera (think making eye contact with a user interacting with your avatar)',
+ 'Attentive filler: Nod/shake head to show you are listening, and keep staring at the camere (make eye contact)',
+ 'Attentive filler: Smile and blink eyes while looking towards the camera (make eye contact) for about 10 seconds',
+ 'Attentive filler: Lean slightly forward with your elbows on the table and your hands together on your chin as if you were attentive to the camera',
+ 'Attentive filler: Cross hands while looking forward into the camera',
+ 'Inattentive filler video: Now record again yourself touching your hair/head/face, but don''t look at the camera. Look elsewhere (don''t make eye contact)',
+ 'Inattentive filler: Do not nod/shake head and look elsewhere from the camera. Show you are engageing with somebody else in the room, do not stare at the camera (avoid eye contact)',
+ 'Inattentive filler: Look downward, do not stare at the camera (avoid eye contact) for about 10 seconds',
+ 'Inattentive filler: Lean slightly backwards, like trying to relax, gaze around and never look at the camera (avoid eye contact)',
+ 'Inattentive filler: Cross hands while looking upward or elsewere, looking bored, avoiding eye contact with the camera',
+ 'Say: I don''t have an answer to that right now.',
+ 'Say: Sorry, I didn''t record answers to that question.',
+ 'Say: Can you try rephrasing the question?',
+ 'Record a greeting (e.g., hello, hi)',
+ 'Record a goodbye (or end of conversation sentence)',
+ 'What is your name?',
+ 'Where and when were you born?',
+ 'What do you do for a living?',
+ 'Record yourself saying Yes. You cann add questions for this answer later.',
+ 'Record yourself saying No. You can add questions for this answer later.')
+ """
+ end
+end
diff --git a/backend/q_api/app.py b/backend/q_api/app.py
index 4000b974..dae658f3 100644
--- a/backend/q_api/app.py
+++ b/backend/q_api/app.py
@@ -245,7 +245,7 @@ def generateNextQ(api=API):
# elif api == "GPT-3":
response = openai.Completion.create(
- engine="text-davinci-001",
+ engine="gpt-3.5-turbo-instruct",
prompt=prompt,
temperature=0.7,
max_tokens=250
@@ -389,7 +389,7 @@ def generateSmartQ(api=API):
# elif api == "GPT-3":
# print("Checkpoint 3: Sending request to AI...")
response = openai.Completion.create(
- engine="text-davinci-002",
+ engine="gpt-3.5-turbo-instruct",
prompt=prompt,
temperature=0,
max_tokens=250,
@@ -429,6 +429,7 @@ def generateSmartQ(api=API):
requests.post(callback_url, json={"q": suggestion})
except:
logging.error("Error when sending suggestions to server. Is the server running?")
+ logging.error(callback_url)
else:
logging.warning("No callback_url provided!")
diff --git a/backend/q_api/test/test.py b/backend/q_api/test/test.py
index 389d9bc2..8b2e54ce 100644
--- a/backend/q_api/test/test.py
+++ b/backend/q_api/test/test.py
@@ -3,8 +3,6 @@
# import nltk
# import numpy as np
-openai.api_key = "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"
-
def printEmbedding(query):
embedding = get_embedding(query, engine='text-search-ada-query-001')
print("====================\nQuery:", query, "\n Embedding:",embedding ,"\n====================")
diff --git a/backend/q_api/utils.py b/backend/q_api/utils.py
index 638d1b28..05535ee0 100644
--- a/backend/q_api/utils.py
+++ b/backend/q_api/utils.py
@@ -43,7 +43,7 @@ def getFirstNSimilar(df_avatar, query, NUM_SHORTLIST):
def getFreqByCosineSimilarity(query, data):
# Creating embedding for query
- embedding = get_embedding(query, engine='text-search-ada-query-001')
+ embedding = get_embedding(query, engine='text-embedding-ada-002')
# Searching query embedding through avatar's questions' embeddings using cosine similarity
data['similarities'] = data.ada_search.apply(lambda x: cosine_similarity(x, embedding))
diff --git a/backend/toia-dm/Dockerfile b/backend/toia-dm/Dockerfile
index 8d287ec0..7fd50009 100644
--- a/backend/toia-dm/Dockerfile
+++ b/backend/toia-dm/Dockerfile
@@ -3,6 +3,7 @@ FROM ubuntu:20.04
ENV FLASK_RUN_HOST 0.0.0.0
RUN apt-get update
RUN apt-get install -y build-essential
+RUN apt-get install -y python3-dev default-libmysqlclient-dev
RUN apt-get install python3-pip -y
COPY requirements.txt /app/
diff --git a/backend/toia-dm/requirements.txt b/backend/toia-dm/requirements.txt
index 01c682eb..5e1a02b3 100644
--- a/backend/toia-dm/requirements.txt
+++ b/backend/toia-dm/requirements.txt
@@ -1,5 +1,6 @@
aiohttp==3.8.1
aiosignal==1.2.0
+annotated-types==0.6.0
anyio==3.5.0
asgiref==3.5.0
async-timeout==4.0.2
@@ -12,9 +13,16 @@ cffi==1.15.0
charset-normalizer==2.0.12
click==8.0.4
cloud-sql-python-connector==0.5.1
+cloudpathlib==0.16.0
+confection==0.1.4
+contourpy==1.1.1
cryptography==36.0.1
+cycler==0.12.1
cymem==2.0.6
+distro==1.9.0
+exceptiongroup==1.2.0
fastapi==0.74.0
+fonttools==4.47.2
frozenlist==1.3.0
google-api-core==2.5.0
google-api-python-client==2.37.0
@@ -23,28 +31,37 @@ google-auth-httplib2==0.1.0
googleapis-common-protos==1.54.0
greenlet==1.1.2
h11==0.13.0
+httpcore==1.0.2
httplib2==0.20.4
+httpx==0.26.0
idna==3.3
+importlib-resources==6.1.1
Jinja2==3.0.3
joblib==1.1.0
+kiwisolver==1.4.5
langcodes==3.3.0
MarkupSafe==2.1.0
-matplotlib
+matplotlib==3.7.4
multidict==6.0.2
murmurhash==1.0.6
+mysqlclient==1.4.4
+nano==0.10.0
nltk==3.7
numpy==1.22.2
-openai
+openai==0.28.1
packaging==21.3
pandas==1.4.1
+pathlib-abc==0.1.1
pathy==0.6.1
-plotly
+pillow==10.2.0
+plotly==5.18.0
preshed==3.0.6
protobuf==3.19.4
pyasn1==0.4.8
pyasn1-modules==0.2.8
pycparser==2.21
-pydantic==1.8.2
+pydantic==1.9.0
+pydantic-core==2.16.1
pyOpenSSL==22.0.0
pyparsing==3.0.7
python-dateutil==2.8.2
@@ -65,13 +82,17 @@ spacy-loggers==1.0.1
SQLAlchemy==1.4.31
srsly==2.4.2
starlette==0.17.1
+tenacity==8.2.3
thinc==8.0.13
threadpoolctl==3.1.0
tqdm==4.62.3
typer==0.4.0
-typing-extensions==4.1.1
+typing-extensions==4.7.0
+tzdata==2023.4
uritemplate==4.1.1
urllib3==1.26.8
uvicorn==0.17.5
wasabi==0.9.0
-yarl==1.7.2
\ No newline at end of file
+weasel==0.3.4
+yarl==1.7.2
+zipp==3.17.0
diff --git a/backend/toia-dm/utils_gpt3.py b/backend/toia-dm/utils_gpt3.py
index aff5c5e6..15c24204 100644
--- a/backend/toia-dm/utils_gpt3.py
+++ b/backend/toia-dm/utils_gpt3.py
@@ -16,7 +16,7 @@
def toia_answer(query, data, k=1):
print("Query", query)
- embedding = get_embedding(query, engine='text-search-ada-query-001')
+ embedding = get_embedding(query, engine='text-embedding-ada-002')
print("B")
data['similarities'] = data.ada_search.apply(lambda x: cosine_similarity(x, embedding))
print("C")
diff --git a/docker-compose.yml b/docker-compose.yml
index cea6e15b..a043924a 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -10,6 +10,8 @@ services:
tty: true
healthcheck:
test: mysqladmin ping -h 127.0.0.1 -u $$DB_USERNAME --password=$$DB_PASSWORD
+ volumes:
+ - mysql-vol:/var/lib/mysql
phpMyAdmin:
image: phpmyadmin/phpmyadmin
@@ -41,6 +43,7 @@ services:
- ./backend/api/lib:/app/lib
- /app/lib/toia_web/services/node_modules
- ./backend/translation/Transcripts:/app/priv/static/static/Transcripts:ro
+ - ./secrets:/app/secrets:ro
ports:
- 4000:4000
@@ -78,11 +81,13 @@ services:
depends_on:
mysql:
condition: service_healthy
- api:
- condition: service_healthy
+ # api:
+ # condition: service_healthy
env_file:
- ./.env
tty: true
+ volumes:
+ - ./secrets:/app/secrets:ro
toia-dm:
build: ./backend/toia-dm
@@ -93,14 +98,16 @@ services:
depends_on:
mysql:
condition: service_healthy
- api:
- condition: service_healthy
+ # api:
+ # condition: service_healthy
environment:
- ENVIRONMENT=production
- PYTHONUNBUFFERED=1
- DM_PORT=5001
env_file:
- ./.env
+ volumes:
+ - ./secrets:/app/secrets:ro
rabbitmq3:
container_name: "rabbitmq"
@@ -123,8 +130,6 @@ services:
build: backend/translation
image: bishnudev/toia-translation:latest
environment:
- - GOOGLE_APPLICATION_CREDENTIALS=secrets/toia-translation.json
- - ENVIRONMENT=DEVELOPMENT
- PYTHONUNBUFFERED=1
volumes:
- ./backend/translation/Transcripts:/app/files
@@ -144,4 +149,5 @@ services:
# - portainer_data:/data
volumes:
- portainer_data:
\ No newline at end of file
+ portainer_data:
+ mysql-vol:
\ No newline at end of file
diff --git a/interface/src/App.css b/interface/src/App.css
index b7581cc9..2766bd71 100644
--- a/interface/src/App.css
+++ b/interface/src/App.css
@@ -21,10 +21,91 @@
height: 12px;
}*/
-body{
+body {
unicode-bidi: plaintext;
+ font-family: "Open Sans-Bold", Helvetica, Arial, serif;
}
+.ui.modal > .header {
+ font-weight: 700 !important;
+ font-size: 1.4rem !important;
+ font-family: "Open Sans-Bold", Helvetica, Arial, serif !important;
+}
+
+.ui.modal > .content {
+ font-family: "Open Sans-Bold", Helvetica, Arial, serif !important;
+ font-size: 1rem !important;
+ font-weight: normal !important;
+}
+
+.actions .ui.button {
+ font-weight: 700 !important;
+ font-size: 1rem !important;
+ font-family: "Open Sans-Bold", Helvetica, Arial, serif !important;
+}
+
+.actions .ui.primary.button {
+ background-color: orangered;
+}
+
+.actions .ui.primary.button:hover {
+ background-color: red;
+}
+
+.actions .ui.primary.button.show-recordings {
+ background-color: #3cb043;
+}
+
+.actions .ui.primary.button.show-recordings:hover {
+ background-color: green;
+}
+
+.heading-big {
+ font-weight: bold !important;
+ font-weight: 700 !important;
+ font-size: 34px !important;
+ font-family: "Open Sans-Bold", Helvetica, Arial, serif !important;
+}
+
+.heading-medium {
+ font-weight: 700 !important;
+ font-size: 2rem !important;
+ font-family: "Open Sans-Bold", Helvetica, Arial, serif !important;
+}
+
+.heading-small {
+ font-weight: 700 !important;
+ font-size: 1.2rem !important;
+ font-family: "Open Sans-Bold", Helvetica, Arial, serif !important;
+}
+
+.text-big {
+ font-family: "Open Sans-Bold", Helvetica, Arial, serif !important;
+ font-size: 1.3rem !important;
+ font-weight: normal !important;
+}
+
+.text-normal {
+ font-family: "Open Sans-Bold", Helvetica, Arial, serif !important;
+ font-size: 1rem !important;
+ font-weight: normal !important;
+}
+
+.text-less-normal {
+ font-family: "Open Sans-Bold", Helvetica, Arial, serif !important;
+ font-size: 1.2rem !important;
+ font-weight: normal !important;
+ color: black;
+}
+
+.text-normal-bold {
+ font-family: "Open Sans-Bold", Helvetica, Arial, serif !important;
+ font-size: 1rem !important;
+ font-weight: bold !important;
+}
+
+
+
/*navbar*/
::-webkit-scrollbar-corner {
background: rgba(0, 0, 0, 0);
@@ -36,108 +117,143 @@ body{
--hd-color: #008891;
--t-color: #0f3057;
}
+
.nav-heading-bar {
- align-items: flex-start;
- /* background-color: #7e7c7c; */
+ align-items: center;
background-color: var(--nv-color);
- display: inline-flex;
- flex-direction: row;
+ display: flex;
height: 40px;
- justify-content: flex-start;
- left: 0px;
+ left: 0;
+ justify-content: space-between;
padding: 9px;
position: fixed;
top: 0px;
- width: 1280px;
+ width: 100%;
z-index: 100;
}
-.nav-toia_icon {
- top: 0%;
- /* left: 2.85%; */
- left: 60px;
- position: absolute;
- font-size: 28.4444px;
- line-height: 39px;
- display: flex;
- align-items: center;
- text-align: center;
- letter-spacing: -0.015em;
- height: 40px;
+
+.nav-hamburger-icon {
+ font-size: 30px;
cursor: pointer;
- color: white;
+ display: none; /* Hide it initially */
}
-.nav-about_icon {
- top: 0%;
- left: 60%;
- position: absolute;
- font-weight: 800;
- font-size: 20px;
- line-height: 22px;
- display: flex;
- align-items: center;
- justify-content: center;
+
+.nav-toia-hamburger {
+ font-size: 28px;
+ line-height: 26px;
+ align-items: center;
+ justify-content: center;
letter-spacing: -0.015em;
- height: 40px;
- width: 120px;
- border-radius: 3px;
- cursor: pointer;
- color: white;
- opacity: 0.8;
+ cursor: pointer;
+ opacity: 1;
+ text-align: center;
+ padding-left: 71vw;
}
-.nav-talk_icon {
- top: 0%;
- left: 70%;
- position: absolute;
- font-weight: 800;
- font-size: 20px;
- line-height: 22px;
- display: flex;
- align-items: center;
- justify-content: center;
- letter-spacing: -0.015em;
- height: 40px;
- width: 130px;
- border-radius: 3px;
- cursor: pointer;
- color: white;
- opacity: 0.8;
+
+.nav-dropdown-hamburger {
+ padding-top: 3px;
+ padding-right: 2px;
+ left: 73%;
+ position: relative;
+ display: inline-block;
}
-.nav-my_icon {
- top: 0%;
- left: 80%;
- position: absolute;
- font-weight: 800;
- font-size: 20px;
- line-height: 22px;
+
+@media (max-width: 450px) {
+ .nav-dropdown-hamburger {
+ left: 70%;
+ }
+
+ .nav-toia-hamburger {
+ padding-left: 67vw;
+ }
+}
+
+@media (max-width: 400px) {
+ .nav-dropdown-hamburger {
+ left: 65%;
+ }
+
+ .nav-toia-hamburger {
+ padding-left: 62vw;
+ }
+}
+
+@media (max-width: 370px) {
+ .nav-dropdown-hamburger {
+ left: 63%;
+ }
+
+ .nav-toia-hamburger {
+ padding-left: 60vw;
+ }
+}
+
+@media (max-width: 345px) {
+ .nav-dropdown-hamburger {
+ left: 59%;
+ }
+
+ .nav-toia-hamburger {
+ padding-left: 57vw;
+ }
+}
+
+@media (max-width: 300px) {
+ .nav-dropdown-hamburger {
+ left: 57%;
+ }
+
+ .nav-toia-hamburger {
+ padding-left: 63vw;
+ }
+}
+
+.nav-toia_icon {
+ font-family: "Open Sans-Bold", Helvetica, Arial, serif;
+ left: 0px;
+ font-size: 28px;
+ line-height: 39px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ letter-spacing: -0.015em;
+ height: 40px;
+ cursor: pointer;
+ color: white;
+ opacity: 0.8;
+ text-align: center;
+ padding: 0 20px; /* Add padding to space items */
+ }
+
+.nav-left-group, .nav-right-group {
display: flex;
align-items: center;
- justify-content: center;
- letter-spacing: -0.015em;
- height: 40px;
- width: 145px;
- border-radius: 3px;
- cursor: pointer;
- color: white;
- opacity: 0.8;
}
-.nav-login_icon {
- top: 0%;
- left: 90%;
- position: absolute;
- font-weight: 800;
+
+.nav-left-group {
+ padding: 30px;
+}
+
+.nav-right-group {
+ padding: 10px;
+}
+
+.nav-about_icon, .nav-talk_icon, .nav-my_icon, .nav-login_icon {
font-size: 20px;
- line-height: 22px;
- display: flex;
- align-items: center;
- justify-content: center;
+ line-height: 22px;
+ font-weight: 800;
+ display: flex;
+ align-items: center;
+ justify-content: center;
letter-spacing: -0.015em;
- height: 40px;
- width: 120px;
- border-radius: 3px;
- cursor: pointer;
- color: var(--desert-storm);
- opacity: 0.8;
+ height: 40px;
+ cursor: pointer;
+ color: white;
+ opacity: 0.8;
+ text-align: center;
+ padding: 0 25px; /* Add padding to space items */
}
+
.nav-selected {
opacity: 1;
}
@@ -168,6 +284,15 @@ body{
border: none;
}
+.nav-dropbtn-hamburger {
+ background-color: transparent;
+ color: white;
+ width: 30px;
+ text-align: center;
+ font-size: 16px;
+ border: none;
+}
+
/* The container
- needed to position the dropdown content */
.nav-dropdown {
top: 0%;
@@ -185,6 +310,15 @@ body{
z-index: 1;
}
+.nav-dropdown-hamburger-content {
+ font-size: 1.25rem;
+ display: none;
+ position: absolute;
+ background-color: #f1f1f1;
+ box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+ z-index: 1;
+}
+
/* Links inside the dropdown */
.nav-dropdown-content a {
color: black;
@@ -195,6 +329,71 @@ body{
display: block;
}
+.nav-dropdown-hamburger-content a {
+ color: black;
+ width: 30px;
+ height: 20px;
+ text-align: center;
+ text-decoration: none;
+ display: block;
+ }
+
+@media (max-width: 800px) { /* Adjust 768px to the breakpoint you desire */
+ .nav-heading-bar {
+ flex-direction: column;
+ align-items: flex-start;
+ height: auto; /* Adjust height to auto to accommodate the changed layout */
+ background-color: white;
+ }
+
+ .nav-toia_icon, .nav-about_icon, .nav-talk_icon, .nav-my_icon, .nav-login_icon {
+ padding-top: 10px;
+ width: 100%; /* Make nav items take up the full width */
+ justify-content: flex-start; /* Align text to the start */
+ }
+
+ .nav-right-group, .nav-left-group {
+ flex-direction: column;
+ display: none; /* Hide it initially */
+ padding: 0px;
+ }
+
+ .nav-left-group {
+ padding-left: 6px;
+ }
+
+ .nav-hamburger-icon {
+ display: flex; /* Show the hamburger icon */
+ }
+
+ .nav-toia_icon{
+ display: none;
+ }
+
+ .nav-dropdown {
+ display: none;
+ }
+}
+
+.nav-active {
+ display: flex;
+ flex-direction: column;
+}
+
+.header-active {
+ background-color:var(--nv-color);
+}
+
+.nav-dropdown-hamburger-content div.header:hover::after {
+ background-color: transparent;
+}
+
+.nav-dropdown-hamburger-content option:hover {background-color: #ddd;}
+
+.nav-dropdown-hamburger:hover .nav-dropdown-hamburger-content {display: block;}
+
+
+
.nav-dropdown-content div.header:hover::after {
background-color: transparent;
}
@@ -208,90 +407,167 @@ body{
/* .nav-dropdown:hover .nav-dropbtn {background-color: #3e8e41;} */
/*login popup*/
+
.login_popup {
height: 40vh;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
}
+
.login_header {
text-align: center;
color: var(--nv-color);
+ background-color: black;
}
-.login_welcome {
- font-weight: bold;
- font-size: 2.5rem;
- letter-spacing: -0.015em;
+
+
+.login-email {
+ border-radius: 1rem;
+ width: 70%;
+ margin-top: 50px;
+ margin-bottom: 10px;
+ padding: 10px 15px;
+ border: 2px solid black;
+ outline: none;
}
-.login_blurb {
- font-weight: 500;
- font-size: 1.25rem;
- letter-spacing: -0.015em;
- color: rgba(0, 0, 0, 0.75);
+
+.signup-firstname, .signup-lastname {
+ border-radius: 1rem;
+ width: calc(50% - 5px);
+ margin-top: 20px;
+ margin-bottom: 10px;
+ padding: 10px 15px;
+ border: 2px solid black;
+ outline: none;
}
-.login_email {
- background-color: rgba(126, 124, 124, 0.1);
- border-radius: 3px;
- border: none;
- height: 31px;
- left: 9%;
- top: 15%;
- position: relative;
- padding: 5px;
- resize: none;
- text-align: left;
- width: 455px;
-}
-.login_pass {
- background-color: rgba(126, 124, 124, 0.1);
- border-radius: 3px;
- border: none;
- height: 31px;
- left: 9%;
- top: 23%;
- position: relative;
- padding: 5px;
- resize: none;
- text-align: left;
- width: 455px;
+
+.signup-language-select {
+ border-radius: 1rem;
+ width: 70%;
+ margin: 10px auto;
+ padding: 10px 11px;
+ border: 2px solid black;
+ outline: none;
}
-.login_button {
- background-color: transparent;
- position: absolute;
- height: 70px;
- width: 270px;
- top: 60%;
- left: 27%;
- transition: all 0.2s ease;
+
+.login-pass, .signup-email-add, .signup-password, .signup-password-confirm {
+ border-radius: 1rem;
+ width: 70%;
+ margin: 10px auto;
+ padding: 10px 15px;
+ border: 2px solid black;
+ outline: none;
+}
+
+.add-stream-bio {
+ border-radius: 1rem;
+ width: 70%;
+ margin: 10px auto;
+ padding: 10px 10px 60px 15px;
+ border: 2px solid black;
+ outline: none;
+}
+
+.signup-name-container {
+ width: 70%;
+ display: flex;
+ justify-content: center; /* This centers the children (inputs) horizontally */
+ gap: 10px; /* Adjust the space between the inputs */
+}
+
+.image-upload-label {
+ background-color: lightgray;
+ margin: 10px auto;
+ padding: 10px 15px;
+ border: 2px solid black;
+ outline: none;
+ color: black;
+ border-radius: 1rem;
+ cursor: pointer;
+}
+
+#file-chosen {
+ margin-left: 0.3rem;
+}
+
+.login-submit, .signup-submit, .delete-btn {
+ width: 70%;
+ margin-top: 20px;
+ padding: 10px 15px;
+ border-radius: 25px;
+ border: none;
+ background-color: black;
+ color: #ffffff;
cursor: pointer;
+ transition: background-color 0.3s ease;
}
-.login_text {
- position: absolute;
- top: 73%;
- left: 37%;
- font-weight: 500;
- font-size: 12px;
- letter-spacing: -0.015em;
- opacity: 0.45;
+
+.css-1q60rmi-MuiAutocomplete-endAdornment {
+ top: calc(50% - 13px) !important;
+}
+
+.login-submit:hover, .signup-submit:hover {
+ background-color: green;
+}
+
+.delete-btn:hover {
+ background-color: red;
+}
+
+.login-text {
+ text-align: center;
+ color: #666666;
+ margin-top: 30px;
+}
+
+.signup-link {
+ color: #00587a;
cursor: pointer;
}
-.login-font-class-1 {
- color: rgba(0, 0, 0, 0.75);
- font-family: "Montserrat-Medium", Helvetica, Arial, serif;
- font-size: 1.25rem;
- font-style: normal;
- font-weight: 500;
- letter-spacing: -0.21px;
+
+
+/* Responsive design */
+@media (max-width: 600px) {
+ .login-modal {
+ width: 100%; /* Full width on mobile */
+ padding: 20px; /* Adjust padding as required */
+ }
+
+ .login-email, .login-pass, .login-submit, .signup-submit, .signup-firstname, .signup-lastname, .signup-language-select, .signup-password, .signup-password-confirm,
+ .signup-email-add, .signup-name-container, .add-stream-bio, .delete-btn {
+ width: 50%; /* A little less than full width to provide some padding */
+ }
+
+ .login_popup {
+ align-items: center; /* This will center the child items horizontally */
+ padding: 20px 0; /* Add padding on top and bottom for spacing */
+ }
+
+ /* Other adjustments for mobile can be added here */
}
-.login_button:hover {
- transform: scale(1.1);
+
+
+
+@media (max-width: 450px) {
+
+ .login-email, .login-pass, .login-submit, .signup-submit, .delete-btn, .signup-firstname, .signup-lastname, .signup-language-select, .signup-password, .signup-password-confirm,
+ .signup-email-add, .signup-name-container, .add-stream-bio {
+ width: 80%; /* A little less than full width to provide some padding */
+ }
+
}
+select:invalid { color: gray; }
+
/*universal text*/
.app-monsterrat-black {
/* color: black; */
- font-family: "Montserrat", Helvetica, Arial, serif;
+ font-family: "Open Sans-Bold", Helvetica, Arial, serif;
font-style: normal;
}
.app-opensans-normal {
- font-family: "Open Sans", Helvetica, Arial, serif;
+ font-family: "Open Sans-Bold", Helvetica, Arial, serif;
font-style: normal;
font-weight: bold;
}
diff --git a/interface/src/configs/VideoTypes.json b/interface/src/configs/VideoTypes.json
index cd67c75c..11e3fdee 100644
--- a/interface/src/configs/VideoTypes.json
+++ b/interface/src/configs/VideoTypes.json
@@ -22,21 +22,21 @@
},
{
"type": "no-answer",
- "displayText": "Cannot Answer",
+ "displayText": "Can't Answer",
"toolTip": "Video type for questions you cannot answer or poorly understood",
"toolTipExample": "I did not get that; sorry, can you repeat?; please elaborate?; huh?; You can ask me about my family, my job, and my artwork...",
"auto_question": true
},
{
"type": "y/n-answer",
- "displayText": "Yes/No Answers",
+ "displayText": "Yes/No Answer",
"toolTip": "Video type for positive/negative answers",
"toolTipExample": "Yes!, Right!, Yep!, No!, Never!",
"auto_question": false
},
{
"type": "filler",
- "displayText": "Filler Between Videos",
+ "displayText": "Filler",
"toolTip": "Video type for filler videos that will be used when waiting for the conversant to ask a question",
"toolTipExample": "nodding head, smiling, brushing hair, sipping coffee, scratching nose, checking phone, ...",
"auto_question": true
diff --git a/interface/src/configs/backend-urls.js b/interface/src/configs/backend-urls.js
index 85661348..352b75e6 100644
--- a/interface/src/configs/backend-urls.js
+++ b/interface/src/configs/backend-urls.js
@@ -13,6 +13,7 @@ const API_URLS = {
`${BASE_URL}/toia_user/questions/onboarding`,
QUESTION_SUGGESTIONS: () => `${BASE_URL}/question_suggestions`,
ANSWERED_QUESTIONS: () => `${BASE_URL}/question/answered`,
+ DELETE_USER: () => `${BASE_URL}/toia_user`,
STREAM_ANSWERED_QUESTIONS: stream_id =>
`${BASE_URL}/question/answered?stream_id=${stream_id}`,
USER_STATS: () => `${BASE_URL}/toia_user/stats`,
diff --git a/interface/src/images/TOIA_Logo-2.png b/interface/src/images/TOIA_Logo-2.png
new file mode 100644
index 00000000..585412d0
Binary files /dev/null and b/interface/src/images/TOIA_Logo-2.png differ
diff --git a/interface/src/images/TOIA_Logo.png b/interface/src/images/TOIA_Logo.png
index 585412d0..80003a1f 100644
Binary files a/interface/src/images/TOIA_Logo.png and b/interface/src/images/TOIA_Logo.png differ
diff --git a/interface/src/images/abdul.jpg b/interface/src/images/abdul.jpg
new file mode 100644
index 00000000..10cd482f
Binary files /dev/null and b/interface/src/images/abdul.jpg differ
diff --git a/interface/src/images/alberto.jpg b/interface/src/images/alberto.jpg
new file mode 100644
index 00000000..184d9ab9
Binary files /dev/null and b/interface/src/images/alberto.jpg differ
diff --git a/interface/src/images/ali.jpeg b/interface/src/images/ali.jpeg
new file mode 100644
index 00000000..778fda5f
Binary files /dev/null and b/interface/src/images/ali.jpeg differ
diff --git a/interface/src/images/bishnu.jpg b/interface/src/images/bishnu.jpg
new file mode 100644
index 00000000..9ef585d1
Binary files /dev/null and b/interface/src/images/bishnu.jpg differ
diff --git a/interface/src/images/gautam.jpeg b/interface/src/images/gautam.jpeg
new file mode 100644
index 00000000..435c06e3
Binary files /dev/null and b/interface/src/images/gautam.jpeg differ
diff --git a/interface/src/images/giorgi.jpg b/interface/src/images/giorgi.jpg
new file mode 100644
index 00000000..308ed6a4
Binary files /dev/null and b/interface/src/images/giorgi.jpg differ
diff --git a/interface/src/images/maaz.jpg b/interface/src/images/maaz.jpg
new file mode 100644
index 00000000..1dfd7671
Binary files /dev/null and b/interface/src/images/maaz.jpg differ
diff --git a/interface/src/images/ming.jpg b/interface/src/images/ming.jpg
new file mode 100644
index 00000000..3077ede2
Binary files /dev/null and b/interface/src/images/ming.jpg differ
diff --git a/interface/src/images/muaz.png b/interface/src/images/muaz.png
new file mode 100644
index 00000000..295c8537
Binary files /dev/null and b/interface/src/images/muaz.png differ
diff --git a/interface/src/images/paula.jpg b/interface/src/images/paula.jpg
new file mode 100644
index 00000000..87b1ecff
Binary files /dev/null and b/interface/src/images/paula.jpg differ
diff --git a/interface/src/images/sanjaya.jpeg b/interface/src/images/sanjaya.jpeg
new file mode 100644
index 00000000..6edbe2b5
Binary files /dev/null and b/interface/src/images/sanjaya.jpeg differ
diff --git a/interface/src/images/soojin.jpeg b/interface/src/images/soojin.jpeg
new file mode 100644
index 00000000..75e4995d
Binary files /dev/null and b/interface/src/images/soojin.jpeg differ
diff --git a/interface/src/locales/en/translations.js b/interface/src/locales/en/translations.js
index 5a0d8202..3c249be0 100644
--- a/interface/src/locales/en/translations.js
+++ b/interface/src/locales/en/translations.js
@@ -6,7 +6,7 @@ export default {
// NavBar.js
nav_welcome_back: "Welcome Back",
nav_login_request:
- "Enter the following information to login to your TOIA account",
+ "Sign in to your account",
nav_signup_request: "Don't have an Account? Sign Up",
nav_toia: "TOIA",
nav_about_us: "About Us",
@@ -16,14 +16,14 @@ export default {
nav_login: "Login",
// HomePage.js
- welcome: "Welcome to",
- tagline: " communication reimagined.",
+ welcome: "Connect across time.",
+ tagline: " Join now.",
// AboutUsPage.js
meet_the_team: "Meet The Team",
publications: "Publications",
github_repo: "Github Repo",
- product_tagline: "TOIA ... Communication Reimagined",
+ product_tagline: "TOIA ... Connect across time",
product_hook1:
"Imagine being able to share your story with your great grandchildren.",
product_hook2:
@@ -34,7 +34,7 @@ export default {
"With TOIA, you can create an online stream from the comfort of your home and connect with millions of people, anywhere in the world, anytime in the future.",
product_summary:
"TOIA is a project created at \
- <0> New York Univeristy Abu Dhabi's 0> \
+ <0> New York University Abu Dhabi's 0> \
<1> Camel Lab. 1>",
toia_team: "The TOIA Team",
publication_links: "Publication Links",
@@ -52,16 +52,16 @@ export default {
account_settings: "Account Settings",
edit_account: "Edit the following information about your account",
// name_input: "Name: ",
- password_input: "Password: ",
+ password_input: "Password",
// language_input: "Language: ",
- email_input: "Email: ",
- total_videos_in_stream: "Total Videos In Stream:",
+ email_input: "Email",
+ total_videos_in_stream: "Total Videos in Stream:",
// streamSetting?
save: "Save",
edit_stream: "Edit Stream",
edit_stream_text: "Edit the following information about your stream",
add_stream_text: "Add the following information about your stream",
- select_img: "Select image:",
+ select_img: "Select image",
enter_steam_name: "Enter a new stream name",
enter_stream_purpose: "Enter what your new stream will be about",
video_type: "Video Type: {playbackVideoType}",
@@ -72,18 +72,18 @@ export default {
confirm_delete: "Confirm Deletion",
video_entry: "Video entry",
- greet_user: "Hi {{toiaName}}",
+ greet_user: "Hi There, {{toiaName}}",
my_toia_streams: "My TOIA Streams",
// AvatarLibraryPage.js
page_title: "TOIA Stream Library",
// AvatarStream.js
- name_input: "Name: ",
+ name_input: "Name",
privacy_input: "Privacy: ",
privacy_option_public: "Public",
privacy_option_private: "Private",
- language_input: "Language: ",
+ language_input: "Language",
bio_input: "Bio: ",
add_video: "Add Video",
@@ -117,7 +117,7 @@ export default {
// Recorder.js Recorder
privacy_tooltip: "Set the privacy of the specific video",
- add_stream: "Add Stream",
+ add_stream: "Add to Stream",
alert_select_default_stream: "Default stream must be selected!",
total_videos: "Total Videos",
total_videos_length: "Total Videos Length",
@@ -143,5 +143,5 @@ export default {
signup_language: "Language:",
signup_create_password: "Create Password",
signup_confirm_password: "Confirm Password",
- signup_upload_picture: "Upload profile picture",
+ signup_upload_picture: "Upload Profile Picture",
};
\ No newline at end of file
diff --git a/interface/src/pages/AboutUsPage.css b/interface/src/pages/AboutUsPage.css
index c77da4c8..dd70a3af 100644
--- a/interface/src/pages/AboutUsPage.css
+++ b/interface/src/pages/AboutUsPage.css
@@ -1,102 +1,65 @@
-/* :root {
- --bg-color: #EEEEEE;
- --hd-color: #00ADB5;
- --t-color: #393E46;
-} */
+body, html {
+ margin: 0;
+ padding: 0;
+ height: 100%;
+ width: 100%;
+}
.about-page {
- /* background-color: white; */
background-color: var(--bg-color);
- height: 99vh;
- margin: 0px;
- min-height: 700px;
- min-width: 1440px;
- position: relative;
- width: 100%;
+ margin-top: 80px;
+ margin-left: 40px;
+ margin-right: 40px;
}
-/*page text*/
-.about-heading{
+.container-1 {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
- font-family: "Open Sans-Bold", Helvetica, Arial, serif;
- font-style: normal;
- font-weight: bold;
- font-size: 3rem;
- text-align: left;
- letter-spacing: -0.015em;
- position: relative;
- /* left: 50%; */
- top: 0%;
- width: 65%;
- color: black;
- margin-top: 0;
- margin-bottom: 0;
+.toiaImage {
+ max-height: 350px;
+ max-width: 350px;
}
-.about-text {
- /* font-family: "Open Sans-Bold", Helvetica, Arial, serif;
- font-style: normal;
- font-weight: 400;
- font-size: 1.25rem;
- text-align: left;
- letter-spacing: -0.015em;
- width: 60%;
- position: relative;
- left: 0%;
- /*top: 13%; */
- /* color: #707070; */
- /* color: var(--t-color); */
- /* margin: 0 auto; */
- /* margin-top: 20px;
- line-height: 1.5; */
- font-family: "Open Sans-Bold", Helvetica, Arial, serif;
- font-style: normal;
- font-weight: 400;
- font-size: 1.5rem;
- text-align: left;
- letter-spacing: -0.015em;
- width: 65%;
- position: absolute;
- left: 0%;
- color: black;
- /* margin-top: 20px; */
- line-height: 1.5;
- top: 25%;
- margin: 0;
- height: 50%;
+.about-heading{
+ letter-spacing: -0.015em;
}
+.about-text {
+ font-family: "Open Sans-Bold", Helvetica, Arial, serif;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 1.5rem;
+ letter-spacing: -0.015em;
+ color: black;
+}
+
.about-text a {
- color: black;
+ color: black;
}
-
+
.about-text a:hover {
- color: black;
- color: var(--nv-color);
+ color: black;
+ color: var(--nv-color);
}
.reference-links {
- width: 100%;
- position: absolute;
- left: 0%;
-
- top: 90%;
- text-align: center;
- padding: 20px 0 20px 0;
- height: 10%;
+ padding-left: 70px;
+ padding-right: 70px;
+ padding-top: 70px;
+ padding-bottom: 70px;
+ display: flex;
+ justify-content: space-between;
}
.reference-item {
- margin: 100px;
- font-family: "Open Sans-Bold", Helvetica, Arial, serif;
- font-style: normal;
- font-weight: 700;
- font-size: 2rem;
- color: black;
+ padding: 10px; /* Optional, for some spacing */
+ color: black;
}
.reference-item:hover {
- margin: 100px;
font-family: "Open Sans-Bold", Helvetica, Arial, serif;
font-style: normal;
font-weight: 700;
@@ -104,174 +67,119 @@
color: var(--nv-color);
}
-/*grid*/
-#grid {
- width: 1200px;
- height: 790px;
- top: 790px;
- left: 40px;
- position: absolute;
+.publication-links{
+ padding-top: 30px;
+ letter-spacing: -0.015em;
+ }
+
+.publications {
+ font-family: "Open Sans-Bold", Helvetica, Arial, serif;
+ font-style: normal;
+ font-weight: 200;
+ font-size: 1.5rem;
+ text-align: left;
+ letter-spacing: -0.015em;
+ color: black;
+ padding: 0 20px;
}
-.grid-heading {
- font-family: "Open Sans-Bold", Helvetica, Arial, serif;
- font-style: normal;
- font-weight: bold;
- font-size: 3rem;
- text-align: left;
- letter-spacing: -0.015em;
- position: absolute;
- /* left: 50%; */
- top: 80px;
- width: 100%;
- color: black;
- /* margin: 0 auto; */
-}
-.about-box {
- margin: 5px;
- text-align: center;
-}
-.about-grid {
- padding: 5px;
- overflow-y: auto;
- height: 70%;
- /* width: 84vw; */
- width: 113.5%;
- /* left: 8%;
- top: 25%; */
- left: -6.5%;
- top: 175px;
- position: absolute;
- display: flex;
- flex-wrap: wrap;
- flex-direction: row;
-}
-.about-grid > div {
- flex-basis: calc(24%);
-}
-.about-name {
- /* color: black; */
- color: black;
- font-family: "Montserrat", Helvetica, Arial, serif;
- font-style: normal;
- font-size: 20px;
- font-weight: 500;
- text-align: center;
- margin-bottom: 0px;
+ul {
+ list-style: none;
}
-.image-sizing {
- /* max-width:150px;
- max-height:150px; */
- width: 180px;
- height: 200px;
- /* max-width: 85%; */
- /* max-height: 85%; */
- object-fit: cover;
- border-radius: 5px;
+#scholarly ul li {
+ list-style-type: square;
+ line-height: 1.5;
+ padding: 10px;
}
-.about-team {
- width: 1200px;
- height: 570px;
- top: 80px;
- left: 40px;
- position: absolute;
- /* text-align: center; */
+.logos {
+ display: flex;
+ justify-content: center;
+ align-items: center;
}
-#scholarly {
- width: 1200px;
- height: 790px;
- top: 1580px;
- left: 40px;
- position: absolute;
+.logoImage {
+ flex: 1; /* Allows each link to take up equal space */
+ padding: 10px; /* Optional, for some spacing */
+ box-sizing: border-box; /* Makes sure padding is included in the width */
}
-.publication-links{
- font-family: "Open Sans-Bold", Helvetica, Arial, serif;
- font-style: normal;
- font-weight: bold;
- font-size: 3rem;
- text-align: left;
- letter-spacing: -0.015em;
- width: 100%;
- position: absolute;
- /* left: 10.7%; */
- top: 80px;
+.logoImage img {
+ max-width: 100%; /* Ensures the image scales down if needed */
+ height: auto; /* Maintains aspect ratio */
+}
- /* color: #707070; */
+@media (max-width: 900px) {
+ .reference-links {
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ }
- color: black;
- /* padding-left: 40px; */
+ .reference-item {
+ padding-top: 10px;
+ padding-bottom: 10px;
+ padding-left: 0px;
+ padding-right: 0px;
+ }
}
-.publications {
- font-family: "Open Sans-Bold", Helvetica, Arial, serif;
- font-style: normal;
- font-weight: 200;
- font-size: 1.5rem;
- text-align: left;
- letter-spacing: -0.015em;
- /* width: 1270px; */
- position: absolute;
- /* left: 50px; */
- top: 160px;
- /* padding: 150px; */
- /* color: #707070; */
- color: black;
- /* color: #707070; */
- padding: 0 20px;
+.grid-heading {
+ letter-spacing: -0.015em;
}
-ul {
- list-style: none;
+.about-grid {
+ display: grid;
+ gap: 2rem; /* This will provide spacing between grid items */
+ grid-template-columns: repeat(4, 1fr); /* By default, we want 4 images per row */
}
-#scholarly ul li {
- list-style-type: square;
- line-height: 1.5;
- padding: 10px;
+.image-sizing {
+ width: 180px;
+ height: 200px;
+ object-fit: cover;
}
-.nyuadImage {
- width: 25%;
- /* height: auto; */
- position: absolute;
- left: 25%;
- /* top:5%; */
+.about-name {
+ color: black;
+ font-family: "Montserrat", Helvetica, Arial, serif;
+ font-style: normal;
+ font-size: 20px;
+ font-weight: 500;
}
-.gitImage {
- font-size: 10rem;
- position: relative;
- left: -2.5%;
- bottom: 5%;
- color: var(--nv-color);
+.about-box {
+ margin: 5px;
+ text-align: center;
}
-.camelImage {
- width: 25%;
- height: auto;
- left: 52%;
- position: absolute;
- /* bottom: 2.5%; */
+
+@media (max-width: 1199px) and (min-width: 900px) {
+ .about-grid {
+ grid-template-columns: repeat(3, 1fr);
+ }
}
-.toiaImage {
- width: 30%;
- /* height: auto; */
- left: 70%;
- position: absolute;
- top: 3%;
+/* If the screen size is between 600px and 899px, show 2 images per row */
+@media (max-width: 899px) and (min-width: 400px) {
+ .about-grid {
+ grid-template-columns: repeat(2, 1fr);
+ }
}
-.logos {
- width: 1220px;
- height: 100px;
- top: 2150px;
- left: 40px;
- position: absolute;
- /* text-align: center; */
+/* If the screen size is less than 599px, show 1 image per row */
+@media (max-width: 399px) {
+ .about-grid {
+ grid-template-columns: repeat(2, 1fr);
+ }
+
+ .about-page {
+ background-color: var(--bg-color);
+ margin-top: 80px;
+ margin-left: 40px;
+ margin-right: 0px;
+ }
}
+
diff --git a/interface/src/pages/AboutUsPage.js b/interface/src/pages/AboutUsPage.js
index 13c91dd9..92d1d84a 100644
--- a/interface/src/pages/AboutUsPage.js
+++ b/interface/src/pages/AboutUsPage.js
@@ -1,5 +1,5 @@
import React, { useState, useEffect } from "react";
-import alberto from "../images/alberto.jpeg";
+import alberto from "../images/alberto.jpg";
import wahib from "../images/wahib.jpg";
import kertu from "../images/kertu.jpg";
import erin from "../images/erin.jpeg";
@@ -7,6 +7,17 @@ import nizar from "../images/nizar.jpg";
import goffredo from "../images/goffredo.jpeg";
import tyeece from "../images/Tyeece.jpg";
import armaan from "../images/armaan.jpg";
+import muaz from "../images/muaz.png";
+import paula from "../images/paula.jpg";
+import ming from "../images/ming.jpg";
+import soojin from "../images/soojin.jpeg";
+import ali from "../images/ali.jpeg";
+import gautam from "../images/gautam.jpeg";
+import bishnu from "../images/bishnu.jpg";
+import sanjaya from "../images/sanjaya.jpeg";
+import maaz from "../images/maaz.jpg";
+import giorgi from "../images/giorgi.jpg";
+import abdul from "../images/abdul.jpg";
import nyuad from "../images/nyuad-rb.png";
import camel from "../images/camel.png";
import history from '../services/history';
@@ -54,6 +65,17 @@ function AvatarViewPage() {
{ still: erin, member: "Erin Collins" },
{ still: goffredo, member: "Goffredo Puccetti" },
{ still: nizar, member: "Nizar Habash" },
+ { still: muaz, member: "Muaz Ahmad" },
+ { still: paula, member: "Paula Dozsa" },
+ { still: ming, member: "Ming Hu" },
+ { still: soojin, member: "Soojin Lee" },
+ { still: ali, member: "Muhammad Ali" },
+ { still: gautam, member: "Gautam Dinesh" },
+ { still: bishnu, member: "Bishnu Dev" },
+ { still: sanjaya, member: "Sanjaya Bhatta" },
+ { still: maaz, member: "Maaz Ahmed" },
+ { still: giorgi, member: "Giorgi Kituashvili" },
+ { still: abdul, member: "Abdul Samad Gomda" },
];
const renderTeam = (card, index) => {
@@ -66,7 +88,7 @@ function AvatarViewPage() {
/>
{card.member}
@@ -87,9 +109,10 @@ function AvatarViewPage() {
/>
-
{t("meet_the_team")}
-
{t("product_tagline")}
-
{t("product_hook1")}
+
{t("product_tagline")}
+
+
+ {t("product_hook1")}
{t("product_hook2")}
@@ -100,24 +123,28 @@ function AvatarViewPage() {
, ]} />
-
+
+ {/*
*/}
+
+
+
+
-
{t("toia_team")}
-
+
{t("toia_team")}
+
{team.map(renderTeam)}
-
{t("publication_links")}
+
{t("publication_links")}
-
Alberto Chierici, Tyeece Hensley, Wahib Kamran, Kertu Koss, Armaan Agrawal, Erin Collins, Goffredo Puccetti and Nizar Habash, A Cloud-based User-Centered Time-Offset Interaction Application,
@@ -147,9 +174,9 @@ function AvatarViewPage() {
diff --git a/interface/src/pages/AvatarGardenPage.css b/interface/src/pages/AvatarGardenPage.css
index 34a34a8a..11756be6 100644
--- a/interface/src/pages/AvatarGardenPage.css
+++ b/interface/src/pages/AvatarGardenPage.css
@@ -1,339 +1,82 @@
-.garden-page {
- background-color: white;
- height: 100vh;
- margin: 0px;
- min-height: 700px;
- min-width: 1440px;
- position: relative;
- width: 100%;
-}
-.garden-add:hover {
- transform: scale(1.1);
-}
-.garden-stream:hover {
- transform: scale(1.1);
-}
-.garden-trash:hover {
- transform: scale(1.07);
-}
-.garden-move_icon:hover {
- transform: scale(1.07);
-}
-.garden-settings:hover {
- transform: scale(1.1);
-}
-.garden-settings-delete:hover {
- transform: scale(1.1);
-}
-.garden-settings-save:hover {
- transform: scale(1.1);
-}
-
-/*elements*/
-.garden-title {
- background-color: transparent;
- height: auto;
- /* left: 35%; */
- position: absolute;
- top: 45%;
- font-size: 3rem;
- /* margin: auto; */
- width: 1020px;
- text-align: center;
- /* left:0% */
+.image-eye {
+ /* background-color: yellow; */
display: flex;
- left: 2.5%;
+ gap: 10px;
+ justify-content: center;
}
-.garden-subtitle {
- background-color: transparent;
- height: auto;
- /* left: 35%; */
- position: absolute;
- top: 77.5%;
- font-size: 1.25rem;
- /* margin: auto; */
- /* width: 1020px; */
- text-align: center;
- left: 3%;
+.user-img {
+ flex: 1 1 90%;
+ padding-left: 42px;
}
-.stream-heading {
- /* left: 1%; */
- position: absolute;
- top: 13.5%;
- font-size: 1.65rem;
- /* margin: 0 auto; */
-}
-.garden-settings {
- color: #7e7c7c;
- font-size: 45px;
- transition: all 0.2s ease-out;
- background-color: transparent;
- border: transparent;
- cursor: pointer;
- position: absolute;
- top: 44.5%;
- left: 94%;
-}
-.garden-carousel {
- left: 0%;
- top: 30%;
- position: absolute;
+.hidden {
+ display: none;
}
-.garden-carousel-card {
- text-align: center;
- align-items: center;
- /* height: 250px;
- width: 250px; */
-}
-.t1 {
- font-size: 1.5rem;
- margin-bottom: 0px;
+
+.vid-container {
+ padding-top: 10px;
+ padding-bottom: 10px;
}
-.t2 {
- font-size: 18px;
- color: #707070;
+
+
+#playbackVideo {
+ width: 100%;
+ border: 1px solid black;
+ border-radius: 10px;
}
-.garden-settings-buttons {
- display: inline;
- position: relative;
- left: 98%;
- bottom: 65%;
+
+.privacy-eye {
+ flex: 1 1 10%;
}
-.garden-settings-buttons button {
- display: block;
+
+.full-page {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
}
-.garden-carousel-menu {
+
+.add-text {
color: #7e7c7c;
- font-size: 18px;
+ font-weight: bold !important;
}
-.garden-carousel-menu p {
- display: inline;
+
+.add-text:hover {
+ color: black;
}
-.stream-text {
- left: 940px;
- /* 61.5%; */
- position: absolute;
- top: 400px;
- /* 45%; */
- font-size: 20px;
- color: #707070;
-}
-.elem-1 {
- background-color: #7e7c7c;
- border-radius: 30px;
- height: 20vh;
- left: 65%;
- top: 30%;
- width: 26vw;
- position: absolute;
-}
-.elem-2 {
- background-color: #7e7c7c;
- border-radius: 30px;
- height: 20vh;
- left: 65%;
- top: 60%;
- width: 26vw;
- position: absolute;
-}
-.elem-text-1 {
- color: white;
- width: 35%;
- text-align: center;
- position: absolute;
- font-size: 100px;
-}
-.elem-text-2 {
- color: white;
- width: 60%;
- left: 35%;
- top: 13%;
- text-align: center;
- position: absolute;
- font-size: 30px;
+
+.fa-caret-right, .fa-caret-down {
+ display: none;
}
+
+
.section1 {
- background-color: transparent;
- position: absolute;
- /* left: 2.5%;
- top: 10%;
- height: 87vh;
- width: 95vw; */
- left: 50px;
- top: 0px;
- height: 800px;
- width: 215px;
- border-right: 2px solid;
- border-color: rgba(229, 229, 229, 0.56);
- /* border-right: solid 1px rgba(229,229,229,0.16); */
-}
-.section2 {
- background-color: transparent;
- position: absolute;
- /* left: 2.5%;
- top: 87%;
- height: 87vh;
- width: 95vw; */
- left: 265px;
- top: 200px;
- height: 550px;
- width: 1005px;
-}
-
-.section3 {
- background-color: transparent;
- position: absolute;
- /* left: 2.5%;
- top: 87%;
- height: 87vh;
- width: 95vw; */
- left: 265px;
- top: 0px;
- height: 200px;
- width: 1005px;
- border-bottom: 2px solid;
- border-color: rgba(229, 229, 229, 0.56);
-}
-.garden-hidden {
- position: relative;
- left: 92.5%;
- top: 50%;
- height: 100px;
-}
-.video-text {
- left: 8%;
- position: absolute;
- top: 18.5%;
- font-size: 18px;
- color: #707070;
+ text-align: center;
+ flex: 1 1 20%; /* Change to 2 rows of 3 */
+ display: none;
}
-.stream-add-text {
- left: 20.5%;
- position: absolute;
- top: 78%;
- font-size: 18px;
- color: #707070;
- /* width: 25%; */
+.section1wider {
+ padding-top: 50px;
text-align: center;
- margin: auto;
-}
-
-/*buttons*/
-.garden-delete {
- /* color: white;
- font-size: 15px;
- background-color: transparent;
- border: transparent;
- cursor: pointer;
- position: relative;
- top: 43%;
- left: 2%; */
- color: white;
- font-size: 15px;
- background-color: transparent;
- border: transparent;
- cursor: pointer;
- position: relative;
- /* top: 50px; */
- left: 53px;
- /* right: 15px; */
- padding: 0;
- width: 15px;
- height: 15px;
- bottom: 1px;
-}
-.garden-edit {
- /* color: white;
- font-size: 12px;
- background-color: transparent;
- border: transparent;
- cursor: pointer;
- position: relative;
- top: 44.5%;
- right: 17%; */
- color: white;
- font-size: 15px;
- background-color: transparent;
- border: transparent;
- cursor: pointer;
- position: relative;
- /* top: 44.5%; */
- /* right: 17%; */
- padding: 0;
- left: 28px;
- width: 15px;
- text-align: center;
-}
-.garden-checkbox {
- /* position: relative;
- left: 2%;
- top: 43%;
- height: 15px;
- width: 20px;
- cursor: pointer; */
- position: relative;
- left: 5px;
- /* top: 85%; */
- height: 12px;
- width: 15px;
- cursor: pointer;
-}
-.garden-trash {
- background-color: transparent;
- height: 35px;
- top: 60%;
- position: absolute;
- cursor: pointer;
- transition: all 0.2s ease-out;
-}
-.garden-move_icon {
- background-color: transparent;
- height: 27px;
- cursor: pointer;
- transition: all 0.2s ease-out;
- position: absolute;
- top: 5%;
- left: 0px;
-}
-.garden-add {
- background-color: transparent;
- height: 98px;
- left: 8.5%;
- top: 2.5%;
- width: 75px;
- position: absolute;
- cursor: pointer;
- pointer-events: auto;
- transition: all 0.2s ease-out;
-}
-.garden-stream {
- background-color: transparent;
- left: 25.5%;
- /* 61%; */
- top: 68%;
- /* 30%; */
- width: 70px;
- position: absolute;
- cursor: pointer;
- pointer-events: auto;
- transition: all 0.2s ease-out;
+ flex: 1 1 20%; /* Change to 2 rows of 3 */
+ display: block;
+ background-color: lightgrey;
+ height: 100vh;
}
-/*grid*/
-.garden-box {
- margin: 20px;
- text-align: center;
- border-radius: 15px;
- height: 250px;
- width: 250px;
+.section2 {
+ padding-top: 130px;
+ flex: 1 1 80%;
+ padding-left: 15px;
+ height: 100vh
}
+
.garden-grid {
/* padding: 10px; */
overflow-y: scroll;
- height: 82%;
+ overflow-x: hidden;
+ height: 93%;
width: 97%;
left: 0.5%;
top: 11%;
@@ -342,528 +85,78 @@
flex-direction: row;
align-content: baseline;
}
-.garden-grid > div {
- padding: 10.2px;
-}
-.column {
- float: left;
- width: 48%;
- height: 126.73px;
- margin-bottom: 50px;
- background-size: auto;
- background-position: center;
-}
-.row:after {
- content: "";
- display: table;
- clear: both;
-}
-.garden-question {
- background-color: black;
- /* text-align: center;
- display: flex;
- justify-content: center;
- align-items: center; */
-}
-.garden-name {
- /* color: white;
- font-size: 13.5px;
- /* height: 83%; */
- /* left: 10%; */
- /* text-align: left; */
- /* height: 72%;
- width: 100%;
- overflow: auto;
- position: relative;
- left: 25%;
- margin-top: 15px; */
- /* text-align: left; */
- /* word-wrap: break-word; */
- /* bottom: 6%; */
-
- color: white;
- font-size: 13.5px;
- /* height: 83%; */
- /* left: 10%; */
- /* text-align: left; */
- height: 100px;
- width: 100%;
- overflow: auto;
- position: relative;
- left: 0;
- /* margin-top: 15px; */
- text-align: center;
- /* word-wrap: break-word; */
- /* bottom: 6%; */
- margin-bottom: 0;
- top: 0%;
- /* margin: 10px 2px 0px 8px; */
- padding: 0 1px 0 1px;
-}
-
-.stream-image-sizing {
- /* max-width:150px;
- max-height:150px; */
- width: 180px;
- height: 230px;
- border-radius: 5px;
- /* max-width: 85%; */
- /* max-height: 85%; */
- object-fit: cover;
-}
-
-.round-styling-first {
- border-radius: 5px 0 0 5px;
-}
-
-.round-styling-second {
- border-radius: 0 5px 5px 0;
-}
-
-/*searchbar*/
-.garden-search {
- background-color: rgba(126, 124, 124, 0.1);
- border: 0;
- border-radius: 3px;
- height: 31px;
- left: 1.5%;
- padding: 5px;
- position: absolute;
- resize: none;
- text-align: left;
- top: 1.5%;
- width: 96%;
- padding: 2px;
- font-size: 1.25rem;
- margin: 5px 0;
-}
-
-.garden-search-text {
- /* font-style: italic; */
- font-weight: 300;
- color: #515151;
- font-family: "Montserrat-Medium", Helvetica, Arial, sans-serif;
- font-style: normal;
- font-weight: 300;
- letter-spacing: -0.015em;
-}
-.garden-search::-webkit-input-placeholder {
- font-family: FontAwesome;
- font-weight: normal;
- overflow: visible;
- vertical-align: top;
- display: inline-block !important;
- padding-left: 5px;
- padding-top: 2px;
- color: #636363;
-}
-.garden-search::-moz-placeholder {
- font-family: FontAwesome;
- font-weight: normal;
- overflow: visible;
- vertical-align: top;
- display: inline-block !important;
- padding-left: 5px;
- padding-top: 2px;
- color: #636363;
-}
-.garden-search:-ms-input-placeholder {
- font-family: FontAwesome;
- font-weight: normal;
- overflow: visible;
- vertical-align: top;
- display: inline-block !important;
- padding-left: 5px;
- padding-top: 2px;
- color: #636363;
-}
-
-/*Settings Popup Menu*/
-.garden-settings-name {
- background-color: transparent;
- height: 17px;
- left: 24%;
- position: absolute;
- text-align: left;
- top: 32%;
- width: 78px;
-}
-.garden-settings-name_box {
- background-color: rgba(126, 124, 124, 0.1);
- border: 0;
- border-radius: 3px;
- height: 31px;
- left: 33%;
- padding: 5px;
- position: absolute;
- resize: none;
- text-align: left;
- top: 30%;
- width: 400px;
-}
-.garden-settings-email {
- background-color: transparent;
- height: 17px;
- left: 24%;
- position: absolute;
- text-align: left;
- top: 42%;
- width: 78px;
-}
-.garden-settings-email_box {
- background-color: rgba(126, 124, 124, 0.1);
- border: 0;
- border-radius: 3px;
- height: 31px;
- left: 33%;
- padding: 5px;
- position: absolute;
- resize: none;
- text-align: left;
- top: 40%;
- width: 400px;
-}
-.garden-settings-pass {
- background-color: transparent;
- height: 17px;
- left: 20%;
- position: absolute;
- text-align: left;
- top: 52%;
- width: 78px;
-}
-.garden-settings-pass_box {
- background-color: rgba(126, 124, 124, 0.1);
- border: 0;
- border-radius: 3px;
- height: 31px;
- left: 33%;
- padding: 5px;
- position: absolute;
- resize: none;
- text-align: left;
- top: 50%;
- width: 400px;
-}
-.garden-settings-lang {
- background-color: transparent;
- height: 17px;
- left: 20%;
- position: absolute;
- text-align: left;
- top: 62%;
- width: 78px;
-}
-.garden-settings-lang_box {
- background-color: rgba(126, 124, 124, 0.1);
- border: 0;
- border-radius: 3px;
- height: 31px;
- left: 33%;
- padding: 5px;
- position: absolute;
- resize: none;
- text-align: left;
- top: 60%;
- width: 400px;
-}
-.garden-settings-delete {
- color: white;
- background-color: red;
- border-radius: 20px;
- height: 5vh;
- width: 10vw;
- text-align: center;
- display: flex;
- box-shadow: -5px 5px 10px rgba(0, 0, 0, 0.15);
- justify-content: center;
- transition: all 0.2s ease-out;
- cursor: pointer;
- align-items: center;
- position: absolute;
- top: 75%;
- left: 17%;
-}
-.garden-settings-text {
- font-size: 18px;
-}
-.garden-settings-save {
- color: white;
- background-color: #7e7c7c;
- border-radius: 20px;
- height: 5vh;
- width: 10vw;
- text-align: center;
- display: flex;
- box-shadow: -5px 5px 10px rgba(0, 0, 0, 0.15);
- cursor: pointer;
- justify-content: center;
- transition: all 0.2s ease-out;
- align-items: center;
- position: absolute;
- top: 75%;
- left: 70%;
-}
-/*Stream Settings Popup Menu*/
-.stream-settings-name {
- background-color: transparent;
- height: 17px;
- left: 24%;
- position: absolute;
- text-align: left;
- top: 32%;
- width: 78px;
-}
-.stream-settings-name_box {
- background-color: rgba(126, 124, 124, 0.1);
- border: 0;
- border-radius: 3px;
- height: 31px;
- left: 33%;
- padding: 5px;
- position: absolute;
- resize: none;
- text-align: left;
- top: 30%;
- width: 400px;
-}
-.stream-settings-email {
- background-color: transparent;
- height: 17px;
- left: 23%;
- position: absolute;
- text-align: left;
- top: 42%;
- width: 78px;
-}
-.stream-settings-email_box {
- background-color: rgba(126, 124, 124, 0.1);
- border: 0;
- border-radius: 3px;
- height: 31px;
- left: 33%;
- padding: 5px;
- position: absolute;
- resize: none;
- text-align: left;
- top: 40%;
- width: 400px;
-}
-.stream-settings-pass {
- background-color: transparent;
- height: 17px;
- left: 20%;
- position: absolute;
- text-align: left;
- top: 52%;
- width: 78px;
-}
-.stream-settings-pass_box {
- background-color: rgba(126, 124, 124, 0.1);
- border: 0;
- border-radius: 3px;
- height: 31px;
- left: 33%;
- padding: 5px;
- position: absolute;
- resize: none;
- text-align: left;
- top: 50%;
- width: 400px;
-}
-.stream-settings-lang {
- background-color: transparent;
- height: 17px;
- left: 26.5%;
- position: absolute;
- text-align: left;
- top: 52%;
- width: 78px;
-}
-.stream-settings-lang_box {
- background-color: rgba(126, 124, 124, 0.1);
- border: 0;
- border-radius: 3px;
- height: 60px;
- left: 33%;
- padding: 5px;
- position: absolute;
- resize: none;
- text-align: left;
- top: 52%;
- width: 400px;
- /* resize: none; */
- resize: both;
-}
-
-.stream-photo-upload {
- background-color: transparent;
- height: 55px;
- left: 17.5%;
- position: absolute;
- text-align: left;
- top: 68%;
- width: 500px;
-}
-
-.stream-photo-upload-choose {
- position: absolute;
- text-align: left;
- left: 20%;
-}
-
-.stream-photo-upload-submit {
- position: absolute;
- text-align: left;
- top: 2%;
- left: 88%;
-}
-
-.stream-settings-delete {
- color: white;
- background-color: red;
- border-radius: 20px;
- height: 5vh;
- width: 10vw;
- text-align: center;
+.stats-container {
display: flex;
- box-shadow: -5px 5px 10px rgba(0, 0, 0, 0.15);
- justify-content: center;
- transition: all 0.2s ease-out;
- cursor: pointer;
- align-items: center;
- position: absolute;
- top: 85%;
- left: 17%;
-}
-.stream-settings-text {
- font-size: 18px;
-}
-.stream-settings-save {
- color: white;
- background-color: #7e7c7c;
- border-radius: 20px;
- height: 5vh;
- width: 10vw;
text-align: center;
- display: flex;
- box-shadow: -5px 5px 10px rgba(0, 0, 0, 0.15);
- cursor: pointer;
justify-content: center;
- transition: all 0.2s ease-out;
- align-items: center;
- position: absolute;
- top: 90%;
- left: 35%;
+ gap: 8px;
+ padding-bottom: 20px;
}
-/*fonts*/
-.garden-font-class-2 {
- font-family: "Montserrat-Medium", Helvetica, Arial, serif;
- font-style: normal;
- font-weight: 300;
- letter-spacing: -0.015em;
-}
-
-.garden-font-class-5 {
- font-family: "Montserrat-Medium", Helvetica, Arial, serif;
- font-style: normal;
- /* font-weight: 300; */
- letter-spacing: -0.015em;
+.stats-wrapper {
+ width: 220px;
+ height: 50px;
+ border: solid 1px #d1d1d1;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-evenly;
+ background-color: #e9e9e9;
}
-.garden-font-class-3 {
- font-family: "Open Sans-Bold", Helvetica, Arial, serif;
- font-style: normal;
- font-weight: 200;
- letter-spacing: -0.015em;
+.rec.rec-dot_active {
+ background-color: rgba(229, 229, 229, 1);
+ box-shadow: 0 0 1px 3px rgb(229, 229, 229);
}
-.garden-font-class-4 {
- font-family: "Open Sans-Bold", Helvetica, Arial, serif;
- font-style: normal;
- font-weight: 300;
- letter-spacing: -0.015em;
- font-size: 1.25rem;
+.rec.rec-dot_active:hover {
+ cursor: pointer;
+ box-shadow: 0 0 1px 3px rgb(200, 200, 200);
}
-.garden-font-class-1 {
- font-family: "Open Sans-Bold", Helvetica, Arial, serif;
- font-style: normal;
- font-weight: 700;
- letter-spacing: -0.015em;
+.stats-label {
+ font-size: 13px;
+ line-height: 1;
}
-/* .BrainhubCarousel {
- display: grid;
+.cards-wrapper .card {
+ margin-top: 20px !important;
+ margin-bottom: 10px !important;
+ margin-left: 8px !important;
+ margin-right: 10px !important;
+ width: 226px !important;
+ height: 120px !important;
}
-.BrainhubCarousel .BrainhubCarousel__trackContainer .BrainhubCarousel__track {
- display: grid;
-} */
-
-.carousel.slide {
- width: 120px;
- height: 220px;
- margin-top: 230px;
- margin-left: 40px;
+.searching {
+ width: 100%;
}
-.carousel-inner {
- width: 220px;
+.cards-wrapper .card .image {
+ height: 84px !important;
}
-/* .Test {
- width: 250px;
- top: 12%;
-} */
-
-.rec.rec-carousel-wrapper {
- width: 250px;
- position: relative;
- top: 17.5%;
- /* right:11%; */
- /* margin: 0 auto; */
- right: 17.5%;
+.cards-wrapper .card img {
+ height: 100% !important;
+ padding: 10px;
}
-.rec.rec-dot_active {
- background-color: rgba(229, 229, 229, 1);
- box-shadow: 0 0 1px 3px rgb(229, 229, 229);
+.garden-carousel-card {
+ text-align: center;
+ align-items: center;
}
-.ejXxNI:hover {
- cursor: pointer;
- box-shadow: 0 0 1px 3px rgb(229 229 229);
+.garden-carousel-menu {
+ color: #7e7c7c;
+ font-size: 18px;
}
-.ejXxNI:focus {
- cursor: pointer;
- box-shadow: 0 0 1px 3px rgb(229 229 229);
+.garden-carousel-menu p {
+ display: inline;
}
-/* .rec.rec-slider-container {
- top:42%;
-} */
-
.stream-settings {
- color: #7e7c7c;
- opacity: 0.3;
- font-size: 22.5px;
- transition: all 0.2s ease-out;
- background-color: transparent;
- border: transparent;
- cursor: pointer;
- position: absolute;
- top: 105.5%;
- /* left: 42.5%; */
- z-index: 100;
-}
-
-.stream-settings:hover {
- transform: scale(1.1);
- opacity: 0.7;
+ visibility: hidden;
}
.stream-private {
@@ -874,10 +167,8 @@
background-color: transparent;
border: transparent;
cursor: pointer;
- position: absolute;
- top: 245.5%;
- /* left: 2.75%; */
z-index: 100;
+ visibility: hidden;
}
.stream-private:hover {
@@ -885,116 +176,112 @@
opacity: 0.7;
}
-.garden-notifications {
- background-color: var(--nv-color);
- height: 50%;
- /* left: 35%; */
- position: absolute;
- top: 25.5%;
- font-size: 1.5rem;
- /* margin: auto; */
- width: 39.5%;
- text-align: center;
- /* left:0% */
- display: flex;
- left: 52.5%;
- border-radius: 10px;
- color: white;
- padding: 10px 0px 0px 10px;
- font-weight: 550;
-}
-
-.cards-wrapper .card {
- width: 226px !important;
- height: 120px !important;
- margin: 5px !important;
+.garden-stream {
+ padding-top: 10px;
+ background-color: transparent;
+ width: 60px;
+ cursor: pointer;
+ pointer-events: auto;
+ transition: all 0.2s ease-out;
}
-.cards-wrapper .card .image {
- height: 84px !important;
+.stream-add-text{
+ padding-top: 5px;
+ padding-bottom: 10px;
}
-.cards-wrapper .card img {
- height: 100% !important;
- padding: 10px;
+.search-box-mytoia {
+ width: 84.5%;
+ padding-bottom: 10px;
}
-.two-line-ellipsis {
- width: 100%;
- overflow: hidden;
- display: -webkit-box;
- -webkit-line-clamp: 2;
- -webkit-box-orient: vertical;
+.ui.icon.input > i.icon {
+ line-height: 0.3 !important;
}
-.three-line-ellipsis {
- width: 100%;
- overflow: hidden;
- display: -webkit-box;
- -webkit-line-clamp: 3;
- -webkit-box-orient: vertical;
+.garden-settings {
+ color: #7e7c7c;
+ font-size: 30px;
+ background-color: transparent;
+ border: transparent;
}
-.bg-toia-theme {
- --bs-bg-opacity: 1;
- background-color: #00587a !important;
+.garden-settings:hover {
+ transform: scale(1.1);
}
-.text-white {
- color: white !important;
+.settings-title-icon {
+ position: relative;
+ display: flex;
+ gap: 5px;
+ justify-content: center;
+ align-items: center;
+ padding-bottom: 10px;
}
-.text-red {
- color: red;
+.acc-settings-text {
+ color: black;
}
-.cursor-pointer {
- cursor: pointer;
+.acc-settings-text:hover {
+ color: black;
}
-.cursor-disabled {
- cursor: not-allowed;
+.popup-field-heading {
+ text-align: left !important;
}
-.text-center {
+.center-delete {
text-align: center;
}
-.margin-bottom-2px {
- margin-bottom: 2px !important;
-}
-.stats-container {
- display: flex;
- position: absolute;
- top: 40%;
- right: 12%;
- text-align: center;
+@media (max-width: 790px) {
+ .cards {
+ justify-content: center !important;
+ }
}
-.stats-wrapper {
- margin: 5px;
- width: 120px;
- height: 60px;
- border: solid 1px #d1d1d1;
- display: flex;
- flex-direction: column;
- justify-content: space-evenly;
- font-family: monospace;
- background-color: #e9e9e9;
-}
+@media (max-width: 1044px) {
-.stats-number {
- font-size: 20px;
-}
+ .section1 {
+ padding-top: 50px;
+ padding-bottom: 10px;
+ display: block;
+ background-color: lightgrey;
+ flex: 1 1 100%;
+ }
-.stats-label {
- font-size: 12px;
- line-height: 1;
-}
+ .section1wider {
+ display: none;
+ }
-.search-box-mytoia {
- margin: 10px;
- margin-left: 14px;
- margin-right: 55px;
+ .garden-title {
+ padding-top: 20px;
+ }
+
+ .section2 {
+ padding-top: 20px;
+ padding-left: 20px;
+ padding-right: 20px;
+ }
+
+ .search-box-mytoia {
+ width: 100%;
+ }
+
+ .fa-caret-right, .fa-caret-down {
+ display: inline-block;
+ position: absolute;
+ left: 20px;
+ top: 80px;
+ font-size: 30px;
+ }
+
+ .fa-caret-right:hover, .fa-caret-down:hover {
+ transform: scale(1.1);
+ }
}
+
+
+
diff --git a/interface/src/pages/AvatarGardenPage.js b/interface/src/pages/AvatarGardenPage.js
index 3abe956f..abcdf98e 100644
--- a/interface/src/pages/AvatarGardenPage.js
+++ b/interface/src/pages/AvatarGardenPage.js
@@ -1,8 +1,10 @@
import IconButton from "@material-ui/core/IconButton";
import Menu from "@material-ui/core/Menu";
+import TextField from "@mui/material/TextField";
import MenuItem from "@material-ui/core/MenuItem";
import React, { useState } from "react";
import Carousel from "react-elastic-carousel";
+import { createTheme, ThemeProvider } from '@mui/material/styles';
import {
NotificationContainer,
NotificationManager,
@@ -18,6 +20,8 @@ import axios from "axios";
import Tracker from "../utils/tracker";
import "./AvatarGardenPage.css";
+import { logout } from "../auth/auth.js";
+
import NavBar from "./NavBar.js";
import { useBottomScrollListener } from "react-bottom-scroll-listener";
@@ -77,7 +81,9 @@ export const RecordAVideoCard = ({ onClick, isDisabled }) => {
onClick={e => {
if (!isDisabled) onClick(e);
}}>
- {t("add_new_video")}
+
+ {t("add_new_video")}
+
@@ -91,7 +97,7 @@ export const OnBoardingQCard = ({ data, onClick }) => {
return (
-
+
{data.question}
@@ -123,7 +129,7 @@ export const SuggestedQCard = ({
"ui grey card " +
(isDisabled ? "cursor-disabled" : "cursor-pointer")
}>
-
+
{data.question}
@@ -159,7 +165,7 @@ export const SuggestedQCardNoAction = ({ data, onClick, isDisabled }) => {
data-tooltip={isDisabled ? t("record_request") : undefined}
data-inverted="">
-
+
{data.question}
@@ -179,7 +185,7 @@ export const RecordedQCard = ({ data, onClick, onEdit, onDelete }) => {
return (
-
+
{data.question}
@@ -339,6 +345,34 @@ export const RecordedQCard = ({ data, onClick, onEdit, onDelete }) => {
// )
// }
+const theme = createTheme({
+ components: {
+ MuiTextField: {
+ styleOverrides: {
+ root: {
+ '& .MuiInputBase-input': {
+ color: 'black', // Text color
+ },
+ '& .MuiInputLabel-root': {
+ color: 'black', // Label color
+ },
+ '& .MuiOutlinedInput-root': {
+ '& fieldset': {
+ borderColor: 'black', // Border color
+ },
+ '&:hover fieldset': {
+ borderColor: 'black', // Hover border color
+ },
+ '&.Mui-focused fieldset': {
+ borderColor: 'black', // Focused border color
+ },
+ },
+ },
+ },
+ },
+ },
+ });
+
function AvatarGardenPage() {
const { t, i18n } = useTranslation();
@@ -381,7 +415,13 @@ function AvatarGardenPage() {
const [searchTerm, setSearchTerm] = useState("");
- const [numberOfVideosDisplayed, setNumberOfVideosDisplayed] = useState(10);
+ const [firstSectionVisible, setFirstSectionVisible] = useState(false);
+
+ const toggleVisibility = () => {
+ setFirstSectionVisible(!firstSectionVisible);
+ };
+
+ const [numberOfVideosDisplayed, setNumberOfVideosDisplayed] = useState(30);
const [loadingVideos, setLoadingVideos] = useState(false);
@@ -447,6 +487,7 @@ function AvatarGardenPage() {
return item;
});
setPendingOnBoardingQs(data);
+ console.log(data)
if (cb_success) cb_success();
} else {
@@ -922,34 +963,42 @@ function AvatarGardenPage() {
return (
-
- {streamSetting}
+ className="garden-carousel-card"
+ id={card.id_stream}
+ key={index}>
+
+
+
+
+
+
+
+ {streamSetting}
+
+
-
{toiaName}
-
-
*/}
+
- {card.name}
-
+ {card.name} Stream
+
-
+ {/*
{t("total_videos_in_stream")}
{card.videos_count}
-
+
*/}
+
);
@@ -1024,6 +1073,21 @@ function AvatarGardenPage() {
dispatch({ type: "close" });
}
+ const deleteUser = (e) => {
+ const options = {
+ method: "DELETE",
+ url: API_URLS.DELETE_USER(),
+ };
+
+ axios.request(options).then(function (response) {
+ console.log("deleted");
+ logout();
+ history.push("/");
+ }).catch(function (error) {
+ console.error(error);
+ });
+ }
+
function setImg(e) {
setNewStreamPic(e.target.files[0]);
e.preventDefault();
@@ -1055,8 +1119,22 @@ function AvatarGardenPage() {
const inlineStyleSetting = {
modal: {
- height: "70vh",
- width: "50vw",
+ height: "560px",
+ width: "600px",
+ },
+ };
+
+ const inlineStyleSetting2 = {
+ modal: {
+ height: "650px",
+ width: "600px",
+ },
+ };
+
+ const inlineStyleSettingMobile = {
+ modal: {
+ height: "690px",
+ width: "380px",
},
};
@@ -1112,63 +1190,75 @@ function AvatarGardenPage() {
+
dispatch2({ type: "close" })}>
-
+
Account Settings
-
+
{t("edit_account")}
+
+
+
+
dispatch4({ type: "close" })}>
-
+
{t("add_stream")}
-
+
{t("add_stream_text")}
+
-
- {t("name_input")}
-
+
+
+
- {t("video_entry")}
+ {t("video_entry")}
- Video Type: {playbackVideoType}
-
- Question being answered: "{playbackVideoQuestion}"
+
+
-
- Privacy Settings: {playbackVideoPrivacy}
+
-
+
{videoPlayback}
-
The answer provided:
-
The answer provided:
+ {/*
{}}
+ /> */}
+
{}}
+ value={playbackVideoAnswer}
/>
-
+ {/*
-
+ */}
-
-
- {t("greet_user", { toiaName: toiaName })}
-
-
-
-
{videosCount}
-
{t("total_videos")}
-
+
-
-
- {videosTotalDuration
- ? (videosTotalDuration / 60).toFixed(1)
- : 0}
- Min
+ {/* left side */}
+
+
+
+ {t("greet_user", { toiaName: toiaName })}
+
+
+
+
+
+
Account Settings
+
-
- {t("total_videos_length")}
+
+
+
+
{videosCount} Videos, {videosTotalDuration
+ ? (videosTotalDuration / 60).toFixed(1)
+ : 0} Mins
+
+
+
+
+
+ {streamList.map(renderStream)}
+
+
+ {/* add stream button */}
+
{
+ openModal4(event);
+ }}>
+
+
+
+ Add Stream
+
-
-
-
-
- {t("my_toia_streams")}
-
-
- {streamList.map(renderStream)}
-
+
+
+
+ {t("greet_user", { toiaName: toiaName })}
+
+
+
+
Account Settings
+
+
-
{
- openModal4(event);
- }}>
-
-
-
- Add Stream
-
-
+
+
+
{videosCount} Videos, {videosTotalDuration
+ ? (videosTotalDuration / 60).toFixed(1)
+ : 0} Mins
+
+
+
-
- {/*
{setSearchTerm(e.target.value)}} value={searchTerm}/>*/}
+
+ {streamList.map(renderStream)}
+
-
-
{
- setSearchTerm(e.target.value);
- }}
- value={searchTerm}
- />
-
+ {/* add stream button */}
+
{
+ openModal4(event);
+ }}>
+
+
+
+
+ Add Stream
+
-
-
-
-
+
+ {/* {setSearchTerm(e.target.value)}} value={searchTerm}/> */}
+
+
+
+
+ {
+ setSearchTerm(e.target.value);
+ }}
+ value={searchTerm}
/>
+
+
- {pendingOnBoardingQs.map((q, index) => {
- return (
- {
- openSuggestion(e, q);
- }}
- key={index}
- />
- );
- })}
-
- {getFilteredSuggestionsList()
- .slice(0, 5)
- .map((q, index) => {
+
+
+
+
+
+
+
+
+ {pendingOnBoardingQs.map((q, index) => {
return (
- {
openSuggestion(e, q);
}}
- isDisabled={
- pendingOnBoardingQs.length !== 0
- }
- onEdit={() => {
- setSuggestionNewValue(
- q.question,
- );
- setCurrentlyEditingSuggestion(
- q,
- );
- setIsEditSuggestionModalActive(
- true,
- );
- }}
- onDelete={() => {
- handleDeleteSuggestion(q);
- }}
key={index}
/>
);
})}
- {getFilteredRecordedQsList()
- .slice(0, numberOfVideosDisplayed)
- .map((q, index) => {
- return (
- {
- openPlayback(e, q);
- }}
- key={index}
- onEdit={() => {
- handleEditRecordedVideoClick(q);
- }}
- onDelete={() => {
- setQuestionBeingDeleted(q);
- setShowVideoDeletePopup(true);
- }}
- />
- );
- })}
+ {getFilteredSuggestionsList()
+ .slice(0, 5)
+ .map((q, index) => {
+ return (
+ {
+ openSuggestion(e, q);
+ }}
+ isDisabled={
+ pendingOnBoardingQs.length !== 0
+ }
+ onEdit={() => {
+ setSuggestionNewValue(
+ q.question,
+ );
+ setCurrentlyEditingSuggestion(
+ q,
+ );
+ setIsEditSuggestionModalActive(
+ true,
+ );
+ }}
+ onDelete={() => {
+ handleDeleteSuggestion(q);
+ }}
+ key={index}
+ />
+ );
+ })}
+
+ {getFilteredRecordedQsList()
+ .slice(0, numberOfVideosDisplayed)
+ .map((q, index) => {
+ return (
+ {
+ openPlayback(e, q);
+ }}
+ key={index}
+ onEdit={() => {
+ handleEditRecordedVideoClick(q);
+ }}
+ onDelete={() => {
+ setQuestionBeingDeleted(q);
+ setShowVideoDeletePopup(true);
+ }}
+ />
+ );
+ })}
+
+ {loadingVideos && (
+
+ )}
- {loadingVideos && (
-
- )}
-
- {EditSuggestionModal()}
+ {EditSuggestionModal()}
-
{
- setShowVideoDeletePopup(false);
- }}
- onConfirm={handleDeleteVideo}
- />
+ {
+ setShowVideoDeletePopup(false);
+ }}
+ onConfirm={handleDeleteVideo}
+ />
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
);
diff --git a/interface/src/pages/AvatarLibraryPage.css b/interface/src/pages/AvatarLibraryPage.css
index 8276d5b0..f9bce89c 100644
--- a/interface/src/pages/AvatarLibraryPage.css
+++ b/interface/src/pages/AvatarLibraryPage.css
@@ -1,19 +1,5 @@
-.library-page {
- background-color: white;
- height: 100vh;
- margin: 0px;
- min-height: 700px;
- min-width: 1440px;
- position: relative;
- width: 100%;
-}
-
.library-page-setup {
- position: absolute;
- top: 80px;
- width: 1200px;
- height: 700px;
- left: 40px;
+ padding-top: 65px;
}
.library-box:hover {
@@ -30,17 +16,7 @@
/*elements*/
.library-heading {
- font-family: "Open Sans-Bold", Helvetica, Arial, serif;
- font-style: normal;
- font-weight: bold;
- font-size: 3rem;
- text-align: left;
- letter-spacing: -0.015em;
- position: relative;
- /* left: 50%; */
- top: 0%;
- color: black;
- margin: 0 auto;
+ padding-left: 43px;
}
.library-highlights {
@@ -96,22 +72,25 @@
}
.library-grid {
- padding: 5px;
overflow-y: auto;
- /* height: 75%; */
- height: 100%;
- width: 117.5%;
- left: -2.5%;
- top: 20%;
- position: absolute;
display: flex;
flex-wrap: wrap;
flex-direction: row;
- padding-left: 0px;
+ gap: 20px;
+ padding-left: 43px;
+ padding-right: 43px;
}
-.library-grid > div {
- flex-basis: calc(18%);
+/* .library-grid > div {
+ flex: calc(10%);
+} */
+
+/* .garden-carousel-card{
+ padding: 10px;
+} */
+
+.garden-font-class-2 {
+ margin: 0px !important;
}
.library-name {
@@ -135,6 +114,16 @@
height: 157px;
}
+.search-box-library {
+ width: 85%;
+ padding-bottom: 20px;
+ padding-left: 43px;
+}
+
+.ui.icon.input.search-box-library > i.icon {
+ height: 80%;
+}
+
/*searchbar*/
.library-search {
background-color: #f8f8f8;
@@ -264,6 +253,7 @@
}
input[type="text"]::placeholder {
+ padding: 0px;
/* color: rgb(229,229,229);
font-family: "Montserrat-Medium", Helvetica, Arial, serif;
font-style: normal;
@@ -272,8 +262,6 @@ input[type="text"]::placeholder {
}
.library-stream-image-sizing {
- /* max-width:150px;
- max-height:150px; */
width: 180px;
height: 230px;
border-radius: 5px;
@@ -356,3 +344,21 @@ input[type="text"]::placeholder {
/* resize: none; */
resize: both;
}
+
+@media (max-width: 768px) { /* Adjust 768px to the breakpoint you desire */
+ .library-grid {
+ justify-content: center;
+ padding-left: 0px;
+ padding-right: 0px;
+ }
+
+ .search-box-library {
+ width: 92%;
+ }
+
+
+ .nav-toia_icon, .nav-about_icon, .nav-talk_icon, .nav-my_icon, .nav-login_icon {
+ width: 100%; /* Make nav items take up the full width */
+ justify-content: flex-start; /* Align text to the start */
+ }
+ }
\ No newline at end of file
diff --git a/interface/src/pages/AvatarLibraryPage.js b/interface/src/pages/AvatarLibraryPage.js
index ec2beaf9..4fc48785 100644
--- a/interface/src/pages/AvatarLibraryPage.js
+++ b/interface/src/pages/AvatarLibraryPage.js
@@ -113,16 +113,17 @@ function AvatarLibraryPage() {
className="library-stream-image-sizing" //stream thumbnail
alt="stream thumbnail"
/>
+
-
{card.first_name + " " + card.last_name}
-
+
-
- {" " + card.name + " stream"}
+ */}
+ {"" + card.name + " stream"}
-
+ {/*
+ >
*/}
);
};
@@ -327,15 +328,20 @@ function AvatarLibraryPage() {
-
+
{t("page_title")}
- searchStreams(event.target.value)}
- />
+
+
+ searchStreams(event.target.value)}
+ />
+
+
+
+
diff --git a/interface/src/pages/EditRecorderPage.css b/interface/src/pages/EditRecorderPage.css
index 6def6495..6b464ffa 100644
--- a/interface/src/pages/EditRecorderPage.css
+++ b/interface/src/pages/EditRecorderPage.css
@@ -18,7 +18,7 @@ video {
width: 100%;
}
.edit-font-class-1 {
- font-family: "Montserrat", Helvetica, Arial, serif;
+ font-family: "Open Sans-Bold", Helvetica, Arial, serif;
font-style: normal;
font-size: 14px;
font-weight: 500;
@@ -237,7 +237,7 @@ video {
/*modal elements*/
.edit-modal-header {
color: black;
- font-family: "Montserrat", Helvetica, Arial, serif;
+ font-family: "Open Sans-Bold", Helvetica, Arial, serif;
font-style: normal;
font-size: 25px;
font-weight: 700;
@@ -246,7 +246,7 @@ video {
}
.edit-modal-text {
color: black;
- font-family: "Montserrat", Helvetica, Arial, serif;
+ font-family: "Open Sans-Bold", Helvetica, Arial, serif;
font-style: normal;
font-size: 14px;
font-weight: 500;
diff --git a/interface/src/pages/EditRecorderPage.js b/interface/src/pages/EditRecorderPage.js
index 0787ccac..05a68a1c 100644
--- a/interface/src/pages/EditRecorderPage.js
+++ b/interface/src/pages/EditRecorderPage.js
@@ -423,4 +423,4 @@ function EditRecorder() {
}
-export default EditRecorder;
+export default EditRecorder;
\ No newline at end of file
diff --git a/interface/src/pages/HomePage.css b/interface/src/pages/HomePage.css
index 475d1415..4d8c15b8 100644
--- a/interface/src/pages/HomePage.css
+++ b/interface/src/pages/HomePage.css
@@ -1,128 +1,139 @@
-.home-page {
- background-color: white;
- height: 800px;
- margin: 0px;
- /* min-height: 700px;
- min-width: 1440px; */
- position: relative;
- width: 1270px;
-}
-
-/*animation*/
-.home-animate-enter {
- animation: home-animate-enter-frames 1s ease-in-out 0s 1 normal forwards;
-}
-@keyframes home-animate-enter-frames {
- from {
- opacity: 0;
- transform: translateX(-25px);
- }
- to {
- opacity: 1;
- transform: translateX(0px);
- }
+:root {
+ --desert-storm: rgba(248, 248, 248, 1);
}
-.home-signup:hover {
- transform: scale(1.1);
+
+body, html {
+ margin: 0;
+ padding: 0;
+ height: 100%;
+ width: 100%;
}
-/*button and icons*/
-.home-signup {
- background-color: transparent;
- height: 70px;
- left: 0px;
- pointer-events: auto;
- position: absolute;
- top: 350px;
- transition: all 0.2s ease-out;
- width: 450px;
- cursor: pointer;
+.home-page {
+ background-color: white;
+ height: 100vh;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ margin: 0;
}
-.home-login {
- background-color: transparent;
- height: 70px;
- left: 230px;
- pointer-events: auto;
- position: absolute;
- top: 350px;
- transition: all 0.2s ease-out;
- width: 203px;
+
+.toia-home-video {
+ border-radius: 25px;
+ margin-top: 50px;
+ width: 75%;
}
+
.home-sample-videos {
- background-color: transparent;
- height: 568px;
- left: 80px;
- position: absolute;
- top: 13%;
- width: 493px;
- opacity: 0;
+ width: 30vw;
+ height: auto;
+ margin-right: 10vw;
}
-/*text and font*/
-.home-welcome-text {
- background-color: transparent;
- height: auto;
- left: 0px;
- letter-spacing: -0.54px;
- line-height: normal;
- position: absolute;
- text-align: left;
- top: 0px;
- width: 420px;
- font-size: 36px;
- font-weight: 600;
+.home-overlap-group {
+ margin-top: 40px;
}
+
.home-toia {
- background-color: transparent;
- height: auto;
- left: 25%;
- letter-spacing: 6px;
- line-height: normal;
- position: absolute;
- text-align: left;
- top: 30px;
- width: 316px;
- font-size: 120px;
+ visibility: hidden;
+ font-size: 14vh;
+ font-weight: bold;
+ margin-bottom: 3vh;
}
+
.home-des {
- background-color: transparent;
- height: auto;
- left: 0px;
- letter-spacing: -0.38px;
- line-height: normal;
- position: absolute;
- text-align: left;
- top: 200px;
- width: 420px;
- font-size: 25px;
- font-weight: 500;
+ font-size: 3vh;
+ font-weight: 600;
+ margin-bottom: 4vh;
+}
+
+.home-welcome-text {
+ font-size: 3vh;
+ font-weight: 600;
+
+}
+
+.home-about {
+ width: 100%;
+ padding: 15px 50px;
+ border-radius: 25px;
+ border: none;
+ background-color: black;
+ color: #ffffff;
+ font-size: 20px;
+ cursor: pointer;
+ transition: background-color 0.3s ease;
}
+
+.home-about:hover{
+ transform: scale(1.1);
+}
+
+.home-signup {
+ width: 30vw;
+ max-width: 450px;
+ transition: all 0.2s ease-out;
+ cursor: pointer;
+}
+
+.home-signup:hover {
+ transform: scale(1.1);
+}
+
.home-montserrat-black {
- color: var(--t-color);
- font-family: "Montserrat", Helvetica, Arial, serif;
- font-style: normal;
+ font-family: "Open Sans-Bold", Helvetica, Arial, serif;
+ font-style: bold;
+ font-size: 35px;
}
+
.home-opensans-normal {
- font-family: "Open Sans", Helvetica, Arial, serif;
- font-style: normal;
- font-weight: bold;
+ font-family: "Open Sans-Bold", Helvetica, Arial, serif;
+ font-style: normal;
+ font-weight: bold;
}
-/*layout and elements*/
-.home-overlap-group {
- background-color: transparent;
- height: 162px;
- left: 58%;
- position: absolute;
- top: 20%;
- width: 316px;
+.moved {
+ transform: translate(125%, 3%) scale(0.36); /* Adjust translation and scale as needed */
+ transition: transform 1s ease-in-out;
}
-/*colors*/
-:root {
- --desert-storm: rgba(248, 248, 248, 1);
-}
+@media (max-width: 600px) {
+
+ .home-toia {
+ margin-bottom: 0vh;
+ }
+
+ .home-page {
+ flex-direction: column;
+ align-items: center;
+ text-align: center;
+ }
+
+ .home-sample-videos {
+ width: 80vw;
+ }
+
+
+ .home-signup {
+ width: 60vw;
+ }
+
+ .home-welcome-text,
+ .home-des {
+ font-size: 3.3vh;
+ }
+
+ .home-toia {
+ font-size: 15vh;
+ }
+
+ .home-sample-videos {
+ margin-right: 0;
+ }
-.right-align{
- text-align: right;
+ .moved {
+ transform: translate(0%, 72.5%) scale(0.35); /* Adjust translation and scale as needed */
+ transition: transform 1s ease-in-out;
+ }
}
\ No newline at end of file
diff --git a/interface/src/pages/HomePage.js b/interface/src/pages/HomePage.js
index eb918880..a5592e53 100644
--- a/interface/src/pages/HomePage.js
+++ b/interface/src/pages/HomePage.js
@@ -1,9 +1,11 @@
import React, { useEffect, useRef, useState } from "react";
import NotificationContainer from "react-notifications/lib/NotificationContainer";
import signupButton from "../icons/signup-button.svg";
+import submitButton from "../icons/submit-button.svg";
import history from "../services/history";
import Tracker from "../utils/tracker";
import toia_home_vid from "../video/TOIA-LOGO-VID.mov";
+import toia_final_vid from "../video/toia-final-vid.mp4";
import NavBar from "./NavBar.js";
@@ -17,6 +19,8 @@ function HomePage() {
const [toiaID, setTOIAid] = useState(null);
const [isLoggedIn, setLoginState] = useState(false);
+ const [videoEnded, setVideoEnded] = useState(false);
+
useEffect(() => {
if (history.location.state !== undefined) {
setLoginState(true);
@@ -35,10 +39,16 @@ function HomePage() {
});
}
+ function about() {
+ history.push({
+ pathname: "/about",
+ });
+ }
+
const videoRef = useRef();
const setPlayBack = () => {
- videoRef.current.playbackRate = 1.5;
+ videoRef.current.playbackRate = 1;
};
return (
@@ -50,37 +60,50 @@ function HomePage() {
toiaLanguage={toiaLanguage}
history={history}
showLoginModal={true}
+ showSignupModal={true}
/>
-
+ */}
+
+ {/*
*/}
+
+
+
-
- {" "}
- {t("tagline")}
-
-
TOIA
-
{" "}
{t("welcome")}{" "}
-
-
+
+
TOIA
*/}
+
+
+
+ {/*
-
+
*/}
diff --git a/interface/src/pages/NavBar.css b/interface/src/pages/NavBar.css
new file mode 100644
index 00000000..be5eb240
--- /dev/null
+++ b/interface/src/pages/NavBar.css
@@ -0,0 +1,48 @@
+.nav-heading-bar {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-around; /* Adjust the space between nav items */
+ align-items: center;
+ padding: 9px;
+ position: fixed;
+ top: 0;
+ width: 100%;
+ background-color: var(--nv-color);
+ z-index: 100;
+ height: 40px;
+ }
+
+ .nav-toia_icon, .nav-about_icon, .nav-talk_icon, .nav-my_icon, .nav-login_icon {
+ font-size: 20px;
+ line-height: 22px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 40px;
+ cursor: pointer;
+ color: red;
+ opacity: 0.8;
+ text-align: center;
+ padding: 0 10px; /* Add padding to space items */
+ }
+
+ .nav-dropdown {
+ display: flex;
+ align-items: center;
+ color: white;
+ }
+
+ /* Responsive breakpoint */
+ @media (max-width: 768px) { /* Adjust 768px to the breakpoint you desire */
+ .nav-heading-bar {
+ flex-direction: column;
+ align-items: flex-start;
+ height: auto; /* Adjust height to auto to accommodate the changed layout */
+ }
+
+ .nav-toia_icon, .nav-about_icon, .nav-talk_icon, .nav-my_icon, .nav-login_icon {
+ width: 100%; /* Make nav items take up the full width */
+ justify-content: flex-start; /* Align text to the start */
+ }
+ }
+
\ No newline at end of file
diff --git a/interface/src/pages/NavBar.js b/interface/src/pages/NavBar.js
index 29532116..af209933 100644
--- a/interface/src/pages/NavBar.js
+++ b/interface/src/pages/NavBar.js
@@ -1,6 +1,9 @@
import { Modal } from "semantic-ui-react";
-import React from "react";
-import { NotificationManager } from "react-notifications";
+import React, { useState } from "react";
+import {
+ NotificationContainer,
+ NotificationManager,
+} from "react-notifications";
import axios from "axios";
import submitButton from "../icons/submit-button.svg";
import history from "../services/history";
@@ -20,26 +23,33 @@ function NavBar(props) {
function exampleReducer(state, action) {
switch (action.type) {
- case "open":
- return {
- open: true,
- };
+ case "openLogin":
+ return { loginOpen: true, signupOpen: false };
+ case "openSignup":
+ return { loginOpen: false, signupOpen: true };
case "close":
+ return { loginOpen: false, signupOpen: false };
default:
- return {
- open: false,
- };
+ return state;
}
}
-
- const [state, dispatch] = React.useReducer(exampleReducer, { open: false });
+
+ const initialState = { loginOpen: false, signupOpen: false };
+ const [state, dispatch] = React.useReducer(exampleReducer, initialState);
+
+
const { open } = state;
var input1, input2; //these hold all the user login data
- function openModal(e) {
- dispatch({ type: "open" });
+ function openLoginModal(e) {
+ dispatch({ type: "openLogin" });
+ e.preventDefault();
+ }
+
+ function openSignupModal(e) {
+ dispatch({ type: "openSignup" });
e.preventDefault();
}
@@ -117,7 +127,7 @@ function NavBar(props) {
},
});
} else {
- openModal(e);
+ openLoginModal(e);
}
}
@@ -142,6 +152,35 @@ function NavBar(props) {
});
}
+
+ const inlineStyleLogin = {
+ modal: {
+ height: "560px",
+ width: "600px",
+ },
+ };
+
+ const inlineStyleLoginMobile = {
+ modal: {
+ height: "580px",
+ width: "380px",
+ },
+ };
+
+ const inlineStyleSignupMobile = {
+ modal: {
+ height: "680px",
+ width: "380px",
+ },
+ };
+
+ const inlineStyleSignup = {
+ modal: {
+ height: "660px",
+ width: "600px",
+ },
+ };
+
function switch_lang(language) {
// i18n.changeLanguage(props.toiaLanguage);
@@ -154,7 +193,7 @@ function NavBar(props) {
};
}
- function submitHandler(e) {
+ function LoginSubmitHandler(e) {
e.preventDefault();
let params = {
@@ -181,115 +220,404 @@ function NavBar(props) {
});
}
- const inlineStyle = {
- modal: {
- height: "560px",
- width: "600px",
- },
- };
+ function toggleNavbar() {
+ const navItemsRight = document.querySelector('.nav-right-group');
+ const navItemsLeft = document.querySelector('.nav-left-group');
+ const navHeaderBar = document.querySelector('.nav-heading-bar');
+ navItemsRight.classList.toggle('nav-active');
+ navItemsLeft.classList.toggle('nav-active');
+ navHeaderBar.classList.toggle('header-active');
+ }
function login_modal() {
return (
- dispatch({ type: "close" })}>
+ style={window.innerWidth < 440 ? inlineStyleLoginMobile.modal : inlineStyleLogin.modal}
+ open={state.loginOpen}
+ onClose={() => dispatch({ type: "close" })}
+ >
-
+
{t("nav_welcome_back")}
-
+
{t("nav_login_request")}
+
+
+
+
+
+ );
+ }
+
+
+ const [language, setLanguage] = useState("");
+ const [fname, setFName] = useState("");
+ const [lname, setLname] = useState("");
+ const [email, setEmail] = useState("");
+ const [pass, setPass] = useState("");
+ const [cpass, setCPass] = useState("");
+ const [profilePic, setProfilePic] = useState();
+ const [inputDisabled, setInputDisabled] = useState(false);
+
+ function SignupSubmitHandler(event) {
+ setInputDisabled(true);
+ event.preventDefault();
+ if (pass === cpass) {
+ let form = new FormData();
+ form.append("profile_pic", profilePic);
+ form.append("first_name", fname);
+ form.append("last_name", lname);
+ form.append("email", email);
+ form.append("password", pass);
+ form.append("language", language);
+ axios
+ .post(API_URLS.SIGN_UP(), form)
+ .then(res => {
+ NotificationManager.success("Account created. Please check your email for confirmation");
+ // Redirect in 6 seconds
+ setTimeout(() => {
+ history.push("/login");
+ }, 6000);
+ })
+ .catch(error => {
+ setInputDisabled(false);
+ if (error.response) {
+ // The request was made and the server responded with a status code
+ // that falls out of the range of 2xx
+ console.log(error.response.data);
+ console.log(error.response.status);
+ console.log(error.response.headers);
+ } else if (error.request) {
+ // The request was made but no response was received
+ // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
+ // http.ClientRequest in node.js
+ console.log(error.request);
+ } else {
+ // Something happened in setting up the request that triggered an Error
+ console.log("Error", error.message);
+ }
+ });
+ } else {
+ setInputDisabled(false);
+ NotificationManager.error("Passwords need to match");
+ }
+ }
+
+ function submitPic(event) {
+ event.preventDefault();
+ }
+
+ function setImg(e) {
+ setProfilePic(e.target.files[0]);
+ e.preventDefault();
+ }
+ function signup_modal() {
+ return (
+ dispatch({ type: "close" })}
+ >
+
+
+ Get Started
+
+
+ {t("signup_text")}
+
+
+
-
+
+
+ No file chosen
+
+
+
+
+
+
+ {/* */}
);
}
+
+
+
+ // helloooooo
+
+
// style = {{direction: i18n.dir(i18n.language)}} style = {{"unicode-bidi": "plaintext"}}
return (
{props.showLoginModal ? login_modal() : ""}
+ {props.showLoginModal ? signup_modal() : ""}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+ ☰
+
+
+
+ {t("nav_toia")}
+
-
- {t("nav_toia")}
-
-
- {t("nav_about_us")}
-
-
- {t("nav_talk_to_toia")}
-
-
- {t("nav_my_toia")}
+
-
- {props.isLoggedIn ? t("nav_logout") : t("nav_login")}
+
+
+
+ {t("nav_about_us")}
+
+
+ {t("nav_talk_to_toia")}
+
+
+ {t("nav_my_toia")}
+
+
+ {props.isLoggedIn ? t("nav_logout") : t("nav_login")}
+
+
+
);
}
diff --git a/interface/src/pages/Player.css b/interface/src/pages/Player.css
index 0eaa8baa..b0eb2a09 100644
--- a/interface/src/pages/Player.css
+++ b/interface/src/pages/Player.css
@@ -1,219 +1,140 @@
-.player {
- background-color: white;
- height: 100%;
- margin: 0px;
- min-height: 700px;
- min-width: 1440px;
- position: relative;
- width: 100%;
+* {
+ box-sizing: border-box;
}
-/*elements and icons*/
-.player-back_icon {
- background-color: transparent;
- height: 30px;
- left: 2%;
- top: 2%;
- width: 30px;
- position: absolute;
- pointer-events: auto;
- cursor: pointer;
-}
-.player-group {
- /* background-color: transparent;
- height: 700px;
- left: 50px;
- position: absolute;
- top: 80px;
- width: 1180px; */
- background-color: transparent;
- height: 700px;
- left: 40px;
- position: absolute;
- top: 80px;
- width: 1200px;
+body {
+ margin: 0;
}
-.player-vid {
- background-color: transparent;
- left: 1%;
- position: absolute;
- top: 5.5%;
- width: 70%;
- height: 69%;
- border-radius: 5px;
+
+.parent {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ height: 100vh;
+ padding-top: 60px;
}
-/*text*/
.player-name {
background-color: transparent;
- height: 50px;
- /* left: 21.5%; */
- position: absolute;
- text-align: center;
- top: 0px;
- /* left: 0.5%; */
- width: 70%;
- /* width: 100%; */
-}
-.player-lang {
- background-color: transparent;
- display: block;
- height: 29px;
- /* left: 36.5%; */
- position: absolute;
- text-align: center;
- /* left: 2%; */
- top: 7%;
- width: 10%;
- /* width: 100%; */
+ padding-left: 44px;
+ padding-top: 8px;
}
-/*fonts*/
-.player-font-class-2 {
- color: black;
- font-family: "Montserrat-Medium", Helvetica, Arial, serif;
- font-size: 17px;
- font-style: normal;
- font-weight: 500;
- top: 8%;
- left: 1%;
- letter-spacing: -0.18px;
- z-index: 9;
-}
.player-font-class-3 {
color: black;
font-family: "Open Sans-Bold", Helvetica, Arial, serif;
font-size: 34px;
font-style: normal;
font-weight: 700;
- top: -3%;
- letter-spacing: -0.54px;
+ top: -60%;
}
-.player-font-class-4 {
- color: black;
- font-family: "Open Sans-Bold", Helvetica, Arial, serif;
- font-size: 32px;
- font-style: normal;
- font-weight: 600;
- letter-spacing: -0.54px;
-}
+.video_row {
+ flex: 1;
+ display: flex;
+ justify-content: flex-start;
+ align-items: flex-start;
+ flex-wrap: wrap;
+ padding-top: 30px;
+ /* background-color: red; */
-.mute-button {
- position: absolute;
- top: 80.4%;
- left: 1%;
- width: 70%;
- height: 7%;
- font-size: 1.5rem;
- /* background-color: var(--check-green); */
}
-.recording-button {
- position: absolute;
- top: 4%;
- left: 15%;
- width: 15%;
- height: 7%;
- font-size: 1.5rem;
+.video_container {
+ /* background-color: aqua; */
+ flex: 1;
+ position: relative;
+ aspect-ratio: 19/9;
+ /* overflow: hidden; */
}
-.skip-end-button {
+.player-lang {
position: absolute;
- top: 65%;
- left: 57%;
- width: 15%;
- height: 7%;
- font-size: 1.8rem;
- z-index: 9;
+ top: 10px;
+ left: 60px;
+ background-color: transparent;
+ /* z-index: 9; */
}
-.submit-button {
- position: absolute;
- top: 93.7%;
- left: 57.5%;
- width: 13.5%;
- height: 7.5%;
- font-size: 1.5rem;
- color: #49769c;
+.player-font-class-2 {
+ color: black;
+ font-family: "Open Sans-Bold", Helvetica, Arial, serif;
+ font-size: 17px;
+ font-style: normal;
+ font-weight: 500;
+ letter-spacing: -0.18px;
+ z-index: 9;
}
-.cards-suggestion-header {
+.player-vid {
position: absolute;
- left: 75.5%;
+ width: 80.5%;
+ height: auto;
+ border-radius: 25px;
+ left: 43px;
}
-.card-1 {
- position: absolute;
- left: 75.5%;
- top: 3%;
+.suggestions_card {
+ position: relative;
+ top:10%;
+ width: 30%;
+ gap: 10px;
+ /* background-color: chartreuse; */
+ margin: 0;
+ display: flex;
+ flex-wrap: wrap;
}
-.card-2 {
- position: absolute;
- left: 75.5%;
- top: 20%;
+.text-container{
+ /* background-color: yellow; */
+ flex: 1;
+ display: flex;
+ justify-content: flex-start;
+ align-items: flex-start;
+ flex-wrap: wrap;
}
-.card-3 {
- position: absolute;
- left: 75.5%;
- top: 42%;
+.mute-button {
+ height: 38px !important;
+ border: 1.2px solid black !important;
}
-.card-4 {
- position: absolute;
- left: 75.5%;
- top: 64%;
+.what-button {
+ height: 38px !important;
+ border: 1.2px solid black !important;
}
-.card-5 {
- position: absolute;
- left: 75.5%;
- top: 86%;
+.css-i4bv87-MuiSvgIcon-root {
+ font-size: 2rem !important;
+ height: 1.2rem !important;
}
-.card-overview {
- transition: background 1s !important;
+.othercard {
+ font-family: "Open Sans-Bold", Helvetica, Arial, serif !important;
+ height: 75px;
+ width: 300px;
+ border-radius: 10px;
+ border-radius: 20px !important;
+ border: 0px !important;
+ color: black !important;
+ padding-top: 0px !important;
+ padding-bottom: 0px !important;
+ padding-left: 10px !important;
+ padding-right: 10px !important;
+ line-height: 20px !important;
}
-.card-waiting-true {
- background: #d7f5ff !important;
- box-shadow: 0px 4px 4px rgba(46, 122, 210, 0.25) !important;
+.css-wb57ya-MuiFormControl-root-MuiTextField-root {
+ border-top: 1px solid black !important;
+ border-left: 1px solid black !important;
+ border-right: 1px solid black !important;
+ border-bottom: 0.5px solid black !important;
border-radius: 5px !important;
+ background-color: white !important;
+ color: black !important;
}
-.card-width-control {
- max-height: 30%;
- min-height: 24%;
-}
-.cursor-disabled {
- cursor: not-allowed !important;
-}
-
-.redo-icon {
- color: #006a94;
-}
-.transcript {
- background-color: rgba(126, 124, 124, 0.1);
- border: 0;
- border-radius: 3px;
- height: 41px;
- /* left: 39%; */
- left: 1%;
- padding: 5px;
- position: absolute;
- resize: none;
- text-align: left;
- /* top: 75%; */
- top: 89.75%;
- width: 70%;
- color: #707070;
- font-size: 1.5rem;
- padding-top: 25px;
- padding-bottom: 25px;
-}
/* Selecting Language for Player */
@@ -225,48 +146,286 @@
text-align: center;
font-size: 16px;
border: none;
- }
-
- /* The container
- needed to position the dropdown content */
- .lang-container {
+}
+
+/* The container
- needed to position the dropdown content */
+.lang-container {
position: absolute;
- top: 75.4%;
- left: 65%;
+ left: 80%;
+ top: 10px;
height: 7%;
font-size: 1.5rem;
- }
- .lang-dropdown {
+}
+
+.lang-dropdown {
position: relative;
display: inline-block;
z-index: 10;
- }
-
- /* Dropdown Content (Hidden by Default) */
- .lang-dropdown-content {
+}
+
+/* Dropdown Content (Hidden by Default) */
+.lang-dropdown-content {
display: none;
position: absolute;
- background-color: #dad3d3;
- box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+ /* background-color: #dad3d3; */
+ box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
- }
-
- /* Links inside the dropdown */
- .lang-dropdown-content a {
+}
+
+/* Links inside the dropdown */
+.lang-dropdown-content a {
color: black;
width: 30px;
height: 20px;
- font-size:15px;
+ font-size: 15px;
text-align: center;
text-decoration: none;
display: block;
- }
-
- .lang-dropdown-content div.header:hover::after {
+}
+
+.lang-dropdown-content div.header:hover::after {
background-color: transparent;
- }
- /* Change color of dropdown links on hover */
- .lang-dropdown-content option:hover {background-color: #ddd;}
-
- /* Show the dropdown menu on hover */
- .lang-dropdown:hover .lang-dropdown-content {display: block;}
-
\ No newline at end of file
+}
+/* Change color of dropdown links on hover */
+.lang-dropdown-content option:hover {
+ background-color: #ddd;
+}
+
+/* Show the dropdown menu on hover */
+.lang-dropdown:hover .lang-dropdown-content {
+ display: block;
+}
+
+.mute-button {
+ position: absolute;
+ left: 54%;
+ width: 5%;
+ height: 5.75%;
+ border-radius: 50%;
+ border: 3px solid #0d1601;
+ font-size: 1.5rem;
+}
+
+.what-button {
+ position: absolute;
+ left: 48.5%;
+ border: 3px solid #0d1601;
+ width: 5%;
+ height: 5.75%;
+ font-size: 1.5rem;
+}
+
+.skip-end-button {
+ position: absolute;
+ top: 84%;
+ left: 74.5%;
+ z-index: 9;
+ max-width: max-content;
+}
+
+.search-bar {
+ position: absolute;
+ border: 0;
+ left: 43px;
+ text-align: left;
+ font-size: 1.5rem;
+ width: 45%;
+ height: 5.5%;
+}
+
+@media (max-width: 1292px) {
+ .skip-end-button{
+ top: 81.5%;
+ left: 73%;
+ }
+
+ .mute-button {
+ left: 54.75%;
+ margin: 0 !important;
+ padding: 0 !important;
+ }
+
+ .what-button {
+ left: 49%;
+ margin: 0 !important;
+ padding: 0 !important;
+ }
+
+ .search-bar{
+ width: 44.5%;
+ }
+}
+
+@media (max-width: 1024px) {
+ .player-name{
+ padding-left: 32px ;
+ }
+
+ .video_row {
+ flex-direction: column;
+ }
+
+ .video_container {
+ width: 100%;
+ flex: none;
+ aspect-ratio: 1.9;
+ }
+ .player-vid {
+ width: 93.5%;
+ left: 32px;
+ }
+
+ .mute-button {
+ left: 86.5%;
+ width: 10%;
+ }
+
+ .what-button {
+ left: 75.5%;
+ width: 10%;
+ }
+
+ .transcript {
+ left: 32px;
+ width: 81.5%;
+ }
+
+ .lang-container {
+ left: 92%;
+ }
+
+ .search-bar {
+ left: 32px;
+ width: 71%;
+ }
+
+ .suggestions_card {
+ width: 100%;
+ height: auto;
+ overflow-y: auto;
+ justify-content: center;
+ padding-top: 10px;
+ padding-bottom: 20px;
+ top:0%;
+ }
+
+ .skip-end-button{
+ top: 88%;
+ left: 86%;
+ }
+
+ .text-container{
+ max-height: 80px;
+ }
+
+}
+
+@media (max-width: 840px) {
+ .player-name{
+ padding-left: 25px ;
+ }
+ .player-vid{
+ left: 25px;
+ }
+ .player-lang{
+ left: 30px;
+ }
+ .search-bar {
+ left: 25px;
+ width: 71%;
+ }
+ .transcript {
+ left: 25px;
+ }
+ .skip-end-button{
+ top: 86%;
+ left: 84%;
+ }
+
+}
+
+
+@media (max-width: 720px) {
+ .player-name{
+ padding-left: 23px ;
+ }
+ .player-vid{
+ left: 23px;
+ }
+
+ .lang-container{
+ left: 91%;
+ }
+
+ .skip-end-button{
+ top:85%;
+ left: 82%;
+ }
+
+ .search-bar {
+ width: 69%;
+ }
+ .transcript {
+ left: 69%;
+ }
+}
+
+@media (max-width: 645px) {
+ .player-vid{
+ width: 90%;
+ left: 25px;
+ right: 30px;
+ }
+
+ .player-name {
+ padding-left: 25px;
+ }
+
+ .player-lang {
+ left: 40px;
+ }
+
+ .lang-container{
+ left: 87%;
+ }
+
+ .skip-end-button{
+ top: 79%;
+ left: 78%;
+ }
+}
+
+@media (max-width: 580px) {
+ .player-name{
+ padding-left: 25px;
+ }
+
+ .search-bar{
+ left: 25px;
+ width:67%;
+ }
+
+ .mute-button {
+ left: 85%;
+ width: 11%;
+ }
+
+ .transcript{
+ left: 25px;
+ width: 77.5%;
+ }
+
+ .what-button {
+ left: 73%;
+ width: 11%;
+ }
+
+ .suggestions_card{
+ height: auto;
+ }
+
+ .skip-end-button{
+ top: 78%;
+ left: 76%;
+ }
+}
diff --git a/interface/src/pages/Player.js b/interface/src/pages/Player.js
index 6a42551e..e3704692 100644
--- a/interface/src/pages/Player.js
+++ b/interface/src/pages/Player.js
@@ -1,5 +1,12 @@
import RecordVoiceOverRoundedIcon from "@mui/icons-material/RecordVoiceOverRounded";
import VoiceOverOffRoundedIcon from "@mui/icons-material/VoiceOverOffRounded";
+import MicIcon from "@mui/icons-material/Mic";
+import MicOffIcon from "@mui/icons-material/MicOff";
+import SearchIcon from "@mui/icons-material/Search";
+import SkipNextIcon from "@mui/icons-material/SkipNext";
+import Button from "@mui/material/Button";
+import TextField from "@mui/material/TextField";
+import { createTheme, ThemeProvider } from '@mui/material/styles';
import axios from "axios";
import React, { useEffect, useRef, useState } from "react";
import { NotificationManager } from "react-notifications";
@@ -23,6 +30,38 @@ import {
languageFlagsCSS,
} from "../services/languageHelper";
+import SuggestionCard from "../suggestiveSearch/suggestionCards.js";
+
+// import { Center, Square, Circle } from '@chakra-ui/react';
+
+const theme = createTheme({
+ components: {
+ MuiTextField: {
+ styleOverrides: {
+ root: {
+ '& .MuiInputBase-input': {
+ color: 'black', // Text color
+ },
+ '& .MuiInputLabel-root': {
+ color: 'black', // Label color
+ },
+ '& .MuiOutlinedInput-root': {
+ '& fieldset': {
+ borderColor: 'black', // Border color
+ },
+ '&:hover fieldset': {
+ borderColor: 'black', // Hover border color
+ },
+ '&.Mui-focused fieldset': {
+ borderColor: 'black', // Focused border color
+ },
+ },
+ },
+ },
+ },
+ },
+ });
+
function Player() {
const { t } = useTranslation();
@@ -61,7 +100,7 @@ function Player() {
const interimTextInput = useRef("");
const [micMute, setMicStatus] = useState(true);
- const [micString, setMicString] = useState("ASK BY VOICE");
+ const [micString, setMicString] = useState("");
const [ratingNodes, setRatingNodes] = useState([
{
@@ -92,7 +131,7 @@ function Player() {
canAccessStream();
- // fetchAnsweredQuestions();
+ fetchAnsweredQuestions();
fetchAllStreamQuestions();
fetchFiller();
@@ -166,7 +205,7 @@ function Player() {
question.current = data.alternatives[0].transcript;
speechToTextUtils.stopRecording();
- fetchData("VOICE");
+ fetchData("");
}
} else {
console.log("no data received from server");
@@ -232,6 +271,7 @@ function Player() {
});
shouldRefreshQuestions.current = true;
+ console.log(answeredQuestions);
setAnsweredQuestions([...answeredQuestions]);
setAllSuggestedQuestions([...allSuggestedQuestions]);
});
@@ -411,7 +451,7 @@ function Player() {
if (micMute === true) {
setMicStatus(false);
- setMicString("STOP ASK BY VOICE");
+ setMicString("");
interacting.current = "true";
if (hasRated) {
@@ -438,7 +478,7 @@ function Player() {
speechToTextUtils.stopRecording();
setMicStatus(true);
- setMicString("ASK BY VOICE");
+ setMicString("");
interacting.current = "false";
}
}
@@ -507,63 +547,78 @@ function Player() {
}
return (
-
-
- {!hasRated && (
-
+
+
- )}
-
-
- {toiaFirstNameToTalk} {toiaLastNameToTalk}
-
-
- {streamNameToTalk}
-
- {videoProperties && (
-
-
-
-
-
+ {!hasRated && (
+
)}
- {micMute ? (
-
-
-
-
+ {/* Name on top of the stream. */}
+
+
+ {toiaFirstNameToTalk} {toiaLastNameToTalk}
+
+
+
+
+
+ {streamNameToTalk}
+
+
+ {videoProperties && (
+
+
+
+
+
+ )}
+
+ {isFillerPlaying.current === "false" ? (
+
+ ) : null}
+
+ {/* Keep lang-container here */}
+
+
+
+
+
+ {/* Keep mute-button here */}
+ {micMute ? (
-
- ) : (
-
- )}
-
- {isFillerPlaying.current === "false" ? (
-
- ) : null}
-
-
- {micMute ? (
+ ) : (
<>
- {micMute && (
-
- )}
-
- {/* */}
+
+
+
+
+
+
+ >
+ )}
+
+ {/* Suggestive search and search button */}
+ {micMute && (
+ <>
+
>
- ) : (
-
)}
+
-
-
+ >
);
}
diff --git a/interface/src/pages/Recorder.css b/interface/src/pages/Recorder.css
index 04d07e27..3bff5c04 100644
--- a/interface/src/pages/Recorder.css
+++ b/interface/src/pages/Recorder.css
@@ -1,660 +1,446 @@
-video {
- display: inline;
- position: relative;
- z-index: 1;
+body {
+ font-family: "Open Sans-Bold", Helvetica, Arial, serif !important;
}
-.layout {
- position: absolute;
- left: 0%;
- top: 8.5%;
- border-radius: 10px;
- width: 96%;
- /* height: 66%; */
- /* height: 70%;
- border-radius: 5%; */
-}
-
-.record-page {
- background-color: white;
- height: 100vh;
- margin: 0px;
- min-height: 700px;
- min-width: 1440px;
- position: relative;
- width: 100%;
-}
-
-/*texts and fonts*/
-.font-class-1 {
- font-family: "Montserrat", Helvetica, Arial, serif;
- font-style: normal;
- font-size: 1.5rem;
- font-weight: 500;
-}
-
-.font-class-3 {
- color: black;
- font-family: "Open Sans-Bold", Helvetica, Arial, serif;
- font-size: 3rem;
- /* changed from 24 px; */
- font-style: normal;
- font-weight: 700;
- letter-spacing: -0.54px;
+.video-layout-recorder-box {
+ position: relative;
}
-.title {
- background-color: transparent;
- height: auto;
- /* left: 37%; */
- position: absolute;
- text-align: left;
- /*change from center*/
- /* top: 3%; */
- width: 350px;
+.video-layout-player-box {
+ position: relative;
}
-/*Icons*/
-.videoControlButtons {
- display: block;
- position: absolute !important;
- left: 0.5%;
- top: 69.5%;
-
- /* position: relative; */
- width: 48px;
- z-index: 3;
- background-color: transparent;
- border: 0;
- color: white;
+.halves {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: center;
}
-.videoControlButtons i {
- font-size: 2.75rem;
- text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
-}
-
-/*Side Buttons*/
-.side-bar {
- /* height: 80vh; */
- height: 600px;
- width: 30vw;
- top: 16%;
- left: 3%;
- position: absolute;
-}
-
-.side-button {
- height: 6vh;
- width: 12vw;
- display: flex;
- justify-content: center;
- align-items: center;
- padding: 5px;
- border-radius: 15px;
- cursor: pointer;
- transition: all 0.2s ease-out;
-
- /* Changes */
- font-size: 1.5rem;
+.first-half {
+ flex: 1 1 60%; /* Change to 2 rows of 3 */
}
-.b1 {
- position: absolute;
- top: 0%;
- left: 0%;
+.second-half {
+ flex: 1 1 40%;
+ padding-right: 40px;
}
-.b2 {
- position: absolute;
- top: 0%;
- left: 59%;
+.tag-title {
+ padding-left: 26px;
}
-.b3 {
- position: absolute;
- top: 10%;
- left: 0%;
+.layout {
+ border-radius: 25px;
+ width: 90%;
+ height: auto;
+ display: block;
+ margin: auto; /* This centers the webcam horizontally */
}
-.b4 {
- position: absolute;
- top: 10%;
- left: 59%;
+.video-layout-player-middle {
+ border-radius: 25px;
+ width: 90%;
+ height: auto;
+ display: block;
+ margin: auto; /* This centers the webcam horizontally */
}
-.b5 {
- position: absolute;
- top: 20%;
- left: 0%;
+.timer-wrapper {
+ position: absolute;
+ top: 10px;
+ left: 50%;
+ transform: translateX(-50%);
+ z-index: 10; /* Ensure this is above the video layer */
}
-.b6 {
- position: absolute;
- top: 5%;
- left: 0%;
+.video-layout-player-top {
+ padding-top: 50px;
+ padding-right: 40vw;
}
-.public {
- height: 6vh;
- width: 100%;
- display: flex;
- align-items: center;
- border-radius: 15px;
- cursor: pointer;
- transition: all 0.2s ease-out;
- position: absolute;
- padding-left: 15%;
- top: 40%;
- left: 0%;
+.timer-view {
+ background-color: red; /* Semi-transparent black background */
+ color: white;
+ padding: 3px 10px;
+ border-radius: 5px;
+ font-size: 1em; /* Adjust font size as needed */
+ /* Add any additional styling you want for the timer display */
}
-.switch {
- position: absolute;
- left: 47%;
+.videoControlButtons {
+ position: absolute;
+ bottom: 45px; /* Adjust as needed */
+ left: 60px; /* Adjust as needed */
+ z-index: 10; /* Ensure this is above the video layer */
+ /* Add any additional styling you want for the buttons */
+ background-color: transparent; /* Semi-transparent background */
+ border: none;
+ border-radius: 5px;
+ cursor: pointer;
}
-.select {
- position: absolute;
- top: 60%;
- left: 0%;
- width: 100%;
+.videoControlButtons img {
+ width: 25px; /* Size of the inner image */
+ height: 25px; /* Size of the inner image */
}
-.divider1 {
- position: absolute;
- top: 33%;
- left: 5%;
- width: 90%;
- border: 4px solid rgba(194, 195, 196, 0.16);
- border-radius: 5px;
+.title {
+ padding-left: 44px;
+ padding-top: 30px;
+ background-color: transparent;
}
-.divider2 {
- position: absolute;
- top: 52%;
- left: 5%;
- width: 90%;
- border: 4px solid rgba(194, 195, 196, 0.16);
- border-radius: 5px;
+#recorder-check-btn {
+ position: absolute;
+ bottom: 50px; /* Distance from the bottom of the video */
+ right: 4vw;
+ width: 80px;
+ z-index: 10; /* Ensure this is above the video layer */
+ background-color: transparent; /* Semi-transparent background */
+ border: none;
+ cursor: pointer;
+ color: var(--check-green);
}
-/*Questions and text field*/
.recorder-speech {
- color: #000000;
- background-color: rgba(255, 255, 255, 0.6);
- border-radius: 3px;
- height: 31px;
- z-index: 1;
- border: 0;
- /* padding: 0px 5px; */
- resize: none;
- overflow: auto;
- text-align: center;
- position: absolute;
- top: 61.5%;
- width: 80%;
- /* position: relative;
- width: 40vw; */
- top: 70.5%;
- left: 8.5%;
- font-size: 1.5rem;
-}
-
-.type-q {
- background-color: rgba(126, 124, 124, 0.1);
- border: 0;
- border-radius: 3px;
- height: 41px;
- /* left: 39%; */
- left: 0%;
- padding: 5px;
- position: absolute;
- resize: none;
- text-align: left;
- /* top: 75%; */
- top: 84.75%;
- width: 96.25%;
- color: #707070;
- font-size: 1.5rem;
- padding-top: 25px;
- padding-bottom: 25px;
-}
-
-/*modal elements*/
-
-#divider {
- padding: 5px;
-}
-
-#typeOfVideo {
- color: black;
- font-family: "Montserrat", Helvetica, Arial, serif;
- font-style: normal;
- font-size: 15px;
- font-weight: 700;
- text-align: center;
-}
-
-#questionOfVideo {
- color: black;
- font-family: "Montserrat", Helvetica, Arial, serif;
- font-style: normal;
- font-size: 15px;
- font-weight: 700;
- text-align: center;
- padding: 5px;
-}
-
-#privacyOfVideo {
- color: black;
- font-family: "Montserrat", Helvetica, Arial, serif;
- font-style: normal;
- font-size: 15px;
- font-weight: 700;
- text-align: center;
- padding: 0 0 5px 0;
-}
-
-#video_thumbnail {
- text-align: center;
-}
-
-#video_thumbnail > button {
- color: black;
- font-family: "Montserrat", Helvetica, Arial, serif;
- font-style: normal;
- font-size: 15px;
- font-weight: 700;
- text-align: center;
- border-radius: 5px;
- border-color: rgb(229, 229, 229);
- border-style: solid;
- cursor: pointer;
-}
-
-.thumbnail {
- text-align: center;
-}
-
-.webcam-img {
- border-radius: 10px;
-}
-
-.webcam-btn {
- color: black;
- font-family: "Montserrat", Helvetica, Arial, serif;
- font-style: normal;
- font-size: 20px;
- font-weight: 700;
- text-align: center;
- border-radius: 5px;
- border-color: rgb(229, 229, 229);
- border-style: solid;
- cursor: pointer;
- position: relative;
- top: 10px;
-}
-
-#answerCorrection {
- color: black;
- font-family: "Montserrat", Helvetica, Arial, serif;
- font-style: normal;
- font-size: 15px;
- font-weight: 700;
- text-align: center;
- padding: 15px;
-}
-
-#playbackVideo {
- text-align: center;
-}
-
-.modal-header {
- color: black;
- font-family: "Montserrat", Helvetica, Arial, serif;
- font-style: normal;
- font-size: 25px;
- font-weight: 700;
- height: 10%;
- text-align: center;
-}
-
-.modal-ans {
- background-color: rgba(126, 124, 124, 0.1);
- align-self: center;
- border: 0;
- border-radius: 3px;
- height: 15%;
- padding: 5px;
- resize: none;
- text-align: left;
- width: 100%;
- color: #707070;
-}
-
-/*Animations*/
-:root {
- --black: rgba(0, 0, 0, 0.75);
- --robins-egg-blue: rgba(34, 214, 214, 0.1);
- --robins-blue: rgba(34, 214, 214, 1);
- --mist-gray: rgba(196, 196, 196, 1);
- --check-green: rgba(106, 226, 62, 1);
-}
-
-.Video-Layout {
- position: relative;
- left: 500px;
- top: 80px;
- height: 600px;
- /* height: 90vh; */
- width: 770px;
- /* width: 70vw; */
-}
-
-.tooltip .tooltiptext {
- visibility: hidden;
- /* width: 100%; */
- margin: auto;
- background-color: grey;
- color: #fff;
- text-align: justify;
- border-radius: 6px;
- padding: 5px;
- font-size: 0.85rem;
- /* Position the tooltip */
- top: 420px;
- left: 200px;
- position: fixed;
- z-index: 3000;
- line-height: 1.25;
- /* white-space: nowrap; */
- font-family: "Open Sans-Bold", Helvetica, Arial, serif;
- /* width: 25%; */
- text-overflow: ellipsis;
-}
-
-.tooltip:hover .tooltiptext {
- visibility: visible;
-}
-
-.tooltip .public_tooltip {
- visibility: hidden;
- /* width: 100%; */
- margin: auto;
- background-color: grey;
- color: #fff;
- text-align: center;
- border-radius: 6px;
- padding: 5px;
- font-size: 0.85rem;
- /* Position the tooltip */
- /* top: 45px;
- left: 350px;
- position: absolute; */
- top: 555px;
- left: 250px;
- position: fixed;
- z-index: 3000;
- line-height: 2;
- white-space: nowrap;
- font-family: "Open Sans-Bold", Helvetica, Arial, serif;
- text-shadow: none;
-}
-
-.tooltip:hover .public_tooltip {
- visibility: visible;
-}
-
-.tooltip .camera_tooltip {
- visibility: hidden;
- /* width: 100%; */
- margin: auto;
- background-color: grey;
- color: #fff;
- text-align: center;
- border-radius: 6px;
- padding: 5px;
- font-size: 0.85rem;
- /* Position the tooltip */
- /* top: 55px;
- right: 40px;
- position: absolute; */
- top: 555px;
- left: 410px;
- position: fixed;
- z-index: 3000;
- line-height: 2;
- white-space: nowrap;
- font-family: "Open Sans-Bold", Helvetica, Arial, serif;
- text-shadow: none;
-}
-
-.tooltip:hover .camera_tooltip {
- visibility: visible;
-}
-
-.tooltip .check_tooltip {
- visibility: hidden;
- /* width: 100%; */
- margin: auto;
- background-color: grey;
- color: #fff;
- text-align: center;
- border-radius: 6px;
- padding: 5px;
- font-size: 0.85rem;
- /* Position the tooltip */
- /* top: 55px;
- left: 40px;
- position: absolute; */
- top: 555px;
- right: 10px;
- position: fixed;
- z-index: 3000;
- line-height: 2;
- white-space: nowrap;
- font-family: "Open Sans-Bold", Helvetica, Arial, serif;
- text-shadow: none;
-}
-
-.tooltip:hover .check_tooltip {
- visibility: visible;
-}
-
-.tooltipExample {
- font-style: italic;
-}
-
-/* question suggestions modal */
-.questionSuggestionsWrapper {
- display: flex;
- flex-direction: row;
- flex-wrap: wrap;
- justify-content: space-evenly;
-}
-
-.positive-relative {
- position: relative;
-}
-
-.questionSuggestionsWrapper .cards-wrapper .card {
- width: 210px !important;
-}
-
-/* Question selector box */
-.question-selection-box {
- background-color: rgba(126, 124, 124, 0.1);
- border-radius: 3px;
- text-align: left;
- color: #707070;
- font-size: 1.5rem;
- border: solid 1px #d5d5d5;
-}
-
-.question-selection-box.question-recorder-page-input {
- left: 0;
- position: absolute;
- resize: none;
- top: 84.75%;
- width: 96.25%;
-}
-
-.question-selection-box.question-modal-input {
- margin-top: 20px;
-}
-
-.question-selection-box .multiselect-inner-wrapper {
- border: none;
-}
-
-.question-selection-box input {
- background: rgb(255 255 255 / 0%);
+ position: absolute;
+ bottom: 50px; /* Align with the bottom of the button */
+ left: calc(20px + 40px + 45px); /* Button's left + button's width + some space */
+ background-color: rgba(255, 255, 255, 0.8); /* Semi-transparent white background */
+ color: #333; /* Dark text color for readability */
+ border-radius: 5px; /* Rounded corners */
+ width: calc(100% - 20px - 56px - 160px); /* Full width minus button and padding */
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Optional: shadow for depth */
+ /* Ensuring text doesn't overflow the box */
+ white-space: nowrap;
+ overflow: auto;
+ resize: none;
+ text-align: center;
+ height: 30px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
}
-.question-selection-box .multiselect-inner-wrapper .multiselect-selected-item {
- background: #00587a;
- font-family: "Montserrat", Helvetica, Arial, serif;
- font-size: 1.25rem;
+#recorder-check-btn i {
+ font-size: 2rem;
+ text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
}
-.question-selection-box
- .multiselect-inner-wrapper
- .multiselect-selected-item
- .remove-btn {
- font-family: "Times New Roman", Times, serif;
+.top {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding-left: 40px;
+ padding-right: 43vw;
+ padding-top: 7px;
+ padding-bottom: 10px;
}
-.question-label-modal {
- margin-top: 20px;
- color: black;
- font-family: "Montserrat", Helvetica, Arial, serif;
- font-style: normal;
- font-size: 15px;
- font-weight: 700;
- text-align: center;
+.bottom {
+ display: flex;
+ align-items: center;
+ gap: 25px;
+ padding: 25px 10px 10px 10px;
}
-.edit-input-field > input {
- font-family: "Montserrat", Helvetica, Arial, serif;
- font-size: 1.25rem;
- padding: 6px;
- border: none !important;
+.stream-select {
+ height: 30px;
+ flex: 0 0 96.6%;
+ padding-left: 17.5px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
}
-.edit-input-field > input:focus {
- outline: none;
+._7ahQImyV4dj0EpcNOjnwA {
+ margin-bottom: 0px;
+ background: rgb(177, 247, 176);
+ color: black;
}
-
-.edit-popup-wrapper {
- border: solid 1px #bfbfbf;
- border-radius: 4px;
- background-color: white;
+
+.search-wrapper {
+ border: 1px solid black;
+ min-height: 40px;
+ border-radius: 5px;
}
-.cursor-disabled {
- cursor: not-allowed !important;
+.multiselect-inner-wrapper {
+ border: 1px solid black;
+ min-height: 40px;
+ border-radius: 5px;
}
-.recorder-check-btn {
- right: 3%;
- position: absolute !important;
- top: 69.5%;
- width: 80px;
- z-index: 3;
- background-color: transparent;
- border: 0;
- color: var(--check-green);
+.multiselect-input-wrapper {
+ padding-left: 8px;
}
-.recorder-check-btn i {
- font-size: 2.75rem;
- text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
+.multiselect-inner-wrapper .multiselect-selected-item {
+ margin: 5.2px 4px;
+ background: rgb(177, 247, 176);
+ border-radius: 10px;
+ color: black;
+ padding: 4px 10px;
+ margin-right: 5px;
+ display: flex;
}
-.video-layout-player-top {
- width: 96%;
+.multiselect-inner-wrapper .multiselect-selected-item .remove-btn {
+ line-height: 12px;
+ font-size: 21px;
+ color: black;
+ margin-left: 7px;
+ color:black;
+ text-shadow: 0px 1px, 1px 0px, 1px 1px;
+ letter-spacing: 1px;
+ font-weight:bold;
+ border: 0px;
}
-.video-layout-player-middle {
- border-radius: 0;
+._3crOX-etLxsZ8OgjhYCvt7 {
+ font-size: 18px;
+ margin-right: 0px;
+ line-height: -4px;
+ margin-right: -5px;
}
-.video-layout-player-middle > video {
- height: 350px;
- left: 7%;
+._3vt7_Mh4hRCFbp__dFqBCI input {
+ margin-top: 5px;
+ margin-left: 3px;
}
-.video-layout-player-bottom {
- position: absolute;
- top: 70%;
- width: 96%;
+.lhyQmCtWOINviMz0WG_gr {
+ background: #f1f1f1;
+ color: black;
}
-.video-layout-player-bottom > textarea {
- outline: none;
- height: 55px;
- width: 100%;
- border: solid 1px #d5d5d5;
- border-radius: 3px;
- resize: none;
- background-color: #f2f2f2;
- padding-left: 6px;
- padding-top: 4px;
- color: #4e4e4e;
- font-size: 17px;
- font-family: "Montserrat", Helvetica, Arial, serif;
+._3vt7_Mh4hRCFbp__dFqBCI ul {
+ background: #f1f1f1;
+ color: black;
}
-.question-selection-box-label{
- position: absolute;
- top:76%;
- width: 100%;
+.dropdown-content {
+ margin-top: -4.5px;
+ z-index: 2;
+ margin-left: 4.5px;
+ border: 1px solid #ccc;
+ border-radius: 4px;
+ width: 98%;
}
-.recorder-next-btn-wrapper {
- display: inline-block;
- float: right;
+.optionContainer ul:hover {
+ background: red;
+ color: black;
}
-.video-layout-player-top .buttons {
- float: right;
- margin-left: 10px !important;
+.fa-eye, .fa-eye-slash {
+ font-size: 20px; /* adjust size as needed */
+ color: black; /* adjust color as needed */
+ cursor: pointer; /* to indicate it's clickable */
}
-.StreamNotSelectedAlert,
-.StreamNotSelectedAlert::before {
- background-color: #ab0000 !important;
- color: white !important;
+.tag-buttons {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ padding-left: 10px;
+ padding-right: 10px;
+ align-items: center;
+ gap: 15px 20px;
}
-.stats-container-recorder {
- top: -5%;
- left: 0 !important;
- width: fit-content;
+.tag-button {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ text-align: center;
+ padding-left: 10px;
+ padding-right: 10px;
+ font-size: 15px;
+ font-weight: 550;
+ border-radius: 15px;
+ height: 60px;
+ flex: 0 0 calc(100% / 3.5); /* Change to 2 rows of 3 */
}
-.timer-wrapper {
- width: 70px;
- position: absolute;
- text-align: center;
- left: 45%;
- top: 8.5% !important;
- z-index: 1;
+.content {
+ padding-left: 25px;
}
-.timer-view {
- padding: 2px 5px;
- background-color: #b31616b3;
- color: white;
- margin-top: 8px;
- border-radius: 5px;
-}
-
-.lang-recorder-container {
- position: absolute;
- top: 78.4%;
- left: 85%;
- height: 7%;
- font-size: 1.5rem;
- }
\ No newline at end of file
+.question-selection-box {
+ padding-top: 20px;
+ width: 96%;
+ padding-left: 22px;
+}
+
+@media (max-width: 1030px) {
+
+ .top {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding-left: 45px;
+ padding-right: 45px;
+ padding-top: 10px;
+ padding-bottom: 10px;
+ }
+
+ .title {
+ margin-left: -16px;
+ }
+
+ .layout {
+ border-radius: 25px;
+ width: 90%;
+ height: auto;
+ display: block;
+ margin: auto; /* This centers the webcam horizontally */
+ }
+
+ .video-layout-player-box {
+ padding-bottom: 30px;
+ }
+
+ .video-layout-player-top {
+ padding-right: 8vw;
+ }
+
+ .first-half, .second-half {
+ flex: 1 1 100%;
+ }
+
+ .second-half {
+ padding-top: 0px;
+ padding-right: 0px;
+ }
+
+}
+
+@media (max-width: 600px) {
+
+ .tag-buttons {
+ padding-left: 8px;
+ }
+
+ .stream-select {
+ padding-left: 14px;
+ width: 100%;
+ }
+
+ .tag-title {
+ padding-left: 26px;
+ }
+
+ .video-layout-recorder-box {
+ position: relative;
+ }
+
+ .video-layout-player-box {
+ position: relative;
+ }
+
+ .layout {
+ width: 90%; /* Adjust this value as needed */
+ height: auto;
+ display: block;
+ margin: auto; /* This centers the webcam horizontally */
+ }
+
+ .timer-wrapper {
+ position: absolute;
+ top: 10px;
+ left: 50%;
+ transform: translateX(-50%);
+ z-index: 10; /* Ensure this is above the video layer */
+ }
+
+ .timer-view {
+ background-color: red; /* Semi-transparent black background */
+ color: white;
+ padding: 3px 10px;
+ border-radius: 5px;
+ font-size: 1em; /* Adjust font size as needed */
+ /* Add any additional styling you want for the timer display */
+ }
+
+ .videoControlButtons {
+ position: absolute;
+ bottom: 40px; /* Adjust as needed */
+ left: 35px; /* Adjust as needed */
+ z-index: 10; /* Ensure this is above the video layer */
+ /* Add any additional styling you want for the buttons */
+ background-color: transparent; /* Semi-transparent background */
+ border: none;
+ border-radius: 5px;
+ cursor: pointer;
+ }
+
+ .videoControlButtons img {
+ width: 25px; /* Size of the inner image */
+ height: 25px; /* Size of the inner image */
+ }
+
+ #recorder-check-btn {
+ position: absolute;
+ bottom: 40px; /* Distance from the bottom of the video */
+ right: 20px;
+ width: 80px;
+ z-index: 10; /* Ensure this is above the video layer */
+ background-color: transparent; /* Semi-transparent background */
+ border: none;
+ cursor: pointer;
+ color: var(--check-green);
+ }
+
+ #recorder-check-btn i {
+ font-size: 2rem;
+ text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
+ }
+
+ .recorder-speech {
+ position: absolute;
+ bottom: 42px; /* Align with the bottom of the button */
+ left: calc(20px + 40px + 15px); /* Button's left + button's width + some space */
+ background-color: rgba(255, 255, 255, 0.8); /* Semi-transparent white background */
+ color: #333; /* Dark text color for readability */
+ border-radius: 5px; /* Rounded corners */
+ width: calc(100% - 20px - 56px - 80px); /* Full width minus button and padding */
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Optional: shadow for depth */
+ /* Ensuring text doesn't overflow the box */
+ white-space: nowrap;
+ overflow: auto;
+ resize: none;
+ text-align: center;
+ height: 30px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ }
+}
+
+@media (max-width: 430px) {
+ .videoControlButtons {
+ bottom: 35px; /* Adjust as needed */
+ left: 25px; /* Adjust as needed */
+ }
+
+ .recorder-speech {
+ bottom: 37px;
+ left: 70px;
+ width: calc(100% - 20px - 56px - 70px)
+ }
+
+ #recorder-check-btn {
+ position: absolute;
+ bottom: 37px; /* Distance from the bottom of the video */
+ right: 10px;
+ width: 80px;
+ z-index: 10; /* Ensure this is above the video layer */
+ background-color: transparent; /* Semi-transparent background */
+ border: none;
+ cursor: pointer;
+ color: var(--check-green);
+ }
+}
\ No newline at end of file
diff --git a/interface/src/pages/Recorder.js b/interface/src/pages/Recorder.js
index 82c683a6..847b3198 100644
--- a/interface/src/pages/Recorder.js
+++ b/interface/src/pages/Recorder.js
@@ -14,24 +14,31 @@ import videoTypesJSON from "../configs/VideoTypes.json";
import CheckMarkIcon from "../icons/check-mark-success1.webp";
import RecordButton from "../icons/record1.png";
import RecordingGif from "../icons/recording51.gif";
-import history from "../services/history";
-import speechToTextUtils from "../transcription_utils";
-import Tracker from "../utils/tracker";
+import history from "../services/history.js";
+import speechToTextUtils from "../transcription_utils.js";
+import Tracker from "../utils/tracker.js";
import {
OnBoardingQCard,
RecordAVideoCard,
SuggestedQCardNoAction,
-} from "./AvatarGardenPage";
+} from "./AvatarGardenPage.js";
import NavBar from "./NavBar.js";
import { useTranslation } from "react-i18next";
-import { getUser, isLoggedIn } from "../auth/auth";
-import API_URLS from "../configs/backend-urls";
+import { getUser, isLoggedIn } from "../auth/auth.js";
+import API_URLS from "../configs/backend-urls.js";
import {
languageCodeTable,
languageFlagsCSS,
-} from "../services/languageHelper";
+} from "../services/languageHelper.js";
+
+const inlineStyle = {
+ modal: {
+ height: "100px",
+ width: "450px",
+ },
+};
const videoConstraints = {
width: 720,
@@ -62,20 +69,21 @@ function ModalQSuggestion(props) {
};
return (
Question Suggestion Modal}>
- Successful! Your TOIA has been saved.
+ Successful! Your TOIA has been saved.
-
+
-
+ {/*
{suggestedQs.length !== 0
? t("show_suggestions")
: t("no_suggestions")}
-
+ */}
@@ -117,7 +125,7 @@ function ModalQSuggestion(props) {
-
@@ -865,11 +873,12 @@ function Recorder() {
trigger={
-
-
Recorder
-
- {VideoTypeButtonsAll()}
-
-
-
- Public
-
-
-
- {t("privacy_tooltip")}
-
-
-
-
{
- setListStreams(list);
- }} // Function will trigger on select event
- onRemove={(list, item) => {
- setListStreams(list);
- }} // Function will trigger on remove event
- displayValue="name" // Property name to display in the dropdown options
- selectedValues={mainStreamVal}
- disablePreSelectedValues={false}
- placeholder={t("add_stream")}
- />
- }
- content={t("alert_select_default_stream")}
- on="click"
- open={defaultStreamAlertActive}
- onClose={() => setDefaultStreamAlertActive(false)}
- onOpen={() => {
- setDefaultStreamAlertActive(true);
- }}
- position="top center"
- className={"StreamNotSelectedAlert"}
- />
-
-
-
-
-
-
{videosCount}
-
Total Videos
-
-
-
-
- {videosTotalDuration
- ? (videosTotalDuration / 60).toFixed(1)
- : 0}
- Min
-
-
- Total Videos Length
-
-
-
+
+
Recorder
+ {/* record again button after video is recorded */}
+
{!viewingRecordedView ? (
-
-
-
0 &&
- !isRecording
- }
- content={t("alert_record_video")}
- trigger={
-
- {
- togglePreviewBox();
- }}
- disabled={
- !(
- recordedChunks.length >
- 0
- ) || isRecording
- }>
- Next
-
-
-
- }
- />
-
- {recordedChunks.length > 0 && !isRecording && (
-
- {t("record_again_button")}
-
-
- )}
-
+
+ {recordedChunks.length > 0 && !isRecording && (
+ {
+ setViewingRecordedVideo(false);
+ setVideoLengthSeconds(0);
+ setIsRecording(true);
+ setTranscribedAudio("");
+ }}
+ >
+ {t("record_again_button")}
+
+
+ )}
+
+ ) : null}
-
-
-
-
- {getTimeDiffString(videoLengthSeconds)}
-
-
- {capturing ? (
-
- {/* */}
- {/* */}
- {/* */}
- {/* */}
- {/* */}
-
- {/* stop */}
- {/* */}
-
-
+ {viewingRecordedView ? (
- {/* */}
- {/*
*/}
-
- ) : (
-
- {/* */}
-
-
- )}
+
- {recordedChunks.length > 0 && !isRecording && (
-
{
- togglePreviewBox();
+ setViewingRecordedVideo(false);
+ setVideoLengthSeconds(0);
+ setIsRecording(true);
+ setTranscribedAudio("");
}}
- data-tooltip={t("save_video_tooltip")}>
-
-
- )}
+ disabled={waitingServerResponse}>
+ {t("record_again_button")}
+
+
-
- {transcribedAudio}
-
-
- ) : (
-
-
- {isEditing ? (
-
-
- {t("save_as_new_button")}
-
- }
- />
-
-
- {t("update_button")}
-
-
- ) : (
-
{t("save_video_button")}
-
+
+
+
+ ) : null}
+
+
+
+
+
+
+
+
+ {!viewingRecordedView ? (
+
+
+ {/* actual webcam which records video */}
+
+
+ {/* timer for the length of the video */}
+
+
+ {getTimeDiffString(videoLengthSeconds)}
+
+
+
+ {/* if capturing the video already */}
+ {/* display stop button */}
+ {capturing ? (
+
+
+
+
+
+
+ // else, display start button
+ ) : (
+
+
+
+
)}
-
- setViewingRecordedVideo(false)
- }
- disabled={waitingServerResponse}>
- {t("record_again_button")}
-
-
+ {/* tick button which appears after video is recorded to save the video */}
+ {recordedChunks.length > 0 && !isRecording && (
+
{
+ togglePreviewBox();
+ }}
+ data-tooltip={t("save_video_tooltip")}>
+
+
+ )}
+
+ {/* transcription */}
+
+ {transcribedAudio}
+
-
+ ) : (
+
+ // after tick is clicked
+
+
+ {/*
*/}
+
+ {/* save video button */}
+
+
+ {/* record again button */}
+ {/*
+ setViewingRecordedVideo(false)
+ }
+ disabled={waitingServerResponse}>
+ {t("record_again_button")}
+
+ */}
+ {/*
*/}
+
+ {/* video displayed */}
+
-
-
-
-
- )}
- {!viewingRecordedView && !capturing ? (
-
-
-
-
+ )}
+
+ {/* for language selection, which decides transcription when video is being recorded */}
+ {/* {!viewingRecordedView && !capturing ? (
+
+
-
+ ) : (
+ ""
+ )} */}
+
+
+
+
+
+
Video Type
+
+ {VideoTypeButtonsAll()}
+
+
+ {
+ (videoTypeFormal === "Yes/No Answer" || videoTypeFormal === "Plain Answer") ? (
+
+ {/*
+
{t("questions")}
+ */}
+
+
+
+ {
+ setSuggestedQsListCopy(response.list);
+ }}
+ updateSelectedItems={response => {
+ setQuestionsSelected(response.list);
+ if (response.removedItem) {
+ setSuggestedQsListCopy([
+ ...suggestedQsListCopy,
+ response.removedItem,
+ ]);
+ }
+ }}
+ placeholder={t("type_custom_question_input")}
+ maxDisplayedItems={5}
+ displayField={"question"}
+ closeIcon={'cancel'}
+ autoAddOnBlur={true}
+ disabled={pendingOnBoardingQs.length !== 0}
+ />
+
+
+ ) : (
+ // Render something else or null if nothing should be rendered
+ null
+ )
+ }
+
+
+
+
+
{
+ setListStreams(list);
+ }} // Function will trigger on select event
+ onRemove={(list, item) => {
+ setListStreams(list);
+ }} // Function will trigger on remove event
+ displayValue="name" // Property name to display in the dropdown options
+ selectedValues={mainStreamVal}
+ disablePreSelectedValues={false}
+ placeholder={t("add_stream")}
+ closeIcon={'cancel'}
+ />
+ }
+ content={t("alert_select_default_stream")}
+ on="click"
+ open={defaultStreamAlertActive}
+ onClose={() => setDefaultStreamAlertActive(false)}
+ onOpen={() => {
+ setDefaultStreamAlertActive(true);
+ }}
+ position="top center"
+ className={"StreamNotSelectedAlert"}
+ />
+
+ {/*
+ {isPrivate ? (
+ // Icon for private (eye with a line)
+ ) : (
+ // Icon for public (open eye)
+ )}
+
*/}
+
- ) : (
- ""
- )}
-
-
-
{t("questions")}
-
-
-
- {
- setSuggestedQsListCopy(response.list);
- }}
- updateSelectedItems={response => {
- setQuestionsSelected(response.list);
- if (response.removedItem) {
- setSuggestedQsListCopy([
- ...suggestedQsListCopy,
- response.removedItem,
- ]);
- }
- }}
- placeholder={t("type_custom_question_input")}
- maxDisplayedItems={5}
- displayField={"question"}
- autoAddOnBlur={true}
- disabled={pendingOnBoardingQs.length !== 0}
- />
+
+
+
+
+
+
+
+
);
}
-export default Recorder;
+export default Recorder;
\ No newline at end of file
diff --git a/interface/src/pages/SignUpPage.css b/interface/src/pages/SignUpPage.css
index 4e68a0f0..b5a99453 100644
--- a/interface/src/pages/SignUpPage.css
+++ b/interface/src/pages/SignUpPage.css
@@ -38,6 +38,7 @@
transition: all 0.2s ease;
width: 203px;
}
+
.signup-group {
background-color: transparent;
height: 560px;
@@ -55,6 +56,7 @@
position: absolute;
top: 0%;
}
+
.signup_text {
background-color: transparent;
height: auto;
diff --git a/interface/src/pages/SignUpPage.js b/interface/src/pages/SignUpPage.js
index 02885b8c..19e832c2 100644
--- a/interface/src/pages/SignUpPage.js
+++ b/interface/src/pages/SignUpPage.js
@@ -1,4 +1,5 @@
import axios from "axios";
+import { Modal } from "semantic-ui-react";
import React, { useState } from "react";
import {
NotificationContainer,
@@ -78,6 +79,10 @@ function SignUpPage() {
}
return (
+
+
+
+
-
+
-
-
+ muted={muted}
+ className="player-vid"
+ id="vidmain"
+ key={key}
+ onEnded={onEnded}
+ // onTimeUpdate={onTimeUpdate}
+ ref={videoRef}
+ autoPlay>
+
+
+
);
}
diff --git a/interface/src/suggestiveSearch/suggestionCards.js b/interface/src/suggestiveSearch/suggestionCards.js
index 14ad6d4d..cb421e62 100644
--- a/interface/src/suggestiveSearch/suggestionCards.js
+++ b/interface/src/suggestiveSearch/suggestionCards.js
@@ -4,362 +4,60 @@ import { Button, Card } from "semantic-ui-react";
import "../pages/Player.css";
export default function SuggestionCards(props) {
- // keeping track of position of each of the five cards
- // const firstQuestion = React.useRef(0);
- const [firstQuestion, setFirstQuestion] = useState({
- questionData: null,
- waiting: true,
- highlighBackground: false,
- });
+ const QuestionsToDisplay = 5;
+ const [displayedQuestions, setDisplayedQuestions] = useState([]);
+ const [nextAt, setNextAt] = useState(0);
+ // const [askedQuestions, setAskedQuestions] = useState([]);
+ // const [unAskedunDisplayedQuestions, setUnAskedUnDisplayedQuestions] = useState([]);
- const [secondQuestion, setSecondQuestion] = useState({
- questionData: null,
- waiting: true,
- highlighBackground: false,
- });
-
- const [thirdQuestion, setThirdQuestion] = useState({
- questionData: null,
- waiting: true,
- highlighBackground: false,
- });
-
- const [fourthQuestion, setFourthQuestion] = useState({
- questionData: null,
- waiting: true,
- highlighBackground: false,
- });
-
- const [fifthQuestion, setFifthQuestion] = useState({
- questionData: null,
- waiting: true,
- highlighBackground: false,
- });
-
- const cardQuestions = [
- firstQuestion,
- secondQuestion,
- thirdQuestion,
- fourthQuestion,
- fifthQuestion,
- ];
- // const setQuestion = [setFirstQuestion,setSecondQuestion,setThirdQuestion,setFourthQuestion,setFifthQuestion];
-
- const getSuggestion = questionCard => {
- // console.log("getSuggestion:");
- // console.log(questionCard.questionData && questionCard.questionData.question ? questionCard.questionData.question : "No question loaded!");
- return questionCard.questionData && questionCard.questionData.question
- ? questionCard.questionData.question
- : "Loading ...";
- };
-
- const delayedQuestionCardChange = (questionCard, setQuestionCard) => {
- return () => {
- questionCard.highlighBackground = false;
- if (questionCard.waiting) {
- questionCard.questionData = null;
- setQuestionCard({ ...questionCard });
- }
- };
- };
-
- const askQuestion = (questionCard, setQuestionCard) => {
- if (!props.hasRated) {
- props.notificationManager.warning(
- "Please provide a rating",
- "",
- 3000,
- );
- return;
- }
-
- // console.log("askQuestion:");
- props.askQuestion(questionCard.questionData);
- questionCard.waiting = true;
- questionCard.highlighBackground = true;
- setTimeout(
- delayedQuestionCardChange(questionCard, setQuestionCard),
- 3000,
- );
- setQuestionCard({ ...questionCard });
- };
-
- const getNextQuestion = (questionCard, setQuestionCard) => {
- // console.log("getNextQuestion:");
- if (props.questions.length > 0) {
- // console.log("getNextQuestion: got question");
- questionCard.questionData = props.questions.pop();
- setQuestionCard({ ...questionCard });
- }
- };
-
- const refreshQuestion = (questionCard, setQuestionCard) => {
- // console.log("refreshQuestion: refreshing question...");
- if (
- props.questions.length > 0 &&
- questionCard.waiting &&
- props.shouldRefreshQuestions?.current
- ) {
- // console.log("refreshQuestion: refreshed question...");
- questionCard.waiting = false;
- questionCard.highlighBackground = false;
- questionCard.questionData = props.questions.pop();
- // console.log("refreshQuestion: new question: ", questionCard.questionData.question);
- setQuestionCard({ ...questionCard });
- }
- };
-
- const shouldStopRefreshing = () => {
- for (let questionCard in cardQuestions) {
- // If any card question is still waiting, even after updating the questions
- // Then we still want to refresh questions where possible
- if (questionCard.waiting && props.shouldRefreshQuestions?.current) {
- return false;
+ useEffect(() => {
+ if (props.questions) {
+ // Set first QuestionsToDisplay from props.questions
+ if ((props.questions).length <= QuestionsToDisplay) {
+ setDisplayedQuestions(props.questions);
+ } else {
+ setDisplayedQuestions(props.questions.slice(0, QuestionsToDisplay));
}
+ setNextAt(Math.min(QuestionsToDisplay, (props.questions).length));
}
- return true;
+ }, [props.questions])
+
+ const askQuestion = (item) => {
+ const question = item.question;
+ const displayeDList = displayedQuestions.map(item => item.question);
+ const index = displayeDList.indexOf(question);
+ const maxLength = (props.questions).length;
+ let currentNextAt = nextAt % maxLength;
+ let nextQuestion = null;
+ do {
+ nextQuestion = props.questions[currentNextAt]
+ currentNextAt = (currentNextAt + 1) % maxLength;
+ } while (currentNextAt != nextAt % maxLength && displayeDList.includes(nextQuestion.question))
+ setNextAt(currentNextAt);
+
+ // set new displayed
+ setTimeout(() => {
+ let newDisplayedQuestions = [...displayedQuestions];
+ newDisplayedQuestions[index] = nextQuestion;
+ setDisplayedQuestions(newDisplayedQuestions);
+ }, 2000)
+
+ props.askQuestion(item);
};
- useEffect(() => {
- getNextQuestion(firstQuestion, setFirstQuestion);
- getNextQuestion(secondQuestion, setSecondQuestion);
- }, []);
-
return props.questions ? (
-
-
- Some things you can ask me…
-
-
-
-
-
- {refreshQuestion(fifthQuestion, setFifthQuestion)}
- {getSuggestion(fifthQuestion)}
-
-
-
-
- {
- askQuestion(
- fifthQuestion,
- setFifthQuestion,
- );
- }}
- />
- {
- getNextQuestion(
- fifthQuestion,
- setFifthQuestion,
- );
- }}
- />
-
-
-
-
-
-
-
-
-
- {refreshQuestion(fourthQuestion, setFourthQuestion)}
- {getSuggestion(fourthQuestion)}
-
-
-
-
- {
- askQuestion(
- fourthQuestion,
- setFourthQuestion,
- );
- }}
- />
- {
- getNextQuestion(
- fourthQuestion,
- setFourthQuestion,
- );
- }}
- />
-
-
-
+
+ {
+ displayedQuestions.map((item) => {
+ return (
+ askQuestion(item)}
+ />
+ )
+ })
+ }
-
-
-
-
-
- {refreshQuestion(thirdQuestion, setThirdQuestion)}
- {getSuggestion(thirdQuestion)}
-
-
-
-
- {
- askQuestion(
- thirdQuestion,
- setThirdQuestion,
- );
- }}
- />
- {
- getNextQuestion(
- thirdQuestion,
- setThirdQuestion,
- );
- }}
- />
-
-
-
-
-
-
-
-
-
- {refreshQuestion(secondQuestion, setSecondQuestion)}
- {getSuggestion(secondQuestion)}
-
-
-
-
- {
- askQuestion(
- secondQuestion,
- setSecondQuestion,
- );
- }}
- />
- {
- getNextQuestion(
- secondQuestion,
- setSecondQuestion,
- );
- }}
- />
-
-
-
-
-
-
-
-
-
- {refreshQuestion(firstQuestion, setFirstQuestion)}
- {getSuggestion(firstQuestion)}
-
-
-
-
- {
- askQuestion(
- firstQuestion,
- setFirstQuestion,
- );
- }}
- />
- {
- getNextQuestion(
- firstQuestion,
- setFirstQuestion,
- );
- }}
- />
-
-
-
-
-
- {shouldStopRefreshing() ? props.setRefreshQuestionsFalse() : ""}
-
) : null;
}
-
-/**
- *
- *
- *
- *
-
-
-*/
diff --git a/interface/src/suggestiveSearch/suggestiveSearch.js b/interface/src/suggestiveSearch/suggestiveSearch.js
index 7ca5331c..317c47f3 100644
--- a/interface/src/suggestiveSearch/suggestiveSearch.js
+++ b/interface/src/suggestiveSearch/suggestiveSearch.js
@@ -1,14 +1,47 @@
import * as React from "react";
import TextField from "@mui/material/TextField";
import Autocomplete, { createFilterOptions } from "@mui/material/Autocomplete";
+import { Input } from 'semantic-ui-react'
+import { useState } from "react";
+import { createTheme, ThemeProvider } from '@mui/material/styles';
const filter = createFilterOptions({
matchFrom: "start",
});
+const theme = createTheme({
+ components: {
+ MuiTextField: {
+ styleOverrides: {
+ root: {
+ '& .MuiInputBase-input': {
+ color: 'black', // Text color
+ },
+ '& .MuiInputLabel-root': {
+ color: 'black', // Label color
+ },
+ '& .MuiOutlinedInput-root': {
+ '& fieldset': {
+ borderColor: 'black', // Border color
+ },
+ '&:hover fieldset': {
+ borderColor: 'black', // Hover border color
+ },
+ '&.Mui-focused fieldset': {
+ borderColor: 'black', // Focused border color
+ },
+ },
+ },
+ },
+ },
+ },
+ });
+
+
export default function FreeSoloCreateOption(props) {
const [value, setValue] = React.useState(null);
const disableTyping = React.useRef(true);
+ const [searchTerm, setSearchTerm] = useState('');
return (
(
{option.question}
)}
- sx={{ width: 200 }}
+ // sx={{ width: 200 }}
freeSolo
renderInput={params => (
- {
- disableTyping.current = Boolean(!value.target.value); // if string is empty, return true. Otherwise, false
- props.handleTextChange(value);
- }}
- />
+
+
+
+ {
+ disableTyping.current = Boolean(
+ !value.target.value,
+ ); // if string is empty, return true. Otherwise, false
+ props.handleTextChange(value);
+ }}
+ />
+
+
+
)}
/>
);
diff --git a/interface/src/video/toia-final-vid.mp4 b/interface/src/video/toia-final-vid.mp4
new file mode 100644
index 00000000..5bae8117
Binary files /dev/null and b/interface/src/video/toia-final-vid.mp4 differ