from-vilog

README-en.md

@@ -1,16 +1,16 @@
-# CHiBi-CHiLO
+# ViLOG
 
 [English](README-en.md) |[Japanese](README-ja.md)
 
 ## What kind of program is it?
 
-CHiBi-CHiLO is an open-source program for analyzing video viewing logs. This program allows you to compile video contents already existing on Wowza, YouTube, and Vimeo into easy-to-use contents for learners and to collect and visualize video viewing logs. This system is an LTI tool provider and can be used in conjunction with LMS such as Moodle and BlackBoard.
+ViLOG is an open-source program for analyzing video viewing logs. This program allows you to compile video contents already existing on Wowza, YouTube, and Vimeo into easy-to-use contents for learners and to collect and visualize video viewing logs. This system is an LTI tool provider and can be used in conjunction with LMS such as Moodle and BlackBoard.
 
 <!--- わかりやすい動画例を添付する。 --- LTI リンクを起点とする操作例 Gif か mp4 へのリンク-->
 
-## How to Use CHiBi-CHiLO
+## How to Use ViLOG
 
-Please read the [installation guide](INSTALL-en.md).
+Please read the installation guide (INSTALL-ja.md).
 
 ### Learning Analytics
 

README-ja.md

@@ -1,14 +1,14 @@
-# CHiBi-CHiLO
+# ViLOG
 
 [English](README-en.md) | 日本語
 
 ## これは何をするプログラムか
 
-Moodle や BlackBoard などの LTI と連携して、Wowza, YouTube, Vimeo 上に存在する動画コンテンツを、学習者が利用しやすいコンテンツにまとめ上げるシステムです。
+ViLOG システムはオープンソースのビデオ視聴行動分析システムです。
+本システムは，Wowza, YouTube, Vimeo 上に存在する動画コンテンツを、学習者が利用しやすいコンテンツにまとめ上げる機能と，動画視聴時のログを収集し，可視化する機能を提供します。
+本システムは，LTI ツールプロバイダーであり，Moodle や BlackBoard などの LMS と連携して利用できます。
 
-下記のような画面を提供します。
-
---- わかりやすい動画例を添付する。 --- LTI リンクを起点とする操作例 Gif か mp4 へのリンク
+<!--- わかりやすい動画例を添付する。 --- LTI リンクを起点とする操作例 Gif か mp4 へのリンク-->
 
 ## 使い方
 
@@ -45,14 +45,10 @@ CSV ファイルの各カラムの詳細は次のとおりです。
 
 インストールしたあと、下記の URL から操作方法を学んでください。
 
-## 貢献方法
+<!--## 貢献方法
 
-contributing.md を参考にしてください。著作権が発生するほどのコードやドキュメントを貢献していただいた方々には、Authors.rst にお名前と連絡用のメールアドレスを記載します。
+contributing.md を参考にしてください。著作権が発生するほどのコードやドキュメントを貢献していただいた方々には、Authors.rst にお名前と連絡用のメールアドレスを記載します。-->
 
 ## ライセンス
 
 MIT
-
-## funding
-
-永続的な開発を続けるために、寄付を歓迎します。

README.md

@@ -1,9 +1,29 @@
-# ![ロゴ](docs/assets/chibichilo_s.png)CHiBi-CHiLO
+# ![ロゴ](docs/assets/ViLOG_s.png) ViLOG: Video viewing LOG analytics system
 
-[English](README-en.md) | [日本語](README-ja.md)
+[English](README-en.md) | [Japanese](README-ja.md)
 
-CHiBi-CHiLO とは，LMS と外部接続する[LTI ツールプロバイダー](https://www.imsglobal.org/activity/learning-tools-interoperability) です．
-ビデオを共有・再利用することを目的に開発されました．Youtube や Vimeo などのインターネット上のビデオを組み合わせ，「ブック」と呼ばれる形式のビデオ教材として LMS で配信することができます．
+ViLOG (Video viewing LOG analytics system) is an open-source video viewing behavior analysis system developed as the first step of an ongoing research project on engagement analytics for video-based learning. This system was developed as a Learning Tools Interoperability (LTI)-compliant tool so that it would be easy to implement in any environment and to extend features to validate the new framework.
 
-[![Deploy](https://www.herokucdn.com/deploy/button.svg)](https://heroku.com/deploy)
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https%3A%2F%2Fgithub.com%2Fnpocccties%2Fchibichilo&env=SESSION_SECRET,DATABASE_URL)
+This work was supported by MEXT "Innovation Platform for Society 5.0" Program Grant Number JPMXP0518071489.
+
+## Functionality
+
+### LTI Tool Provides
+
+This system is developed as a [LTI tool provides](https://www.imsglobal.org/activity/learning-tools-interoperability "LTI tool provides") to be integrated with an LMS.
+
+<img src="docs/assets/overview.png" width="500" alt="Overview of the ViLOG system">
+
+### Video Viewing Behavior Dashboard
+
+The dashboard page is focused on confirming the overview of students' progress in real time. We defined students' progress at three levels "Completed," "Attempts," "Unopened," and collected progress data at one-second intervals. The image shows the viewing progress per video lecture.
+
+<img src="docs/assets/dashboard.png" width="500" alt="Dashboard page for confirming video viewing behavior">
+
+### Video Viewing Behavior Dashboard
+
+The system has a module for advanced analytics based on video.js to collect detailed video viewing behavior log data. This module saves video viewing log data such as play, pause, fast-forward, rewind, and playback speed changes every 10 seconds, in accordance with the log format defined by National Institute of Informatics (NII), Japan’s only general academic research institution.
+
+## Citation
+
+Shizuka Shirai, Masumi Hori, Masako Furukawa, Mehrasa Alizadeh, Noriko Takemura, Haruo Takemura and Hajime Nagahara. 2022. Design of open-source video viewing behavior analysis system. In Companion Proceedings 12th International Conference on Learning Analytics & Knowledge (LAK22), March 23-25, 2022, online. Society for Learning Analytics Research, 82. https://www.solaresearch.org/core/lak22-companion-proceedings/

components/atoms/Emoji.stories.tsx

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import Emoji from "./Emoji";
+import { bookmark } from "$samples";
+
+export default {
+  component: Emoji,
+} satisfies Meta<typeof Emoji>;
+
+type Story = StoryObj<typeof Emoji>;
+
+export const Default: Story = {
+  render: () => <Emoji emoji={bookmark.tag.emoji} />,
+};

components/atoms/Emoji.tsx

@@ -0,0 +1,28 @@
+import { css } from "@emotion/css";
+import twemoji from "@twemoji/api";
+
+import type { TagSchema } from "$server/models/bookmark";
+
+const emojiClass = css({
+  lineHeight: "1",
+  "> .emoji": {
+    width: "16px",
+    height: "16px",
+  },
+});
+
+type Props = {
+  emoji: TagSchema["emoji"];
+};
+
+export default function Emoji({ emoji }: Props) {
+  return (
+    <span
+      className={emojiClass}
+      dangerouslySetInnerHTML={{
+        // @ts-expect-error twemojiの型定義が間違っている
+        __html: twemoji.parse(emoji),
+      }}
+    />
+  );
+}

components/atoms/LearnerActivityDot.tsx

@@ -38,7 +38,7 @@ export default function LearnerActivityDot(props: Props) {
   const { activity, onActivityClick, session } = props;
   const classes = useStyles();
   const handleActivityClick = () => onActivityClick?.(activity);
-  const items = getLocaleEntries(activity, session);
+  const items = Object.entries(getLocaleEntries(activity, session));
   return (
     <Tooltip
       title={

components/atoms/Tag.stories.tsx

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import Tag from "./Tag";
+import { bookmark } from "$samples";
+
+export default {
+  component: Tag,
+} satisfies Meta<typeof Tag>;
+
+type Story = StoryObj<typeof Tag>;
+
+export const Default: Story = {
+  render: () => <Tag tag={bookmark.tag} />,
+};

components/atoms/Tag.tsx

@@ -0,0 +1,48 @@
+import { css } from "@emotion/css";
+import type { BookmarkSchema, TagSchema } from "$server/models/bookmark";
+import Emoji from "./Emoji";
+
+const tagClass = css({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  height: "26px",
+  width: "fit-content",
+  boxSizing: "border-box",
+  borderRadius: "999px",
+  margin: "6px 8px 6px 0px",
+  padding: "4px 16px",
+  background: "#FFF",
+  border: "solid 1px #F3F4F6",
+  "> :first-child": {
+    marginRight: "8px",
+  },
+});
+
+const text = css({
+  lineHeight: "1.1",
+  fontSize: "12px",
+  marginRight: "8px",
+  whiteSpace: "nowrap",
+});
+
+type Props = {
+  tag?: TagSchema;
+  memoContent?: BookmarkSchema["memoContent"];
+};
+
+export default function Tag({ tag, memoContent }: Props) {
+  if (!tag && !memoContent) return null;
+
+  return (
+    <div className={tagClass}>
+      <Emoji emoji={tag?.emoji || "💬"} />
+      <p className={text}>
+        {tag?.label ||
+          (memoContent && memoContent?.length > 5
+            ? memoContent?.substring(0, 5) + "..."
+            : memoContent)}
+      </p>
+    </div>
+  );
+}

components/atoms/TagMenu.stories.tsx

@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import TagMenu from "./TagMenu";
+import { bookmark, bookmarkTagMenu } from "$samples";
+
+export default {
+  component: TagMenu,
+} satisfies Meta<typeof TagMenu>;
+
+type Story = StoryObj<typeof TagMenu>;
+
+export const Default: Story = {
+  render: () => (
+    <TagMenu
+      topicId={bookmark.topicId}
+      selectedTag={[bookmark.tag]}
+      tagMenu={bookmarkTagMenu}
+      handleTagChange={() => {}}
+      isBookmarkMemoContent={false}
+      onSubmitBookmark={async () => {}}
+    />
+  ),
+};

components/atoms/TagMenu.tsx

@@ -0,0 +1,155 @@
+import { useCallback } from "react";
+import { useLockBodyScroll, useToggle } from "react-use";
+import { css } from "@emotion/css";
+import { Dropdown } from "@mui/base/Dropdown";
+import { Menu as BaseMenu, menuClasses } from "@mui/base/Menu";
+import { MenuButton as BaseMenuButton } from "@mui/base/MenuButton";
+import { MenuItem as BaseMenuItem, menuItemClasses } from "@mui/base/MenuItem";
+import AddReactionOutlinedIcon from "@mui/icons-material/AddReactionOutlined";
+import { styled } from "@mui/system";
+import type {
+  BookmarkProps,
+  BookmarkTagMenu,
+  TagSchema,
+} from "$server/models/bookmark";
+import Emoji from "./Emoji";
+
+const menuItem = css({
+  "> :first-child": {
+    marginRight: "8px",
+  },
+});
+
+type Props = {
+  topicId: number;
+  selectedTag: TagSchema[];
+  tagMenu: BookmarkTagMenu;
+  handleTagChange: (tag: TagSchema) => void;
+  isBookmarkMemoContent: boolean;
+  onSubmitBookmark: (body: BookmarkProps) => Promise<void>;
+};
+
+export default function TagMenu({
+  topicId,
+  selectedTag,
+  tagMenu,
+  handleTagChange,
+  isBookmarkMemoContent,
+  onSubmitBookmark,
+}: Props) {
+  const onClick = useCallback(
+    async (option: TagSchema) => {
+      handleTagChange(option);
+      await onSubmitBookmark({ topicId, tagId: option.id });
+    },
+    [handleTagChange, onSubmitBookmark, topicId]
+  );
+
+  const filterTags = tagMenu.filter((tag) => {
+    return selectedTag.every((selected) => selected.id !== tag.id);
+  });
+
+  const [locked, toggleLocked] = useToggle(false);
+
+  useLockBodyScroll(locked);
+
+  if (filterTags.length === 0 && isBookmarkMemoContent) {
+    return null;
+  }
+
+  return (
+    <Dropdown
+      onOpenChange={() => {
+        toggleLocked();
+      }}
+    >
+      <MenuButton>
+        <AddReactionOutlinedIcon
+          sx={{
+            fontSize: 16,
+            verticalAlign: "middle",
+          }}
+        />{" "}
+        タグを追加
+      </MenuButton>
+      <Menu slots={{ listbox: Listbox }}>
+        {filterTags.map((option) => (
+          <MenuItem
+            key={option.id}
+            value={option}
+            onClick={async () => await onClick(option)}
+            className={menuItem}
+          >
+            <Emoji emoji={option.emoji} />
+            {option.label}
+          </MenuItem>
+        ))}
+      </Menu>
+    </Dropdown>
+  );
+}
+
+const MenuButton = styled(BaseMenuButton)(
+  () => `
+  font-size: 12px;
+  box-sizing: border-box;
+  padding: 8px 12px;
+  border-radius: 8px;
+  text-align: left;
+  background: #F9FAFB;
+  border: 1px solid #F9FAFB;
+  color: #339DFF;
+  `
+);
+
+const Menu = styled(BaseMenu)(
+  () => `
+  &.${menuClasses.root} {
+    margin-top: -12px !important;
+    margin-left: 20px !important;
+    // Dialogよりも上に表示する
+    z-index: 1301;
+  }
+  `
+);
+
+const Listbox = styled("ul")(
+  () => `
+  font-size: 12px;
+  box-sizing: border-box;
+  padding: 6px;
+  width: 145px;
+  border-radius: 12px;
+  overflow: auto;
+  outline: 0px;
+  background: #fff;
+  border: #fff;
+  box-shadow: 0px 4px 6px rgba(0,0,0, 0.05)
+  `
+);
+
+const MenuItem = styled(BaseMenuItem)(
+  () => `
+  display: flex;
+  align-items: center;
+  list-style: none;
+  padding: 8px;
+  cursor: default;
+  margin-right: -8px;
+  margin-left: -8px;
+  font-size: 12px;
+
+  &:hover {
+    background-color: #F9FAFB;
+  }
+
+  &.${menuItemClasses.focusVisible} {
+    background-color: #F9FAFB;
+    outline: none;
+  }
+
+  > span {
+    margin-left: 8px;
+  }
+  `
+);