1634350200
Spring crud example with MySQL [Update - II ] - In this video, we will learn to create an update screen that will pre-populate the user’s stored information. The user may then change the information and update the existing information. we will be using a MySQL database here with spring JDBC and java to write our backend code. In this example, I will be developing the UI using JSP and spring mvc form tags.
1659500100
Form objects decoupled from your models.
Reform gives you a form object with validations and nested setup of models. It is completely framework-agnostic and doesn't care about your database.
Although reform can be used in any Ruby framework, it comes with Rails support, works with simple_form and other form gems, allows nesting forms to implement has_one and has_many relationships, can compose a form from multiple objects and gives you coercion.
Reform is part of the Trailblazer framework. Full documentation is available on the project site.
Temporary note: Reform 2.2 does not automatically load Rails files anymore (e.g. ActiveModel::Validations
). You need the reform-rails
gem, see Installation.
Forms are defined in separate classes. Often, these classes partially map to a model.
class AlbumForm < Reform::Form
property :title
validates :title, presence: true
end
Fields are declared using ::property
. Validations work exactly as you know it from Rails or other frameworks. Note that validations no longer go into the model.
Forms have a ridiculously simple API with only a handful of public methods.
#initialize
always requires a model that the form represents.#validate(params)
updates the form's fields with the input data (only the form, not the model) and then runs all validations. The return value is the boolean result of the validations.#errors
returns validation messages in a classic ActiveModel style.#sync
writes form data back to the model. This will only use setter methods on the model(s).#save
(optional) will call #save
on the model and nested models. Note that this implies a #sync
call.#prepopulate!
(optional) will run pre-population hooks to "fill out" your form before rendering.In addition to the main API, forms expose accessors to the defined properties. This is used for rendering or manual operations.
In your controller or operation you create a form instance and pass in the models you want to work on.
class AlbumsController
def new
@form = AlbumForm.new(Album.new)
end
This will also work as an editing form with an existing album.
def edit
@form = AlbumForm.new(Album.find(1))
end
Reform will read property values from the model in setup. In our example, the AlbumForm
will call album.title
to populate the title
field.
Your @form
is now ready to be rendered, either do it yourself or use something like Rails' #form_for
, simple_form
or formtastic
.
= form_for @form do |f|
= f.input :title
Nested forms and collections can be easily rendered with fields_for
, etc. Note that you no longer pass the model to the form builder, but the Reform instance.
Optionally, you might want to use the #prepopulate!
method to pre-populate fields and prepare the form for rendering.
After form submission, you need to validate the input.
class SongsController
def create
@form = SongForm.new(Song.new)
#=> params: {song: {title: "Rio", length: "366"}}
if @form.validate(params[:song])
The #validate
method first updates the values of the form - the underlying model is still treated as immutuable and remains unchanged. It then runs all validations you provided in the form.
It's the only entry point for updating the form. This is per design, as separating writing and validation doesn't make sense for a form.
This allows rendering the form after validate
with the data that has been submitted. However, don't get confused, the model's values are still the old, original values and are only changed after a #save
or #sync
operation.
After validation, you have two choices: either call #save
and let Reform sort out the rest. Or call #sync
, which will write all the properties back to the model. In a nested form, this works recursively, of course.
It's then up to you what to do with the updated models - they're still unsaved.
The easiest way to save the data is to call #save
on the form.
if @form.validate(params[:song])
@form.save #=> populates album with incoming data
# by calling @form.album.title=.
else
# handle validation errors.
end
This will sync the data to the model and then call album.save
.
Sometimes, you need to do saving manually.
Reform allows default values to be provided for properties.
class AlbumForm < Reform::Form
property :price_in_cents, default: 9_95
end
Calling #save
with a block will provide a nested hash of the form's properties and values. This does not call #save
on the models and allows you to implement the saving yourself.
The block parameter is a nested hash of the form input.
@form.save do |hash|
hash #=> {title: "Greatest Hits"}
Album.create(hash)
end
You can always access the form's model. This is helpful when you were using populators to set up objects when validating.
@form.save do |hash|
album = @form.model
album.update_attributes(hash[:album])
end
Reform provides support for nested objects. Let's say the Album
model keeps some associations.
class Album < ActiveRecord::Base
has_one :artist
has_many :songs
end
The implementation details do not really matter here, as long as your album exposes readers and writes like Album#artist
and Album#songs
, this allows you to define nested forms.
class AlbumForm < Reform::Form
property :title
validates :title, presence: true
property :artist do
property :full_name
validates :full_name, presence: true
end
collection :songs do
property :name
end
end
You can also reuse an existing form from elsewhere using :form
.
property :artist, form: ArtistForm
Reform will wrap defined nested objects in their own forms. This happens automatically when instantiating the form.
album.songs #=> [<Song name:"Run To The Hills">]
form = AlbumForm.new(album)
form.songs[0] #=> <SongForm model: <Song name:"Run To The Hills">>
form.songs[0].name #=> "Run To The Hills"
When rendering a nested form you can use the form's readers to access the nested forms.
= text_field :title, @form.title
= text_field "artist[name]", @form.artist.name
Or use something like #fields_for
in a Rails environment.
= form_for @form do |f|
= f.text_field :title
= f.fields_for :artist do |a|
= a.text_field :name
validate
will assign values to the nested forms. sync
and save
work analogue to the non-nested form, just in a recursive way.
The block form of #save
would give you the following data.
@form.save do |nested|
nested #=> {title: "Greatest Hits",
# artist: {name: "Duran Duran"},
# songs: [{title: "Hungry Like The Wolf"},
# {title: "Last Chance On The Stairways"}]
# }
end
The manual saving with block is not encouraged. You should rather check the Disposable docs to find out how to implement your manual tweak with the official API.
Very often, you need to give Reform some information how to create or find nested objects when validate
ing. This directive is called populator and documented here.
Add this line to your Gemfile:
gem "reform"
Reform works fine with Rails 3.1-5.0. However, inheritance of validations with ActiveModel::Validations
is broken in Rails 3.2 and 4.0.
Since Reform 2.2, you have to add the reform-rails
gem to your Gemfile
to automatically load ActiveModel/Rails files.
gem "reform-rails"
Since Reform 2.0 you need to specify which validation backend you want to use (unless you're in a Rails environment where ActiveModel will be used).
To use ActiveModel (not recommended because very out-dated).
require "reform/form/active_model/validations"
Reform::Form.class_eval do
include Reform::Form::ActiveModel::Validations
end
To use dry-validation (recommended).
require "reform/form/dry"
Reform::Form.class_eval do
feature Reform::Form::Dry
end
Put this in an initializer or on top of your script.
Reform allows to map multiple models to one form. The complete documentation is here, however, this is how it works.
class AlbumForm < Reform::Form
include Composition
property :id, on: :album
property :title, on: :album
property :songs, on: :cd
property :cd_id, on: :cd, from: :id
end
When initializing a composition, you have to pass a hash that contains the composees.
AlbumForm.new(album: album, cd: CD.find(1))
Reform comes many more optional features, like hash fields, coercion, virtual fields, and so on. Check the full documentation here.
Reform is part of the Trailblazer project. Please buy my book to support the development and learn everything about Reform - there's two chapters dedicated to Reform!
By explicitly defining the form layout using ::property
there is no more need for protecting from unwanted input. strong_parameter
or attr_accessible
become obsolete. Reform will simply ignore undefined incoming parameters.
Temporary note: This is the README and API for Reform 2. On the public API, only a few tiny things have changed. Here are the Reform 1.2 docs.
Anyway, please upgrade and report problems and do not simply assume that we will magically find out what needs to get fixed. When in trouble, join us on Gitter.
Full documentation for Reform is available online, or support us and grab the Trailblazer book. There is an Upgrading Guide to help you migrate through versions.
Great thanks to Blake Education for giving us the freedom and time to develop this project in 2013 while working on their project.
Author: trailblazer
Source code: https://github.com/trailblazer/reform
License: MIT license
1595905879
HTML to Markdown
MySQL is the all-time number one open source database in the world, and a staple in RDBMS space. DigitalOcean is quickly building its reputation as the developers cloud by providing an affordable, flexible and easy to use cloud platform for developers to work with. MySQL on DigitalOcean is a natural fit, but what’s the best way to deploy your cloud database? In this post, we are going to compare the top two providers, DigitalOcean Managed Databases for MySQL vs. ScaleGrid MySQL hosting on DigitalOcean.
At a glance – TLDR
ScaleGrid Blog - At a glance overview - 1st pointCompare Throughput
ScaleGrid averages almost 40% higher throughput over DigitalOcean for MySQL, with up to 46% higher throughput in write-intensive workloads. Read now
ScaleGrid Blog - At a glance overview - 2nd pointCompare Latency
On average, ScaleGrid achieves almost 30% lower latency over DigitalOcean for the same deployment configurations. Read now
ScaleGrid Blog - At a glance overview - 3rd pointCompare Pricing
ScaleGrid provides 30% more storage on average vs. DigitalOcean for MySQL at the same affordable price. Read now
MySQL DigitalOcean Performance Benchmark
In this benchmark, we compare equivalent plan sizes between ScaleGrid MySQL on DigitalOcean and DigitalOcean Managed Databases for MySQL. We are going to use a common, popular plan size using the below configurations for this performance benchmark:
Comparison Overview
ScaleGridDigitalOceanInstance TypeMedium: 4 vCPUsMedium: 4 vCPUsMySQL Version8.0.208.0.20RAM8GB8GBSSD140GB115GBDeployment TypeStandaloneStandaloneRegionSF03SF03SupportIncludedBusiness-level support included with account sizes over $500/monthMonthly Price$120$120
As you can see above, ScaleGrid and DigitalOcean offer the same plan configurations across this plan size, apart from SSD where ScaleGrid provides over 20% more storage for the same price.
To ensure the most accurate results in our performance tests, we run the benchmark four times for each comparison to find the average performance across throughput and latency over read-intensive workloads, balanced workloads, and write-intensive workloads.
Throughput
In this benchmark, we measure MySQL throughput in terms of queries per second (QPS) to measure our query efficiency. To quickly summarize the results, we display read-intensive, write-intensive and balanced workload averages below for 150 threads for ScaleGrid vs. DigitalOcean MySQL:
ScaleGrid MySQL vs DigitalOcean Managed Databases - Throughput Performance Graph
For the common 150 thread comparison, ScaleGrid averages almost 40% higher throughput over DigitalOcean for MySQL, with up to 46% higher throughput in write-intensive workloads.
#cloud #database #developer #digital ocean #mysql #performance #scalegrid #95th percentile latency #balanced workloads #developers cloud #digitalocean droplet #digitalocean managed databases #digitalocean performance #digitalocean pricing #higher throughput #latency benchmark #lower latency #mysql benchmark setup #mysql client threads #mysql configuration #mysql digitalocean #mysql latency #mysql on digitalocean #mysql throughput #performance benchmark #queries per second #read-intensive #scalegrid mysql #scalegrid vs. digitalocean #throughput benchmark #write-intensive
1595781840
MySQL does not limit the number of slaves that you can connect to the master server in a replication topology. However, as the number of slaves increases, they will have a toll on the master resources because the binary logs will need to be served to different slaves working at different speeds. If the data churn on the master is high, the serving of binary logs alone could saturate the network interface of the master.
A classic solution for this problem is to deploy a binlog server – an intermediate proxy server that sits between the master and its slaves. The binlog server is set up as a slave to the master, and in turn, acts as a master to the original set of slaves. It receives binary log events from the master, does not apply these events, but serves them to all the other slaves. This way, the load on the master is tremendously reduced, and at the same time, the binlog server serves the binlogs more efficiently to slaves since it does not have to do any other database server processing.
Ripple is an open source binlog server developed by Pavel Ivanov. A blog post from Percona, titled MySQL Ripple: The First Impression of a MySQL Binlog Server, gives a very good introduction to deploying and using Ripple. I had an opportunity to explore Ripple in some more detail and wanted to share my observations through this post.
Ripple supports only GTID mode, and not file and position-based replication. If your master is running in non-GTID mode, you will get this error from Ripple:
Failed to read packet: Got error reading packet from server: The replication sender thread cannot start in AUTO_POSITION mode: this server has GTID_MODE = OFF instead of ON.
You can specify Server_id and UUID for the ripple server using the cmd line options: -ripple_server_id and -ripple_server_uuid
Both are optional parameters, and if not specified, Ripple will use the default server_id=112211 and uuid will be auto generated.
While connecting to the master, you can specify the replication user and password using the command line options:
-ripple_master_user and -ripple_master_password
You can use the command line options -ripple_server_ports and -ripple_server_address to specify the connection end points for the Ripple server. Ensure to specify the network accessible hostname or IP address of your Ripple server as the -rippple_server_address. Otherwise, by default, Ripple will bind to localhost and hence you will not be able to connect to it remotely.
You can use the CHANGE MASTER TO command to connect your slaves to replicate from the Ripple server.
To ensure that Ripple can authenticate the password that you use to connect to it, you need to start Ripple by specifying the option -ripple_server_password_hash
For example, if you start the ripple server with the command:
rippled -ripple_datadir=./binlog_server -ripple_master_address= <master ip> -ripple_master_port=3306 -ripple_master_user=repl -ripple_master_password='password' -ripple_server_ports=15000 -ripple_server_address='172.31.23.201' -ripple_server_password_hash='EF8C75CB6E99A0732D2DE207DAEF65D555BDFB8E'
you can use the following CHANGE MASTER TO command to connect from the slave:
CHANGE MASTER TO master_host='172.31.23.201', master_port=15000, master_password=’XpKWeZRNH5#satCI’, master_user=’rep’
Note that the password hash specified for the Ripple server corresponds to the text password used in the CHANGE MASTER TO command. Currently, Ripple does not authenticate based on the usernames and accepts any non-empty username as long as the password matches.
Exploring MySQL Binlog Server - Ripple
It’s possible to monitor and manage the Ripple server using the MySQL protocol from any standard MySQL client. There are a limited set of commands that are supported which you can see directly in the source code on the mysql-ripple GitHub page.
Some of the useful commands are:
SELECT @@global.gtid_executed;
– To see the GTID SET of the Ripple server based on its downloaded binary logs.STOP SLAVE;
– To disconnect the Ripple server from the master.START SLAVE;
– To connect the Ripple server to the master.#cloud #database #developer #high availability #mysql #performance #binary logs #gtid replication #mysql binlog #mysql protocol #mysql ripple #mysql server #parallel threads #proxy server #replication topology #ripple server
1599275499
php code for updating data in mysql database. Here, i will show you how to fetch and update data from mysql in php.
https://www.tutsmake.com/php-code-for-update-data-in-mysql-database/
#how to edit data in php using form #how to update data in php using form mysqli #how to fetch and update data from database in php #php code for updating data in mysql database #php #update
1657785244
In today’s tutorial, we will learn how to create a Custom Video Player. To build this project, we need HTML, CSS and Javascript.
00:00 Intro
00:05 Preview
02:58 HTML & CSS
35:26 Step 1: Create Initial References
45:46 Step 2: Implement slider() For Volume
51:33 Step 3: Detect Device Type
57:27 Step 4: Implement Functionality For Play & Pause Button
01:03:04 Step 5: Hide/ Show Playback Speed Options
01:08:47 Step 6: Function To Set Playback Speed.
01:12:59 Step 7: Function To Mute Video
01:18:24 Step 8: Function To Set Volume
01:24:55 Step 9: Function To Set Fullscreen
01:31:47 Step 10: Function To Exit Fullscreen
01:40:08 Step 11: Function To Format Current Time & Total Time
01:44:46 Step 12: Function To Update Progress & Timer
01:50:13 Step 13: Implement Click Event On Progress Bar
01:57:26 Step 14: Function On Window Load
Before we start coding let us take a look at the project folder structure. We create a project folder called – ‘Custom Video Player’. Inside this folder, we have three files. The first file is index.html which is the HTML document. Next, we have style.css which is the stylesheet. Finally, we have script.js which is the script file.
We start with the HTML code. First, copy the code below and paste it into your HTML document.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Custom Video Player</title>
<!-- Font Awesome Icons -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
/>
<!-- Google Fonts -->
<link
href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap"
rel="stylesheet"
/>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="rotate-container hide">
<div id="rotate-icon">
<i class="fa-solid fa-rotate-left"></i>
<p>Rotate for a better experience</p>
</div>
</div>
<div class="video-container" id="video-container">
<video id="my-video" preload="metadata">
<source
src="https://dl.dropbox.com/s/l90y72zm97ayzhx/my%20video.mp4?raw=1"
type="video/mp4"
/>
Your browser does not support the video tag
</video>
<div class="controls" id="controls">
<div class="progress-container flex-space">
<div id="progress-bar">
<div id="current-progress"></div>
</div>
<div class="song-timer">
<span id="current-time">00:00</span>
<span>/</span>
<span id="max-duration">00:00</span>
</div>
</div>
<div id="video-controls" class="video-controls flex-space">
<div class="container-1 flex">
<div>
<!-- Play video -->
<button id="play-btn" class="control-btn">
<i class="fa-solid fa-play"></i>
</button>
<!-- Pause video-->
<button id="pauseButton" class="control-btn hide">
<i class="fa-solid fa-pause"></i>
</button>
</div>
<!-- volume of video-->
<div id="volume" class="volume flex">
<span id="high">
<i class="fa-solid fa-volume-high"></i>
</span>
<span class="hide" id="low">
<i class="fa-solid fa-volume-low"></i>
</span>
<span class="hide" id="mute">
<i class="fa-solid fa-volume-xmark"></i>
</span>
<input
type="range"
min="0"
max="100"
value="50"
id="volume-range"
oninput="slider()"
/>
<span id="volume-num">50</span>
</div>
</div>
<div class="container-2 flex-space">
<div class="playback">
<button id="playback-speed-btn">1x</button>
<div class="playback-options hide">
<button onclick="setPlayback(0.5)">0.5</button>
<button onclick="setPlayback(1.0)">1</button>
<button onclick="setPlayback(2.0)">2</button>
</div>
</div>
<!-- screen size -->
<div id="size-screen">
<button id="screen-expand">
<i class="fa-solid fa-expand"></i>
</button>
<button id="screen-compress" class="hide">
<i class="fa-solid fa-compress"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Script -->
<script src="script.js"></script>
</body>
</html>
Next, we style our video player using CSS. For this copy, the code provided to you below and paste it into your stylesheet.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
outline: none;
color: #ffffff;
font-family: "Roboto Mono", monospace;
}
body {
background-color: #2887e3;
}
.flex {
display: flex;
}
.flex-space {
display: flex;
justify-content: space-between;
}
.container {
padding: 1em 0;
}
#my-video {
width: 100%;
}
.rotate-container {
top: 0;
position: absolute;
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, 0.3);
display: flex;
justify-content: center;
align-items: center;
}
#rotate-icon {
display: flex;
flex-direction: column;
color: #dddddd;
text-align: center;
}
.hide {
display: none;
}
.video-container {
width: 60%;
position: absolute;
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
box-shadow: 20px 30px 50px rgba(0, 0, 0, 0.2);
}
.controls {
position: absolute;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(35, 34, 39, 0.8);
}
.progress-container {
align-items: center;
padding: 0 0.5em;
}
.video-controls {
flex-direction: row;
align-items: center;
}
#progress-bar {
position: relative;
width: 75%;
height: 5px;
background-color: #000000;
margin: 1em 0;
vertical-align: 2px;
border-radius: 5px;
cursor: pointer;
}
.song-timer {
font-size: 0.8em;
width: 25%;
text-align: right;
}
#current-progress {
position: absolute;
left: 0;
display: inline-block;
height: 5px;
width: 0;
background: #2887e3;
border-radius: 5px;
}
#current-progress:after {
content: "";
position: absolute;
left: calc(100% - 1.5px);
top: -2.5px;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #ffffff;
}
.playback {
position: relative;
}
.control-btn,
#screen-expand,
#screen-compress {
width: 3em;
height: 3em;
outline: none;
border: none;
background-color: transparent;
}
#size-screen {
margin-left: auto;
}
.volume {
align-items: center;
margin-left: 0.6em;
}
#volume-range {
position: relative;
margin: 0 0.5em;
cursor: pointer;
height: 5px;
-webkit-appearance: none;
background-color: #000000;
border-radius: 5px;
outline: none;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
height: 10px;
width: 10px;
background-color: #2887e3;
border-radius: 50%;
cursor: pointer;
border: none;
}
.fa-solid {
font-size: 1.1rem;
}
.container-2 {
width: 10%;
min-width: 70px;
align-items: center;
}
#playback-speed-btn {
position: relative;
background-color: transparent;
border: 1px solid #ffffff;
color: #ffffff;
font-size: 0.9rem;
border-radius: 5px;
padding: 0.3em 0.25em;
cursor: pointer;
}
.playback-options {
position: absolute;
bottom: 0;
background-color: #000000;
min-width: 5em;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
z-index: 1;
}
.playback-options button {
color: #ffffff;
border-left: 0;
border-right: 0;
border-top: 0;
width: 100%;
background-color: transparent;
padding: 1em;
text-decoration: none;
display: block;
}
@media all and (display-mode: fullscreen) {
.container {
padding: 0;
}
.video-container {
width: 100%;
margin: 0;
}
.controls {
position: absolute;
display: block;
bottom: 0;
left: 0;
width: 100%;
z-index: 2;
}
#progress-bar {
width: 80%;
}
.song-timer {
width: 20%;
font-size: 1.2em;
}
.fa-solid {
color: #dddddd;
}
}
@media only screen and (max-width: 768px) {
.video-container,
.controls {
width: 100%;
}
span {
display: inline;
}
#progress-bar {
width: 60%;
}
.song-timer {
width: 40%;
font-size: 0.9em;
}
.fa-solid {
font-size: 1rem;
}
.control-btn,
#screen-expand,
#screen-compress {
width: 2em;
height: 1.5em;
}
}
@media only screen and (max-width: 768px) and (display-mode: fullscreen) {
.video-container {
margin-top: 50%;
}
}
Lastly, we add functionality to our custom video player using Javascript. Once again copy the code below and paste it into your script file.
We do this in fourteen steps:
Create initial references.
Implement slider()
Detect device type.
Implement functionality for the play and pause button.
Hide/Show playback speed options
Function to set playback speed.
Logic to mute video.
Function to set Fullscreen.
Function to exit Fullscreen.
Create a function to format the current time & maximum time.
Create a function to update progress & timer.
Implement a click event on the progress bar.
Function on window load.
let videoContainer = document.querySelector(".video-container");
let container = document.querySelector(".container");
let myVideo = document.getElementById("my-video");
let rotateContainer = document.querySelector(".rotate-container");
let videoControls = document.querySelector(".controls");
let playButton = document.getElementById("play-btn");
let pauseButton = document.getElementById("pauseButton");
let volume = document.getElementById("volume");
let volumeRange = document.getElementById("volume-range");
let volumeNum = document.getElementById("volume-num");
let high = document.getElementById("high");
let low = document.getElementById("low");
let mute = document.getElementById("mute");
let sizeScreen = document.getElementById("size-screen");
let screenCompress = document.getElementById("screen-compress");
let screenExpand = document.getElementById("screen-expand");
const currentProgress = document.getElementById("current-progress");
const currentTimeRef = document.getElementById("current-time");
const maxDuration = document.getElementById("max-duration");
const progressBar = document.getElementById("progress-bar");
const playbackSpeedButton = document.getElementById("playback-speed-btn");
const playbackContainer = document.querySelector(".playback");
const playbackSpeedOptions = document.querySelector(".playback-options");
function slider() {
valPercent = (volumeRange.value / volumeRange.max) * 100;
volumeRange.style.background = `linear-gradient(to right, #2887e3 ${valPercent}%, #000000 ${valPercent}%)`;
}
//events object
let events = {
mouse: {
click: "click",
},
touch: {
click: "touchstart",
},
};
let deviceType = "";
//Detech touch device
const isTouchDevice = () => {
try {
//We try to create TouchEvent (it would fail for desktops and throw error)
document.createEvent("TouchEvent");
deviceType = "touch";
return true;
} catch (e) {
deviceType = "mouse";
return false;
}
};
//play and pause button
playButton.addEventListener("click", () => {
myVideo.play();
pauseButton.classList.remove("hide");
playButton.classList.add("hide");
});
pauseButton.addEventListener(
"click",
(pauseVideo = () => {
myVideo.pause();
pauseButton.classList.add("hide");
playButton.classList.remove("hide");
})
);
//playback
playbackContainer.addEventListener("click", () => {
playbackSpeedOptions.classList.remove("hide");
});
//if user clicks outside or on the option
window.addEventListener("click", (e) => {
if (!playbackContainer.contains(e.target)) {
playbackSpeedOptions.classList.add("hide");
} else if (playbackSpeedOptions.contains(e.target)) {
playbackSpeedOptions.classList.add("hide");
}
});
//playback speed
const setPlayback = (value) => {
playbackSpeedButton.innerText = value + "x";
myVideo.playbackRate = value;
};
//mute video
const muter = () => {
mute.classList.remove("hide");
high.classList.add("hide");
low.classList.add("hide");
myVideo.volume = 0;
volumeNum.innerHTML = 0;
volumeRange.value = 0;
slider();
};
//when user click on high and low volume then mute the audio
high.addEventListener("click", muter);
low.addEventListener("click", muter);
//for volume
volumeRange.addEventListener("input", () => {
//for converting % to decimal values since video.volume would accept decimals only
let volumeValue = volumeRange.value / 100;
myVideo.volume = volumeValue;
volumeNum.innerHTML = volumeRange.value;
//mute icon, low volume, high volume icons
if (volumeRange.value < 50) {
low.classList.remove("hide");
high.classList.add("hide");
mute.classList.add("hide");
} else if (volumeRange.value > 50) {
low.classList.add("hide");
high.classList.remove("hide");
mute.classList.add("hide");
}
});
//Screen size
screenExpand.addEventListener("click", () => {
screenCompress.classList.remove("hide");
screenExpand.classList.add("hide");
videoContainer
.requestFullscreen()
.catch((err) => alert("Your device doesn't support full screen API"));
if (isTouchDevice) {
let screenOrientation =
screen.orientation || screen.mozOrientation || screen.msOrientation;
if (screenOrientation.type == "portrait-primary") {
//update styling for fullscreen
pauseVideo();
rotateContainer.classList.remove("hide");
const myTimeout = setTimeout(() => {
rotateContainer.classList.add("hide");
}, 3000);
}
}
});
//if user presses escape the browser fire 'fullscreenchange' event
document.addEventListener("fullscreenchange", exitHandler);
document.addEventListener("webkitfullscreenchange", exitHandler);
document.addEventListener("mozfullscreenchange", exitHandler);
document.addEventListener("MSFullscreenchange", exitHandler);
function exitHandler() {
//if fullscreen is closed
if (
!document.fullscreenElement &&
!document.webkitIsFullScreen &&
!document.mozFullScreen &&
!document.msFullscreenElement
) {
normalScreen();
}
}
//back to normal screen
screenCompress.addEventListener(
"click",
(normalScreen = () => {
screenCompress.classList.add("hide");
screenExpand.classList.remove("hide");
if (document.fullscreenElement) {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
})
);
//Format time
const timeFormatter = (timeInput) => {
let minute = Math.floor(timeInput / 60);
minute = minute < 10 ? "0" + minute : minute;
let second = Math.floor(timeInput % 60);
second = second < 10 ? "0" + second : second;
return `${minute}:${second}`;
};
//Update progress every second
setInterval(() => {
currentTimeRef.innerHTML = timeFormatter(myVideo.currentTime);
currentProgress.style.width =
(myVideo.currentTime / myVideo.duration.toFixed(3)) * 100 + "%";
}, 1000);
//update timer
myVideo.addEventListener("timeupdate", () => {
currentTimeRef.innerText = timeFormatter(myVideo.currentTime);
});
//If user click on progress bar
isTouchDevice();
progressBar.addEventListener(events[deviceType].click, (event) => {
//start of progressbar
let coordStart = progressBar.getBoundingClientRect().left;
//mouse click position
let coordEnd = !isTouchDevice() ? event.clientX : event.touches[0].clientX;
let progress = (coordEnd - coordStart) / progressBar.offsetWidth;
//set width to progress
currentProgress.style.width = progress * 100 + "%";
//set time
myVideo.currentTime = progress * myVideo.duration;
//play
myVideo.play();
pauseButton.classList.remove("hide");
playButton.classList.add("hide");
});
window.onload = () => {
//display duration
myVideo.onloadedmetadata = () => {
maxDuration.innerText = timeFormatter(myVideo.duration);
};
slider();
};
That’s it for this tutorial. If you face any issues while creating this code, you can download the source code by clicking the ‘Download Code’
📁 Download Source Code : https://www.codingartistweb.com
#html #css #javascript #webdev