update videos of Databases (#489)

liara-cloud · Oct 5, 2023 · bca0136 · bca0136
1 parent 8d9b560
commit bca0136
Show file tree

Hide file tree

Showing 7 changed files with 230 additions and 77 deletions.
diff --git a/pages/databases/mariadb/connections.js b/pages/databases/mariadb/connections.js
@@ -26,25 +26,13 @@ export default () => (
       ابزارهای زیر را انتخاب کنید.
     </p>
     <h4 id="phpmyadmin">phpMyAdmin</h4>
-    <p>
-      اکثر توسعه‌دهندگان با ابزار مشهور phpMyAdmin که امکان مدیریت دیتابیس‌های
-      MySQL و MariaDB را در محیط وب فراهم می‌کند، آشنا هستند. برای راه‌اندازی
-      این ابزار در لیارا تنها کافیست وارد منوی <strong>نحوه‌ی اتصال</strong> به
-      دیتابیس شده و گزینه‌ی <strong>راه‌اندازی phpMyAdmin</strong> را فعال کنید.
-    </p>
-    <ZoomableImage
-      src="/static/databases/mysql-php-myadmin.png"
-      alt="آماده شدن دیتابیس"
-    />
-    <p>
-      سپس می‌توانید با کلیک بر روی دکمه‌ی <strong>باز کردن phpMyAdmin</strong> و
-      وارد کردن نام کاربری و رمز عبور دیتابیس‌تان از امکانات این ابزار استفاده
-      کنید.
-    </p>
-    <ZoomableImage
-      src="/static/databases/mysql-phpmyadmin.png"
-      alt="پنل phpmyadmin"
-    />
+
+    <video
+      src="https://files.liara.ir/liara/mariadb/mariadb-phpmyadmin.mp4"
+      controls="controls"
+      className="block w-full"
+      width="100%"
+    ></video>
 
     <h4 id="database-management-tools">
       مدیریت دیتابیس با استفاده از رابط‌های کاربری گرافیکی (GUI)
@@ -63,7 +51,12 @@ export default () => (
     </p>
 
     <h5 id="mariadb-dbeaver">DBeaver</h5>
-    <ZoomableImage src="https://files.liara.ir/docs/mariadb/connect-to-mariadb-database-with-dbeaver.gif" />
+    <video
+      src="https://files.liara.ir/liara/mariadb/mariadb-dbeaver.mp4"
+      controls="controls"
+      className="block w-full"
+      width="100%"
+    ></video>
 
     <h4 id="mysql-client">MySQL Command-Line Client</h4>
     <p>
@@ -76,6 +69,11 @@ export default () => (
       {`$ mysql -u DB_USER -pDB_PASSWORD --host DB_HOST --port DB_PORT`}
     </Highlight>
 
-    <Asciinema id="465244" />
+    <video
+      src="https://files.liara.ir/liara/mariadb/mariadb-mysqlcmd.mp4"
+      controls="controls"
+      className="block w-full"
+      width="100%"
+    ></video>
   </Layout>
 );
diff --git a/pages/databases/mongodb/connections.js b/pages/databases/mongodb/connections.js
@@ -47,6 +47,17 @@ export default () => (
       استفاده کنید.
     </p>
 
+    <p>
+      در صورتی که تمایلی به خواندن آموزش متنی ندارید می‌توانید ویدیوی آموزشی زیر
+      ‌را مشاهده کنید.
+    </p>
+    <video
+      src="https://files.liara.ir/liara/mongodb/mongodb-compass.mp4"
+      controls="controls"
+      className="block w-full"
+      width="100%"
+    ></video>
+
     <h5 id="mongodb-dbeaver">MongoDB Compass</h5>
     <ZoomableImage src="https://files.liara.ir/docs/mongodb/connect-to-mongodb-database-with-mongodb-compass.gif" />
 
@@ -57,7 +68,7 @@ export default () => (
       زیر به سرویس دیتابیس خود متصل شوید.
     </p>
     <Highlight className="bash">
-      {`$ mongo -u DB_USERNAME \\
+      {`$ mongosh -u DB_USERNAME \\
            --port DB_PORT \\
            --host DB_HOST \\
            -p DB_PASSWORD \\

diff --git a/pages/databases/mysql/connections.js b/pages/databases/mysql/connections.js
@@ -26,25 +26,13 @@ export default () => (
       زیر را انتخاب کنید.
     </p>
     <h4 id="phpmyadmin">phpMyAdmin</h4>
-    <p>
-      اکثر توسعه‌دهندگان با ابزار مشهور phpMyAdmin که امکان مدیریت دیتابیس‌های
-      MySQL و MariaDB را در محیط وب فراهم می‌کند، آشنا هستند. برای راه‌اندازی
-      این ابزار در لیارا تنها کافیست وارد منوی <strong>نحوه‌ی اتصال</strong> به
-      دیتابیس شده و گزینه‌ی <strong>راه‌اندازی phpMyAdmin</strong> را فعال کنید.
-    </p>
-    <ZoomableImage
-      src="/static/databases/mysql-php-myadmin.png"
-      alt="آماده شدن دیتابیس"
-    />
-    <p>
-      سپس می‌توانید با کلیک بر روی دکمه‌ی <strong>باز کردن phpMyAdmin</strong> و
-      وارد کردن نام کاربری و رمز عبور دیتابیس‌تان از امکانات این ابزار استفاده
-      کنید.
-    </p>
-    <ZoomableImage
-      src="/static/databases/mysql-phpmyadmin.png"
-      alt="پنل phpmyadmin"
-    />
+
+    <video
+      src="https://files.liara.ir/liara/mysql/mysql-phpmyadmin.mp4"
+      controls="controls"
+      className="block w-full"
+      width="100%"
+    ></video>
 
     <h4 id="database-management-tools">
       مدیریت دیتابیس با استفاده از رابط‌های کاربری گرافیکی (GUI)
@@ -72,10 +60,20 @@ export default () => (
     </p>
 
     <h5 id="mysql-dbeaver">DBeaver</h5>
-    <ZoomableImage src="https://files.liara.ir/docs/mysql/connect-to-mysql-database-with-dbeaver.gif" />
+    <video
+      src="https://files.liara.ir/liara/mysql/mysql-dbeaver.mp4"
+      controls="controls"
+      className="block w-full"
+      width="100%"
+    ></video>
 
     <h5 id="mysql-mysql-workbench">MySQL Workbench</h5>
-    <ZoomableImage src="https://files.liara.ir/docs/mysql/connect-to-mysql-database-with-mysql-workbench.gif" />
+    <video
+      src="https://files.liara.ir/liara/mysql/mysql-workbench.mp4"
+      controls="controls"
+      className="block w-full"
+      width="100%"
+    ></video>
 
     <h4 id="mysql-client">MySQL Command-Line Client</h4>
     <p>
@@ -88,6 +86,11 @@ export default () => (
       {`$ mysql -u DB_USER -pDB_PASSWORD --host DB_HOST --port DB_PORT`}
     </Highlight>
 
-    <Asciinema id="465240" />
+    <video
+      src="https://files.liara.ir/liara/mysql/mysql-cmd.mp4"
+      controls="controls"
+      className="block w-full"
+      width="100%"
+    ></video>
   </Layout>
 );
diff --git a/pages/databases/postgresql/connections.js b/pages/databases/postgresql/connections.js
@@ -26,20 +26,13 @@ export default () => (
       ابزارهای زیر را انتخاب کنید.
     </p>
     <h4 id="pgadmin">PGAdmin</h4>
-    <p>
-      ابزار PGAdmin امکان مدیریت دیتابیس‌های PostgreSQL را در محیط وب فراهم
-      می‌کند. برای راه‌اندازی این ابزار در لیارا تنها کافیست وارد منوی{" "}
-      <strong>نحوه‌ی اتصال</strong> به دیتابیس شده و گزینه‌ی{" "}
-      <strong>راه‌اندازی PGAdmin</strong> را فعال کنید.
-    </p>
-    <ZoomableImage
-      src="/static/databases/pg-admin.png"
-      alt="آماده شدن دیتابیس"
-    />
-    <p>
-      سپس می‌توانید با کلیک بر روی دکمه‌ی <strong>بازکردن PGAdmin</strong> و
-      وارد کردن اطلاعات اتصال به دیتابیس‌تان از امکانات این ابزار استفاده کنید.
-    </p>
+
+    <video
+      src="https://files.liara.ir/liara/postgresql/postgres-pgadmin.mp4"
+      controls="controls"
+      className="block w-full"
+      width="100%"
+    ></video>
 
     <h4 id="database-management-tools">
       مدیریت دیتابیس با استفاده از رابط‌های کاربری گرافیکی (GUI)
@@ -58,7 +51,12 @@ export default () => (
     </p>
 
     <h5 id="postgresql-dbeaver">DBeaver</h5>
-    <ZoomableImage src="https://files.liara.ir/docs/postgresql/connect-to-postgresql-database-with-dbeaver.gif" />
+    <video
+      src="https://files.liara.ir/liara/postgresql/postgres-dbeaver.mp4"
+      controls="controls"
+      className="block w-full"
+      width="100%"
+    ></video>
 
     <h4 id="psql">psql</h4>
     <p>
@@ -70,6 +68,11 @@ export default () => (
     <Highlight className="bash">{`$ psql -h DB_HOST -p DB_PORT -U DB_USERNAME -W postgres`}</Highlight>
     <p>بعد از وارد کردن دستور فوق، رمز عبور دیتابیس از شما پرسیده خواهد شد..</p>
 
-    <Asciinema id="465245" />
+    <video
+      src="https://files.liara.ir/liara/postgresql/postgres-psql.mp4"
+      controls="controls"
+      className="block w-full"
+      width="100%"
+    ></video>
   </Layout>
 );
diff --git a/pages/databases/redis/connections.js b/pages/databases/redis/connections.js
@@ -26,6 +26,17 @@ export default () => (
       زیر را انتخاب کنید.
     </p>
 
+    <p>
+      در صورتی که تمایلی به خواندن آموزش متنی ندارید می‌توانید ویدیوی آموزشی زیر
+      ‌را مشاهده کنید.
+    </p>
+    <video
+      src="https://files.liara.ir/liara/redis/redis-cli.mp4"
+      controls="controls"
+      className="block w-full"
+      width="100%"
+    ></video>
+
     <h4>phpRedisAdmin</h4>
     <p>
       ابزار phpRedisAdmin امکان مدیریت دیتابیس‌های Redis را در محیط وب فراهم

diff --git a/pages/databases/sqlserver/connections.js b/pages/databases/sqlserver/connections.js
@@ -50,7 +50,20 @@ export default () => (
     ></video>
 
     <h5 id="sql-server-dbeaver">DBeaver</h5>
-    <ZoomableImage src="https://files.liara.ir/docs/sql-server/connect-to-sql-server-database-with-dbeaver.gif" />
+    <video
+      src="https://files.liara.ir/liara/mssql/mssql-dbeaver.mp4"
+      controls="controls"
+      className="block w-full"
+      width="100%"
+    ></video>
+
+    <h5 id="sql-server-azure">Azure Data Studio</h5>
+    <video
+      src="https://files.liara.ir/liara/mssql/mssql-azure.mp4"
+      controls="controls"
+      className="block w-full"
+      width="100%"
+    ></video>
 
     <h4 id="sqlcmd">sqlcmd</h4>
     <p>